playwirght-mcp工具执行自动化测试

一、安装playwright-mcp的浏览器扩展

扩展安装流程请参考官方文档

默认情况下的playwright-mcp服务会默认打开一个新的页面，开发完成后，需要登录，就会导致无法测试，安装这个扩展之后，即可和已经打开的浏览器页面进行交互，保留现有的会话状态。需要在自动化测试之前，手动登录目标页面进行登录之后，再让mcp执行测试即可。

二、配置ai编程工具的mcp服务

自动化测试需要进行和大模型进行大量交互，推荐使用提供免费模型的ide工具

首先打开浏览器扩展，查看扩展提供的token：

目前市面上的ai编程工具基本都是支持添加mcp服务的，在mcp配置页面中填入如下配置

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--extension", "--allowed-hosts", "*"],
      "env": {
        "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "这里面填写浏览器扩展提供的token"
      }
    }
  }
}

三、提示词技巧

需要在提示词中添加关键词调用playwright即可让大模型主动调用playwrigth-mcp实现自动化测试。

参考提示词如下：

调用playwright执行基础功能测试，目标页面文件为：src/views/example/index.vue