3 条命令跑通 Magnitude用视觉浏览器代理做自然语言 Web 测试【免费下载链接】browser-agentOpen-source, vision-first browser agent项目地址: https://gitcode.com/gh_mirrors/magnit/browser-agent用选择器写的 E2E 测试前端一重构就全红。Magnitude 是个视觉优先vision-first的开源浏览器代理它靠截图“看”页面、用像素坐标点鼠标测试步骤和断言都用自然语言写界面改版也不容易让用例失效。 项目速览先弄清它干什么视觉优先不依赖 DOM 选择器模型直接给出像素坐标去点自然语言用例act描述操作check写断言像跟同事交代流程自带测试运行器用例写在*.mag.ts文件里一条命令全跑WebVoyager 基准 94% 得分在通用网页操作基准上表现领先⚡ 装完就能跑从密钥到第一个 Magnitude Web 测试第一步拿一个能跑的项目。官方脚手架直接建工程还会生成一个马上能跑的示例脚本npx create-magnitude-app进生成的目录执行npm start就能看到代理真的操作浏览器。如果是给已有的web 应用加测试走测试运行器这条路npm i --save-dev magnitude-test npx magnitude init它会生成tests/magnitude目录里面是magnitude.config.ts配置和example.mag.ts示例用例改起来有参照物。第二步配模型密钥。Magnitude 要求模型视觉落点准即能在截图里指出具体坐标位置官方推荐 Claude Sonnet 4设个环境变量即可export ANTHROPIC_API_KEYyour-api-key第三步写第一个用例再运行。下面这个用例做的事建 3 条 todo、确认都显示、逐条勾选、确认清零——全程没有一行选择器代码import { test } from magnitude-test; const sampleTodos [Take out the trash, Buy groceries, Build more test cases with Magnitude]; test(can add and complete todos, { url: https://magnitodo.com }, async (agent) { await agent.act(create 3 todos, { data: sampleTodos.join(, ) }); await agent.check(should see all 3 todos); await agent.act(mark each todo complete); await agent.check(says 0 items left); });保存成*.mag.ts文件然后npx magnitude这条命令会按*.mag.ts模式发现所有测试文件并执行发现问题时它会描述清楚到底发生了什么。✅ 3 个真实场景省在哪场景一给自己应用的 E2E 测试。原来是每个输入框、按钮、弹窗都写选择器UI 一改就满盘排查。换 Magnitude 后你只描述流程和预期CSS 类名怎么变都不影响代理点击——省下的是每次重构后的维护时间。场景二没有 API 的网站。原来只能手动复制或写脆弱的解析。自动化脚本里可以直接调extract给一句描述加一个 zod schema描述数据结构的小声明它按结构返回数据const tasks await agent.extract(List in progress tasks, z.array(z.object({ title: z.string(), description: z.string(), })));省掉的是逐页写解析代码的功夫。场景三让编码代理真的看见页面。原来写完代码得切到浏览器手动验证。接上 MCP 后Cursor、Claude Code 这类助手能开浏览器、点击、输入、拖拽每次交互后自动截屏回看——省掉写码 → 手测的来回切换。 进阶用 MCP 把 Cursor 或 Claude Code 接上浏览器Magnitude 提供官方 MCP 服务器给任何兼容的 AI 助手加上同一套浏览器能力。Claude Code 一条命令claude mcp add magnitude -- npx magnitude-mcp其他助手Cursor、Windsurf、Cline配同样的 JSON真正会改的就这 3 个环境变量{ mcpServers: { magnitude: { command: npx, args: [magnitude-mcp], env: { MAGNITUDE_MCP_PROFILE_DIR: ~/.magnitude/profiles/default, MAGNITUDE_MCP_STEALTH: true, MAGNITUDE_MCP_VIEWPORT_WIDTH: 1024 } } } }MAGNITUDE_MCP_PROFILE_DIR存 cookies 和本地存储的目录多项目可各自隔离MAGNITUDE_MCP_STEALTH隐身模式加一层反爬虫检测规避MAGNITUDE_MCP_VIEWPORT_WIDTH/HEIGHT浏览器视口尺寸默认 1024x728️ 踩坑自查模型、密钥、稳定性点不准、操作跑偏→ 确认模型是视觉落点准的那批Claude Sonnet 3.7/4、Opus 4、Qwen 2.5 VL 或 3 VL密钥不生效→ 检查ANTHROPIC_API_KEY是否真的导入了运行测试的那个终端两次跑结果不一致→ 把步骤和断言写得更具体描述越细运行越稳本地站点打不开→ localhost 项目由 Magnitude 自动建安全隧道确认 baseUrl 端口没写错用例多了跑得慢→npx magnitude加-w workers参数并行跑下一步先跑npx create-magnitude-app把示例里的act()改一句话再跑一遍看区别然后回自己项目写第一个.mag.ts用例——从这开始测试用例不再是写选择器的事。【免费下载链接】browser-agentOpen-source, vision-first browser agent项目地址: https://gitcode.com/gh_mirrors/magnit/browser-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考