browser-agent5 分钟跑通的自然语言浏览器自动化框架【免费下载链接】browser-agentOpen-source, vision-first browser agent项目地址: https://gitcode.com/GitHub_Trending/magnit/browser-agentbrowser-agentMagnitude是一个开源的视觉优先vision-first浏览器自动化框架它用视觉 AI 理解页面截图让你用自然语言驱动一个真实浏览器——点按钮、填表单、拖拽、提取结构化数据甚至直接跑端到端测试。如果你受够了UI 一改、选择器全崩的 E2E 测试或者想给编码代理装上手和眼睛去操作 Web 应用这个框架值得看一眼。一、它凭什么好用不靠选择器靠像素坐标。传统浏览器代理在页面上画带编号的框来定位元素遇到复杂现代站点就容易失效。browser-agent 让视觉接地能理解图片上精确坐标的多模态模型直接指定点击的像素位置交互不依赖 DOM 结构。效果是实打实的官方在 WebVoyager 基准上拿到 94% 的得分见 README.md。测试写成大白话。测试步骤用act(Log in)这种自然语言描述断言用check(Dashboard is visible)视觉检查。把一段 Playwright 的 todo 用例迁过来代码能从十几行压到五六行对比示例见 docs/testing/building-test-cases.mdx。一套内核三种形态。同一个浏览器操作内核同时支撑自动化 SDKpackages/magnitude-core/、测试运行器packages/magnitude-test/、MCP 服务器packages/magnitude-mcp/。写自动化脚本和写测试用例共享同一套心智模型。抽象层级随意切。agent.act()既能接创建一个任务这种高层任务也能接把某张卡片拖到第一列顶部这种低层动作还能在 agent 级和单个 action 级注入自定义 prompt方便在生产环境里精确控制行为。二、从零到跑通1. 两条命令完成初始化在已有的 Web 项目里加测试npm i --save-dev magnitude-test npx magnitude init它会生成tests/magnitude目录里面有magnitude.config.ts全局配置和example.mag.ts示例用例。如果你是想从零搭一个自动化项目而不是接入现有测试用脚手架npx create-magnitude-app2. 写一个最小用例import { test } from magnitude-test; test(can add and complete todos, { url: https://magnitodo.com }, async (agent) { await agent.act(create 3 todos, { data: Take out trash, Buy groceries, Ship it }); await agent.check(should see all 3 todos); // 视觉断言 await agent.act(mark each todo complete); await agent.check(says 0 items left); });步骤描述像跟同事交代事情目标说清楚即可不用细化到先点哪个输入框。3. 跑起来npx magnitude # 运行所有 *.mag.ts 用例 npx magnitude -w 4 # 4 个 worker 并行跑有任一用例失败时进程以退出码 1 结束可以直接挂在 CI/CD 里当门禁。注意一个前置条件它需要一个视觉接地的模型推荐 Claude Sonnet 4设置ANTHROPIC_API_KEY即可开源替代是 Qwen 2.5 VL 72B。大多数常见模型包括部分大厂的通用多模态模型并不支持精确坐标定位选错模型是最常见的翻车点清单见 docs/core-concepts/compatible-llms.mdx。三、真实场景怎么落地给自己的 Web 应用做端到端测试。适用想降低 UI 改版带来的测试维护成本用例数量在几十到上百这个量级。边界它是概率性判断不是确定性断言。如果你的场景要求毫秒级时序控制或必须逐字符相等这类严格校验还是该用 Playwright 的精确断言把它当补充而非替代。抓取没有 API 的站点数据。用extract()传一段说明加 zod schema它把页面内容转成结构化数据返回详见 docs/core-concepts/data-extraction.mdx。边界受站点条款约束别拿它做高频爬取适合取一次数据喂给下游流程这类低频集成。给编码代理装上浏览器。通过 MCP 接入后Claude Code、Cursor、Cline 这类代理能在开发过程中实时打开页面、看到截图、动手点页面边写边验证。适合改完代码自己看一眼页面的自测循环不适合无人值守的大批量操作。四、进阶玩法与生态集成接入 MCP 服务器。安装后把下面配置贴进你用的客户端Claude Code 可一行claude mcp add magnitude -- npx magnitude-mcp{ mcpServers: { magnitude: { command: npx, args: [magnitude-mcp], env: { MAGNITUDE_MCP_PROFILE_DIR: ~/.magnitude/profiles/default, // 持久化 cookie MAGNITUDE_MCP_STEALTH: true, // 反检测 MAGNITUDE_MCP_VIEWPORT_WIDTH: 1024 } } } }测试运行器可调项。magnitude.config.ts里值得留意的几项browser.contextOptions可传任意 Playwright 上下文参数比如recordVideo录下每次运行webServer配置本地开发服务器命令跑测试时自动拉起、结束后自动杀掉continueAfterFailure: true让失败用例不中断整轮。全部选项见 docs/testing/test-configuration.mdx。提取器是独立包。packages/magnitude-extract/ 提供页面内容转 Markdown 的结构化抽取能力可以脱离 agent 单独用。五、踩坑与排错现象解法代理点不准、动作混乱模型不支持视觉接地。换成 Claude Sonnet 4 / Sonnet 3.7 / Opus 4 / Qwen 2.5 VL 72B参考 docs/core-concepts/compatible-llms.mdx同一用例时过时不过把模糊步骤拆细、描述更具体创建公司→在表单里填前两项其余用默认值提交具体描述能显著提升稳定性本地站点测试总打不开在配置里写webServer启动命令 监听 URL 超时Magnitude 会自动起服务并在结束时清理一个失败全队列停摆加--no-fail-fast参数或配置continueAfterFailure: true不想上传运行遥测配置里设telemetry: false即可关闭另外提醒测试 URL 的解析顺序是环境变量MAGNITUDE_TEST_URL→ 全局配置 → 用例组 → 单条用例排查它到底打开了哪个地址时按这个顺序查。收尾一句话browser-agent 把操作浏览器这件事从写选择器换成了说人话换来的是 UI 改版不再批量击穿你的测试。想深入可以直接翻 packages/magnitude-core/examples/ 里的可运行示例和 docs/ 下的完整文档照着改几个act()调用就是最快的上手方式。【免费下载链接】browser-agentOpen-source, vision-first browser agent项目地址: https://gitcode.com/GitHub_Trending/magnit/browser-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考