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

npm init playwright@latest

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

基础使用

编写第一个测试

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

准备工作

示例代码

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

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

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

总结

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

作者：Smoothcloud润云