告别 Selenium：Playwright 现代 Web 自动化测试从入门到实战

告别 Selenium：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：

bash 复制代码

npm init playwright@latest

执行后，脚本会引导你完成以下配置：

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

基础使用

编写第一个测试

Playwright 的 API 非常直观。在 tests/example.spec.ts 中：

typescript 复制代码

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 等面向用户的定位方式，这能使测试更具鲁棒性。

typescript 复制代码

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

2. 等待网络请求

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

typescript 复制代码

// 等待接口返回
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。

typescript 复制代码

// 处理 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 提供了非常精细的键盘模拟能力，不仅可以输入文本，还能模拟单个按键及组合键。

typescript 复制代码

// 聚焦并输入文本
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 生态内置了大量的设备预设，可以轻松模拟特定的手机或平板环境，并支持精细控制地理位置、语言和系统权限。

typescript 复制代码

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 进行自动化。

准备工作

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

示例代码

javascript 复制代码

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：

yaml 复制代码

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 可以：

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

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

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

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

总结

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

作者：Smoothcloud润云