Playwright 现代 Web 自动化测试简明教程

常见测试场景

1. 元素定位与交互

Playwright 推荐使用 page.getByRole 或 page.getByText 等面向用户的定位方式，这能使测试更具鲁棒性。

// 填写表单
await page.getByLabel('用户名').fill('admin');
await page.getByLabel('密码').fill('123456');
// 点击按钮
await page.getByRole('button', { name: '登录' }).click();

2. 等待网络请求

在现代单页应用（SPA）中，等待特定的接口返回是非常常见的需求。

// 等待接口返回
const [response] = await Promise.all([
  page.waitForResponse(resp => resp.url().includes('/api/login') && resp.status() === 200),
  page.getByRole('button', { name: '登录' }).click(),
]);

3. 处理弹窗与 Iframe

Playwright 能够轻松处理 JavaScript 警告框（Dialog）和嵌套的 Iframe。

// 处理 Dialog
page.on('dialog', dialog => dialog.accept());
await page.getByRole('button', { name: '删除' }).click();
// 进入 Iframe 交互
const frame = page.frameLocator('#my-iframe');
await frame.getByText('确认提交').click();

4. 键盘输入与快捷键

Playwright 提供了非常精细的键盘模拟能力，不仅可以输入文本，还能模拟单个按键及组合键。

// 聚焦并输入文本
await page.getByLabel('搜索').focus();
await page.keyboard.type('Playwright', { delay: 100 });
// 模拟真实打字速度
// 按下回车键
await page.keyboard.press('Enter');
// 组合键：全选并删除 (Windows/Linux 用 Control, macOS 用 Meta)
await page.keyboard.press('Control+A');
await page.keyboard.press('Backspace');

5. 移动端与权限模拟

Playwright 生态内置了大量的设备预设，可以轻松模拟特定的手机或平板环境，并支持精细控制地理位置、语言和系统权限。

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

test('iPhone 14 移动端模拟测试', async ({ browser }) => {
  // 使用内置设备预设
  const context = await browser.newContext({
    ...devices['iPhone 14'],
    locale: 'zh-CN',
    timezoneId: 'Asia/Shanghai',
    geolocation: { longitude: 116.39, latitude: 39.9 },
    permissions: ['geolocation'] // 授予地理位置权限
  });
  const page = await context.newPage();
  await page.goto('https://maps.google.com');
  // 验证页面是否根据模拟坐标显示
  await context.close();
});

常用命令

• 运行所有测试：npx playwright test
• 运行指定浏览器：npx playwright test --project=chromium
• 有界面模式（Headed）：npx playwright test --headed
• UI 模式（推荐交互式调试）：npx playwright test --ui
• 查看测试报告：npx playwright show-report

安卓平台测试 (实验性)

Playwright 提供了一项非常有趣的功能：直接对安卓设备上的 Chrome 或 WebView 进行自动化。

准备工作

1. 确保已安装 ADB 并能够识别设备（adb devices）。
2. 在安卓设备上开启'开发者模式'和'USB 调试'。
3. 确保 Chrome (87+) 或对应的 WebView 已安装。

示例代码

const { _android: android } = require('playwright');

(async () => {
  // 连接到安卓设备
  const [device] = await android.devices();
  console.log(`Model: ${device.model()}`);
  // 启动 Chrome
  await device.shell('am force-stop com.android.chrome');
  const context = await device.launchBrowser();
  const page = await context.newPage();
  await page.goto('https://github.com/microsoft/playwright');
  console.log(await page.title());
  await device.screenshot({ path: 'android-screenshot.png' });
  await context.close();
  await device.close();
})();

注：此功能目前仍处于实验阶段。

CI 集成

Playwright 与 GitHub Actions 集成非常简单。如果你在安装时选择了添加 GitHub Actions 工作流，它会为你生成 .github/workflows/playwright.yml：

name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

MCP 使用

在现代开发流程中，我们可以利用 Model Context Protocol (MCP) 将 Playwright 的自动化能力暴露给 AI Agent。

通过配置 Playwright MCP 服务，AI 可以：

1. 自动化交互：根据自然语言描述，AI 可以在浏览器中点击、输入、导航。
2. 错误诊断：当测试失败时，AI 可以读取追踪文件（Trace）并结合源码给出修复方案。
3. 动态录制：让 AI 生成复杂的 Playwright 测试脚本。

要在 GitHub Copilot 或其他支持 MCP 的环境中使用，你可以：

1. 安装插件：在 VS Code 的扩展市场中搜索 @mcp playwright 并下载安装相应的 MCP 服务器插件。
2. 配置连接：在 GitHub Copilot 的设置中添加该 MCP 服务，授予其浏览器的控制权限。

一旦配置完成，你就可以直接在 Chat 窗口中命令 AI：'帮我打开 xxx 网站并截个图'，或者'在这个页面执行一个登录流程'。

总结

Playwright 凭借高性能、智能化、全场景覆盖的特性，完美适配现代 Web 应用的自动化测试需求。从基础的页面交互到复杂的移动端 / 真机测试，从本地调试到 CI 集成，再到 AI 协同提效，Playwright 构建了完整的自动化测试生态。相比 Selenium，它更简洁、更稳定、更贴合现代开发流程，是值得投入学习的下一代自动化测试框架。