Claude Code Playwright MCP 入门指南：从零搭建自动化测试框架

共计 2130 个字符，预计需要花费 6 分钟才能阅读完成。

为什么选择 Playwright 做自动化测试

在开始搭建测试框架前，我们先聊聊为什么 Playwright 值得关注。相比传统的 Selenium 或 Puppeteer，Playwright 有几个明显的优势：

• 跨浏览器支持：Chromium、Firefox 和 WebKit 三大引擎全覆盖
• 自动等待机制：内置智能等待，减少手动添加 sleep 的烦恼
• 多语言支持：TypeScript/JavaScript、Python、Java、.NET 都可用
• 移动端模拟：支持设备仿真测试
• 录制功能：通过 codegen 快速生成测试脚本

环境准备

1. 安装 Node.js（建议版本 16+）

   # 验证安装
   node -v
   npm -v

2. 创建项目目录并初始化

   mkdir playwright-demo && cd playwright-demo
   npm init -y
   npm install -D @playwright/test
   npx playwright install

3. 验证安装

   npx playwright test --headed

理解 MCP 架构

MCP（Model-Controller-Page）是 Playwright 推荐的测试组织模式：

• Model：数据层，管理测试数据和配置
• Controller：业务逻辑层，封装常用操作
• Page：页面对象层，定义页面元素和基础交互

第一个测试用例

创建 tests/example.spec.ts 文件：

import {test, expect} from '@playwright/test';

test('百度搜索测试', async ({ page}) => {
  // 1. 导航到百度
  await page.goto('https://www.baidu.com');

  // 2. 输入搜索词
  await page.fill('#kw', 'Playwright');

  // 3. 点击搜索按钮
  await page.click('#su');

  // 4. 验证结果
  await expect(page).toHaveTitle(/Playwright/);
  await expect(page.locator('text= 微软开源的自动化测试工具')).toBeVisible();});

运行测试：

npx playwright test

处理常见页面元素

下拉选择

await page.selectOption('#city-select', 'beijing');

文件上传

await page.setInputFiles('input[type="file"]', 'test.pdf');

弹窗处理

page.on('dialog', dialog => dialog.accept());

跨浏览器配置

修改playwright.config.ts：

import {defineConfig, devices} from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: {...devices['Desktop Firefox'] },
    },
  ],
});

高级技巧

测试数据管理

创建test-data/login.json：

{
  "validUser": {
    "username": "testuser",
    "password": "P@ssw0rd"
  }
}

测试中使用：

const testData = JSON.parse(fs.readFileSync('test-data/login.json'));
await page.fill('#username', testData.validUser.username);

并行测试

配置文件中添加：

workers: 4, // 并行数

生成 HTML 报告

npx playwright show-report

常见问题解决方案

1. 元素定位失败
2. 使用 page.pause() 调试

3. 尝试更稳定的定位策略如 text= 或data-testid

4. 测试不稳定

5. 增加await page.waitForLoadState('networkidle')

6. 使用 retries: 2 配置重试机制

7. CI 环境问题

8. 添加 --headed 参数排查
9. 确保 CI 安装了所有依赖npx playwright install-deps

性能优化建议

• 复用浏览器上下文：

  test.describe.configure({mode: 'serial'});

• 禁用非必要资源：

  await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

后续学习路径

1. 官方文档：https://playwright.dev/docs/intro
2. 示例仓库：https://github.com/microsoft/playwright
3. 社区插件：
4. playwright-testing-library
5. playwright-fluent
6. 进阶主题：
7. 自定义报告
8. 可视化测试
9. 移动端测试

通过这个框架，我们团队将回归测试时间从 4 小时缩短到 25 分钟。建议从小的 case 开始，逐步构建你的测试套件。遇到问题时，Playwright 活跃的 Discord 社区是很好的求助渠道。