Playwright 现代 Web 自动化测试入门与实战

常见测试场景

1. 元素定位与交互

推荐使用 page.getByRole 或 page.getByText 等面向用户的定位方式，这能显著提升测试的鲁棒性，减少因 DOM 结构微调导致的失败。

// 填写表单
await page.getByLabel('用户名').fill('admin');
await page.getByLabel('密码').fill('123456');

// 点击按钮
await page.getByRole('button', { name: '登录' }).click();

2. 等待网络请求

在现代单页应用（SPA）中，等待特定接口返回是常见需求。Playwright 允许并行等待请求与用户操作。

// 等待接口返回
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. 键盘输入与快捷键

提供精细的键盘模拟能力，支持文本输入、单键及组合键。

// 聚焦并输入文本
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. 移动端与权限模拟

内置大量设备预设，可模拟特定手机或平板环境，并精细控制地理位置、语言和系统权限。

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/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

AI 协同提效

在现代开发流程中，利用 Model Context Protocol (MCP) 可将 Playwright 的自动化能力暴露给 AI Agent，实现更高效的测试维护。

通过配置 MCP 服务，AI 能够：

1. 自动化交互：根据自然语言描述，在浏览器中执行点击、输入、导航等操作。
2. 错误诊断：当测试失败时，读取追踪文件（Trace）并结合源码给出修复建议。
3. 动态生成：辅助生成复杂的 Playwright 测试脚本。

在支持 MCP 的环境（如 VS Code）中，配置相应的 MCP 服务器并授权浏览器控制权限后，即可直接在对话窗口中下达指令，例如'帮我打开 xxx 网站并截个图'，或'在这个页面执行一个登录流程'。

总结

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