基于 Claude Code 与 BrowserCat MCP 的浏览器自动化全链路构建实践

wsl --install 或 wsl.exe --install

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart 
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

wsl -l -v

curl -fsSL https://www.aicodemirror.com/resource/install/install.sh | bash

https://www.aicodemirror.com/register?invitecode=CZMECI

{
  "mcpServers": {
    "browsercat": {
      "command": "npx",
      "args": [
        "-y",
        "@browsercatco/mcp-server"
      ],
      "env": {
        "BROWSERCAT_API_KEY": "你申请的api-key"
      }
    }
  }
}

claude mcp add-json browsercat '{"command": "npx", "args": ["-y", "@browsercatco/mcp-server"], "env":
      {"BROWSERCAT_API_KEY": "x4uHR7gIHi1pyuefaeUoOB6GRdJZoIbsU0…"}

 1. `browsercat_navigate`

**功能**：控制浏览器导航到指定 URL 。比如要访问 “[https://example.com](https://example.com/)” ，就可用它让浏览器跳转到该网页，是自动化浏览流程的基础步骤，用于打开目标页面。

 2. `browsercat_screenshot`

**功能**：对当前浏览器页面（或指定区域）进行截图。可用于测试场景留存页面状态、监控页面视觉变化，或简单的网页截图工具逻辑，把页面可视化内容保存为图片文件（如 PNG 等格式 ）。

 3. `browsercat_click`

**功能**：模拟鼠标点击操作，可指定页面元素（通过选择器，如 CSS 选择器、XPath 等定位 ），触发点击事件，像点击按钮提交表单、点击链接跳转、点击复选框等交互，驱动页面按流程执行。

 4. `browsercat_fill`

**功能**：向页面可输入元素（如输入框、文本域 ）填充内容。比如自动化登录时，往账号、密码输入框填值；表单填写场景中，自动填入姓名、地址等信息，简化手动输入流程。

 5. `browsercat_select`

**功能**：操作页面下拉选择框（`<select>` 元素 ），可通过值、索引或文本等方式，选择下拉项。例如表单里选择省份、性别下拉框，自动选对应选项，完成表单交互。

 6. `browsercat_hover`

**功能**：模拟鼠标悬停在页面元素上的操作，触发元素的 hover 事件（如 CSS hover 样式变化、悬浮提示框显示 ）。常用于测试交互样式、触发隐藏菜单等场景，还原用户鼠标悬停的操作行为。

 7. `browsercat_evaluate`

**功能**：在浏览器环境执行自定义 JavaScript 代码片段。可用于获取页面复杂数据（如从 `window` 对象取状态 ）、操作页面 DOM（超出简单封装操作的场景 ）、执行自定义逻辑（比如计算页面元素统计值 ），灵活扩展浏览器交互能力。
 8. `browsercat_navigate`

和之前功能一致，**核心作用是让浏览器跳转到指定 URL** 。比如测试不同环境网址、爬虫场景按链接跳转，是开启页面交互的 “第一步”，决定自动化流程从哪个网页开始执行。

 9. `browsercat_screenshot`

同样是**对当前浏览器可视区域（或指定元素区域 ）截图** 。可用于监控页面改版（对比不同时间截图差异 ）、自动化测试断言（验证页面元素渲染是否符合预期 ）、生成网页报告（附页面状态图 ）等，把动态页面状态 “固化” 成图片留存。

 10. `browsercat_click`

**模拟鼠标点击页面元素** ，是最基础的交互动作之一。比如点击登录按钮提交信息、点击分页按钮加载更多内容、点击弹窗关闭按钮等，通过定位元素（CSS 选择器、XPath 等 ）精准触发点击事件，推动流程往下执行。

 11. `browsercat_fill`

**往页面输入框、文本域填充文本内容** 。典型场景是自动化登录（填账号密码 ）、表单录入（填姓名、电话等 ），替代手动输入，提升流程效率。需要配合元素定位，精准找到要填充的输入区域，再传入文本值。

 12. `browsercat_select`

**操作 `<select>` 下拉选择器** ，支持通过选项值（value ）、索引（index ）、显示文本（label ）选中下拉项 。比如表单里选 “省份”“学历” 等下拉内容，自动完成选项选择，避免手动点击下拉、选值的操作，常用于标准化表单填写流程。

 13. `browsercat_hover`

**模拟鼠标悬浮在元素上的行为** ，触发元素的 hover 交互（如 CSS 样式变化、显示悬浮提示框、展开下拉菜单 ）。比如测试导航菜单的悬浮效果、验证元素悬浮后的动态加载内容，还原用户浏览时 “悬停查看” 的操作场景。

 14. `browsercat_evaluate`

**在浏览器上下文执行自定义 JavaScript 代码** ，是 “灵活扩展” 的关键功能 。比如页面没有直接暴露的接口 / 元素，可通过 `evaluate` 写 JS 脚本获取复杂数据（如 `document.querySelector('xxx').dataset` 取自定义属性 ）、操作 DOM（修改页面结构辅助测试 ）、调用页面内置函数（如 `window.someCustomFn()` ），突破封装好的基础操作限制，适配复杂场景。

https://console.lanyun.net/#/register?promoterCode=5663b8b127