Playwright：现代 Web 自动化测试的终极方案

185次阅读

共计 3419 个字符，预计需要花费 9 分钟才能阅读完成。

在现代 Web 开发中，自动化测试是保障应用质量的关键环节。Playwright 作为一款由 Microsoft 开发的现代 Web 自动化测试框架，以其 跨浏览器支持、强大的 API、并行测试能力和出色的调试工具，成为开发者和测试人员的首选。本文将全面解析 Playwright 的应用场景、安装与使用，并通过实例展示如何高效地进行 Web 自动化测试。

一、Playwright 简介

Playwright 是一个用于 Web 自动化测试的工具，支持 Chromium（包括 Chrome 和 Edge）、Firefox 和 WebKit（包括 Safari），并提供 Node.js、Python、Java 和 C# 语言绑定。其核心特性包括：

跨浏览器支持：可在不同浏览器上运行测试，确保应用的兼容性。
无头模式和 GUI 模式：支持无界面运行提高效率，也支持 GUI 模式便于调试。
强大的 API：提供丰富的操作方法，如模拟用户交互、网络拦截、地理位置模拟等。
并行测试：内置测试框架 Playwright Test，可高效执行并行测试，加快测试速度。
自动等待机制：Playwright 具有智能等待功能，可以自动等待元素出现后再执行操作，减少显式等待代码。

二、Playwright 的安装与环境配置

1. 安装 Playwright

Playwright 依赖 Node.js 环境，可以通过 npm 进行安装：

npm init -y  # 初始化项目（可选）npm install -D playwright

此外，可以选择安装指定浏览器支持的版本，例如：

npm install -D playwright-chromium
npm install -D playwright-firefox
npm install -D playwright-webkit

安装完成后，Playwright 还提供一个安装所有浏览器依赖的命令：

npx playwright install

2. 运行 Playwright 测试

Playwright 提供了一个命令行工具，可以快速运行测试：

npx playwright test

可以添加 --headed 选项以 GUI 模式运行，或者 --trace on 进行调试：

npx playwright test --headed
npx playwright test --trace on

三、编写第一个 Playwright 脚本

以下是一个简单的 Playwright 脚本，打开 Google 并搜索 “Playwright” 关键字：

const {chromium} = require('playwright');

(async () => {const browser = await chromium.launch({ headless: false}); // 以非无头模式运行
  const page = await browser.newPage();
  
  await page.goto('https://www.google.com');
  await page.fill('input[name="q"]', 'Playwright');
  await page.keyboard.press('Enter');

  await page.waitForTimeout(3000); // 等待 3 秒查看结果

  await browser.close();})();

代码解析

chromium.launch({headless: false})：启动浏览器，并在 GUI 模式下运行。
page.goto(url)：访问指定 URL。
page.fill(selector, value)：填充输入框。
page.keyboard.press('Enter')：模拟按下回车键执行搜索。
await page.waitForTimeout(3000)：等待 3 秒查看搜索结果。
browser.close()：关闭浏览器。

四、使用 Playwright 进行端到端（E2E）测试

Playwright 提供了专门的测试框架 Playwright Test，用于执行端到端（E2E）测试。以下是一个示例：

1. 配置 Playwright Test

安装 Playwright Test：

npm install -D @playwright/test

创建一个测试文件 example.spec.js：

const {test, expect} = require('@playwright/test');

test('Google 搜索 Playwright', async ({ page}) => {await page.goto('https://www.google.com');

  // 输入搜索关键词
  await page.fill('input[name="q"]', 'Playwright');
  await page.keyboard.press('Enter');

  // 断言搜索结果是否包含 Playwright
  await expect(page).toHaveTitle(/Playwright/);
});

运行测试：

npx playwright test

2. 使用测试报告

Playwright 内置测试报告功能，可在运行测试时生成 HTML 报告：

npx playwright test --reporter=html

运行后，打开 playwright-report/index.html 以查看详细报告。

五、Playwright 的高级功能

1. 截图和录屏

Playwright 支持截图和录制视频，方便调试和测试分析：

await page.screenshot({path: 'screenshot.png'});
await page.video().saveAs('video.mp4');

2. 拦截网络请求

可以模拟网络请求，测试前端如何应对不同的 API 响应：

await page.route('**/api/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({message: 'Hello Playwright!'})
  });
});

3. 模拟设备

Playwright 可以模拟移动端设备，例如 iPhone：

const {devices} = require('playwright');
const iPhone = devices['iPhone 13'];

const browser = await chromium.launch();
const context = await browser.newContext({...iPhone});
const page = await context.newPage();
await page.goto('https://www.example.com');

4. 处理多标签页

Playwright 允许管理多个页面或窗口：

const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.click('a[target="_blank"]') // 点击打开新页面的链接
]);
await newPage.waitForLoadState();
console.log(await newPage.title());

六、与 CI/CD 集成

Playwright 可以集成到 CI/CD 流水线中，如 GitHub Actions：

name: Playwright Tests

on:
  push:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: 安装 Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: 安装依赖
        run: npm install
      - name: 运行 Playwright 测试
        run: npx playwright test