跳转到内容
案例 生态 源码解读 文档

用 Playwright 实现浏览器自动化

Playwright MCP 服务器让 OpenCode 变成浏览器操作员。它能在你监督下导航、点击、填表、读 DOM、验证可视状态。

何时使用此案例

  • 需要端到端验证某个 UI 流程（登录、结算、设置保存）。
  • 想从没有公开 API 的页面抓取结构化数据。
  • 在调试一个只在真实浏览器中才能复现的 bug。

前置配置

  • 已安装 OpenCode
  • 可用的 Playwright MCP 服务器（OpenCode 推荐 MCP 中自带）
  • 明确的目标 URL 和待执行步骤列表

步骤

  1. 添加 Playwright MCP 服务器

    在 OpenCode 配置中注册它。

    {
  "mcp": {
    "playwright": {
      "type": "local",
      "command": ["npx", "@playwright/mcp@latest"]
    }
  }
}

  2. 确认工具已加载

    启动 OpenCode，让它列出可用的浏览器工具。你应当看到 browser_navigate、browser_click、browser_snapshot 等。

  3. 用明确目标陈述任务

    给 OpenCode 提供 URL、用户凭据（如有）和你想要的具体断言。

    打开 https://staging.example.com，用测试账号登录，进入 Settings，告诉我新出现的 “Export data” 开关是否可见。如果可见，也告诉我它的默认状态。

  4. 监督每次工具调用

    关注工具调用。批准导航、点击、填表；拒绝任何会写入生产数据库的操作——使用预发环境。

  5. 要求证据

    流程结束后，让 OpenCode 导出相关 DOM 或截图。这会成为你的回归产物。

    把最终页面的 DOM 和 Settings 页的截图分别保存到 ./artifacts/settings-snapshot.html 和 ./artifacts/settings.png。

  6. 把流程转化为测试

    让 OpenCode 把刚才监督过的步骤翻译成可在 CI 中运行的 Playwright 测试。

    把刚才执行的流程转化为 tests/e2e/settings-export.spec.ts 下的 Playwright 测试。使用 page-object 模式，断言开关可见性和默认状态。

关键提示词

使用 Playwright MCP 服务器，打开 [URL]，用 [user/pass] 凭据登录，导航到 [page]，并验证 [specific condition]。最后把页面的 DOM 快照和截图保存到 ./artifacts/。报告每一步观察到的情况。

验证重点

  • DOM 快照包含预期元素
  • 截图能直观看到被断言的状态
  • 生成的 Playwright 测试在本地和 CI 中都通过

常见坑点

  • 跑在生产环境：始终使用预发环境，浏览器自动化可能改变状态。
  • 选择器脆弱：UI 标记会变，按稳定属性（data-testid、role）断言，不要按 CSS 类。
  • 工具链太长：一句提示”做 A、B、C、D 全部”可能在 C 步失败后留下异常状态，把流程拆成多步监督。

相关文档

  • MCP 服务器 — 如何配置和使用 Model Context Protocol 服务器
  • 工具 — 智能体可调用的内置与自定义工具

相关案例

相关文档

下一步