使用Cursor和Playwright实现前端自动化测试

团战发动机
147 阅读3分钟

使用Cursor和Playwright实现前端自动化测试

引言：新时代的自动化测试革命

随着AI编码愈演愈烈，公司要求使用AI重构并合并了几个微服务，除了接口测试以外还要求页面自动化测试，确保代码质量。传统的手动测试不仅耗时耗力，还容易出错。而今，随着AI编程助手Cursor与Playwright MCP服务器的结合，自动化测试的门槛被大幅降低。本教程将带你从零开始，掌握如何利用这一强大组合实现高效的Web自动化测试。

第一部分：基础环境搭建

1.1 Node.js环境准备

在开始之前，首先需要安装Node.js运行环境。强烈推荐使用版本管理工具安装：

使用nvm（Node Version Manager）安装

# 安装nvm（Linux/macOS）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 或Windows使用nvm-windows
# 下载地址：https://github.com/coreybutler/nvm-windows/releases

# 安装最新的LTS版本
nvm install --lts
nvm use --lts

# 验证安装
node --version
npm --version

使用fnm（Fast Node Manager）安装

# 安装fnm
curl -fsSL https://fnm.vercel.app/install | bash

# 安装Node.js
fnm install --lts
fnm use --lts

直接下载安装

如果不想使用版本管理工具，可以直接从Node.js官网下载安装包：

  • 官网地址：nodejs.org/
  • 推荐下载LTS（长期支持版本）

安装完成后，在终端中验证：

node -v  # 应显示版本号如 v20.x.x
npm -v   # 应显示版本号如 10.x.x

1.2 安装Playwright MCP服务器

确保Node.js环境正常后，在全局环境中安装Playwright MCP服务器：

npm install -g @playwright/mcp

注意：如果遇到权限问题，可以尝试：

  • macOS/Linux：使用sudo npm install -g @playwright/mcp
  • 或配置npm不使用sudo：npm config set prefix ~/.npm-global

验证安装：

which playwright-mcp  # 查看安装路径

1.3 安装浏览器驱动

Playwright支持多种浏览器，执行安装命令：

npx playwright install

这个命令会自动下载并配置所有支持的浏览器驱动。如果需要指定浏览器：

npx playwright install chromium  # 只安装Chrome
npx playwright install --with-deps  # 安装依赖项

1.4 Cursor配置详解

Cursor通过MCP（Model Context Protocol）协议扩展功能。配置过程：

  1. 打开Cursor设置：Cmd/Ctrl + , 或通过菜单进入设置
  2. 找到MCP设置：通常在"Tools & MCP"或"Advanced"选项中
  3. 添加MCP服务器：点击"Add MCP Server"
  4. 编辑配置文件：
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "NODE_OPTIONS": "--no-warnings"
      }
    }
  }
}

配置说明：

  • command: 执行命令，使用npx确保最新版本
  • args: 传递给命令的参数
  • env: 可选环境变量，可避免警告信息

1.5 验证配置

完成配置后，必须重启Cursor使配置生效。重启后，检查MCP设置页面：

  1. Playwright服务器旁应显示绿色指示灯
  2. 状态显示"Connected"或"运行中"
  3. 如果没有绿灯，检查：
    • Node.js和npm是否正确安装
    • 终端中是否能执行npx @playwright/mcp@latest
    • 防火墙是否阻止了连接

第二部分：快速上手示例

2.1 第一个自动化测试

在Cursor中，你可以用自然语言描述测试需求（测试用例）：

"使用Playwright MCP打开GitHub并搜索Playwright"

第三部分：常见问题解决

3.1 安装问题排查

问题1：npm命令不存在

# 检查Node.js安装
node -v
# 如果不存在，重新安装Node.js

# 检查npm配置
npm config list
# 确保prefix路径在系统PATH中

问题2：权限不足

# 修复npm权限
npm config set prefix ~/.npm-global
# 然后添加到PATH
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

问题3：Cursor连接失败

  • 检查npx是否正确安装：npx --version
  • 手动测试MCP服务器：npx @playwright/mcp@latest
  • 查看Cursor错误日志

3.2 浏览器问题

我安装失败了，但不影响使用，cursor会打开本地浏览器。 也可参考AI的解决方案（未测试）：

# 清除缓存重新安装
npx playwright install --force
# 或指定镜像源
PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install
avatar
文章
阅读
粉丝