告别 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 执行后，脚本会引导你完成以下配置：
- 选择使用 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"awaitexpect(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 包含 introawaitexpect(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]=awaitPromise.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()}`);// 启动 Chromeawait 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:60runs-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:30MCP 使用
在现代开发流程中，我们可以利用 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，它更简洁、更稳定、更贴合现代开发流程，是值得投入学习的下一代自动化测试框架。
