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

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

前言：为什么选择 Playwright？

在 Web 自动化测试领域，Selenium 曾长期占据主流，但面对现代前端框架（React/Vue/Next.js）、复杂 SPA 应用和多端适配需求，其局限性逐渐凸显。Microsoft 推出的 Playwright 框架，凭借跨引擎、跨平台、智能化的特性，成为新一代自动化测试的优选方案。

相比于传统的 Selenium 或 Cypress，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。
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. 元素定位与交互

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，它更简洁、更稳定、更贴合现代开发流程，是值得投入学习的下一代自动化测试框架。