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

Playwright 现代 Web 自动化测试实战指南

为什么选择 Playwright？

在 Web 自动化测试领域，Selenium 曾长期占据主流。但随着 React、Vue 等现代前端框架的普及以及复杂 SPA 应用的出现，其局限性逐渐显现。Microsoft 推出的 Playwright 凭借跨引擎、跨平台及智能化特性，已成为新一代自动化测试的首选方案。

相比传统工具，Playwright 的优势在于：

• 极致性能：基于浏览器上下文（Browser Context）隔离环境，启动速度比 Selenium 快 30% 以上，无冗余进程开销。
• 智能等待：内置自适应等待机制，自动等待元素可交互，彻底告别 sleep() 硬编码。
• 全场景覆盖：支持 Chromium、Firefox、WebKit 三大引擎，兼容 Windows、Linux、macOS 全平台，提供 JavaScript、TypeScript、Python、Java、.NET 多语言绑定。
• 强大工具链：Codegen（代码自动生成）、Trace Viewer（测试追踪分析）、UI Mode（交互式调试）一站式提效。
• 多端适配：原生支持移动端浏览器模拟，实验性支持安卓真机测试，覆盖 PC + 移动全场景。

安装与环境初始化

在已有 Node.js 环境的项目中，执行以下命令一键初始化 Playwright：

npm init playwright@latest

脚本会引导完成配置，建议关注以下几点：

1. 选择 TypeScript 或 JavaScript（推荐 TypeScript）。
2. 指定测试文件存放目录（默认 tests）。
3. 是否添加 GitHub Actions 工作流。
4. 是否安装 Playwright 浏览器（建议选择是，否则后续需手动运行 npx playwright install）。

基础使用

编写第一个测试

Playwright 的 API 设计非常直观。在 tests/example.spec.ts 中创建测试用例：

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // 期待标题包含 "Playwright"
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // 点击 "Get started" 链接
  await page.getByRole('link', { name: 'Get started' }).click();
  // 期待 URL 包含 intro
  await expect(page).toHaveURL(/.*intro/);
});

常见测试场景

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，它更简洁、更稳定、更贴合现代开发流程，值得投入学习。