告别 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：
npm init playwright@latest
执行后，脚本会引导你完成以下配置：
- 选择使用 TypeScript 还是 JavaScript。
- 指定测试文件存放目录（默认
tests）。 - 是否添加 GitHub Actions 工作流。
- 是否安装 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 进行自动化。
准备工作
- 确保已安装 ADB 并能够识别设备（
adb devices）。 - 在安卓设备上开启'开发者模式'和'USB 调试'。
- 确保 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
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，它更简洁、更稳定、更贴合现代开发流程，是值得投入学习的下一代自动化测试框架。
