了解并练习一门自动化测试框架新星——Playwright

一、什么是 Playwright？

Playwright 是由微软开发的一款 现代端到端自动化测试框架，用于 Web 应用的自动化测试。它支持多种浏览器（Chromium、Firefox、WebKit）、多语言（JavaScript、TypeScript、Python、C#、Java），并提供丰富的 API 来模拟用户行为、执行断言、并发测试等功能。

Playwright 是自动化测试领域的新星，与 Selenium 和 Cypress 相比，它具有更高的速度、更强的稳定性，以及更现代化的设计。

二、Playwright 的核心优势

三、Playwright 安装与环境搭建

以 Node.js 项目为例：

1️⃣ 安装依赖

npm init -y
npm install -D @playwright/test
npx playwright install

2️⃣ 创建首个测试文件

// tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('首页标题应包含 LINE MAN', async ({ page }) => {
  await page.goto('https://www.lineman.com');
  await expect(page).toHaveTitle(/LINE MAN/);
});

3️⃣ 运行测试

npx playwright test

四、Playwright 的目录结构（推荐）

📁 tests/
│   ├── login.spec.ts         # 登录功能测试
│   ├── order.spec.ts         # 下单流程测试
│   └── ...
📁 tests/helpers/
│   └── utils.ts              # 工具函数
📁 tests/pages/
│   └── login.page.ts         # Page Object 模型
📄 playwright.config.ts       # 全局配置

五、Playwright 配置文件示例

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  retries: 1,
  use: {
    headless: true,
    baseURL: 'https://your-app.com',
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'Chromium', use: { browserName: 'chromium' } },
    { name: 'Firefox', use: { browserName: 'firefox' } },
    { name: 'WebKit', use: { browserName: 'webkit' } },
  ],
});

六、编写测试的核心 API 示例

✅ 元素定位与交互

await page.fill('#username', 'test_user');
await page.click('button.login');
await expect(page.locator('h1')).toHaveText('欢迎回来');

✅ 表单提交 + 跳转

await page.goto('/login');
await page.fill('[name="email"]', 'test@test.com');
await page.fill('[name="password"]', '123456');
await page.click('button[type="submit"]');
await expect(page).toHaveURL('/dashboard');

✅ 模拟网络失败、权限请求

await page.route('**/api/**', route => route.abort());
await context.grantPermissions(['geolocation']);

七、Playwright 调试技巧

▶️ Inspector 模式

npx playwright test --debug

🧭 Trace Viewer（测试回放）

npx playwright show-trace trace.zip

八、Playwright 集成 CI/CD

以 GitHub Actions 为例：

name: Playwright Tests

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install
      - run: npx playwright install --with-deps
      - run: npx playwright test