opencode + playwright 实现AI编程到测试的迭代闭环

在大量使用opencode 或 claude code 这样的AI编程工具后效率提升明显，但ai实现的功能也总是或多或少的有一些问题需要不断调整。所以开发的过程基本上就是向agent 描述功能、agent 处理生成代码、在人为打开浏览器验证功能是否正确，往往一个功能要经过多次这样的过程才能得到一个正确的结果。现在就是因为打开浏览器检测这一步需要人为操作，导致agent 没法从生成到测试形成一个自验证的闭环，如果它可以生成后能自己打开浏览器看看结果是否符合预期，则可以继续修改直到达到要求为止，开发人员只需要最后验证一下功能。那么是否有方法解决这个问题呢？当然是有的，就是使用playwright，playwright 是一个浏览器自动化框架，主要用于端到端（E2E）测试、网页自动化操作和轻量级爬虫。agent 能通过 playwright 获取浏览器的快照、网络请求、控制台等信息进而分析问题再解决问题，有些问题自己找不到原因也可以直接把地址给 agent 让它用playwright 调试找原因，playwright 和大模型简直是完美的组合，可能很多人已经知道了这个工具，但也还有很多人对自动化测试工具不太了解，希望能给有需要的人提供有效的信息，我是使用的opencode + GLM5 搭配playwright mcp实际使用下来效果非常好。下面是大概的安装过程，我是使用的opencode ，claude code 也是类似的只是其配置文件路径和mcp配置格式不同，也可以直接进入相应的代码仓库按文档安装。

安装opencode 参考：opencode 和claude code 配置数据库mcp 服务

安装 playwright-cli，运行如下命令安装：

javascript 复制代码

#安装
npm install -g @playwright/cli@latest
#验证
playwright-cli --help

在项目目录下运行如下命令生成skill ，会在.claude/skill/下生成 playwright-cli skill，opencode 也会读取claude 的skill

复制代码

playwright-cli install --skills

安装 playwright-mcp：

opencode 参考下面的格式在 ~/.config/opencode/opencode.json 中的mcp下增加 playwright 的配置

javascript 复制代码

{
    "$schema": "https://opencode.ai/config.json",
    "mcp": {
        "playwright": {
            "type": "local",
            "command": [
                "npx",
                "@playwright/mcp@latest"
            ],
            "enabled": true
        }
    }
}

claude code 参考下面的格式在 ~/.claude.json 中的mcpServers下增加 playwright 的配置

javascript 复制代码

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

playwright-cli playwright-mcp 两者区别， cli 是基于skill 的模式不会每次都把浏览器快照推给大模型所以使用的token 更少，后者就是普通mcp服务每次都会把浏览器快照推给大模型使用token更多，按固定步骤测试cli更省，要分析页面的情况下mcp 效果更好。

另外我是使用的智谱的GLM Coding Plan,现在的GLM5效果已经非常接近Claude Opus 4.5 的效果，价格更便宜用量却大很多，如考虑买一个Coding Plan 推荐大家直接入　GLM Coding Plan