chill_notes/AI工程/概念/Playwright.md

Playwright

相关：测试策略金字塔、Browser_Use、MCP

定义

Playwright是最流行的浏览器自动化测试框架，支持Chromium、Firefox、WebKit。

核心思想：提供稳定、快速的浏览器自动化能力，支持多浏览器、多平台。

核心特征

1. 多浏览器支持

• Chromium（Chrome、Edge）
• Firefox
• WebKit（Safari）
• 一套API，多浏览器运行

2. 自动化能力

• 自动等待元素可操作
• 自动重试断言
• 网络拦截
• 截图和视频录制

3. 稳定性

• 使用稳定的选择器
• 自动处理动态内容
• 支持并行测试

基本使用

安装

npm init playwright@latest

基本测试

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByText('Get Started').click();
  await expect(page).toHaveTitle(/Getting started/);
});

登录测试

test('login success', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.getByPlaceholder('Email').fill('test@example.com');
  await page.getByPlaceholder('Password').fill('123456');
  await page.getByRole('button', { name: 'Login' }).click();
  await expect(page).toHaveURL(/dashboard/);
  await expect(page.getByText('Welcome')).toBeVisible();
});

API登录（更稳定）

test('login via API + set session', async ({ page, request }) => {
  const response = await request.post('https://example.com/api/login', {
    data: {
      email: 'test@example.com',
      password: '123456'
    }
  });
  
  expect(response.ok()).toBeTruthy();
  
  const cookies = await response.headers()['set-cookie'];
  
  await page.context().addCookies([{
    name: 'session',
    value: cookies,
    domain: 'example.com',
    path: '/'
  }]);
  
  await page.goto('https://example.com/dashboard');
  await expect(page.getByText('Welcome')).toBeVisible();
});

选择器最佳实践

推荐的选择器（从优到差）

// 1. 使用data-testid（最稳定）
await page.getByTestId('submit-button').click();

// 2. 使用角色和名称（推荐）
await page.getByRole('button', { name: 'Login' }).click();

// 3. 使用标签文本（推荐）
await page.getByLabel('Email').fill('test@example.com');

// 4. 使用占位符（可用）
await page.getByPlaceholder('Enter your email').fill('test@example.com');

// 5. 使用文本（可用）
await page.getByText('Welcome').toBeVisible();

// 6. 使用CSS选择器（不推荐，容易变）
await page.locator('.btn-primary').click();

// 7. 使用XPath（不推荐，容易变）
await page.locator('//button[@type="submit"]').click();

等待策略

自动等待

// Playwright自动等待元素可见、可操作
await page.getByRole('button', { name: 'Login' }).click();

显式等待

// 等待URL变化
await expect(page).toHaveURL(/dashboard/);

// 等待元素可见
await expect(page.getByText('Welcome')).toBeVisible();

// 等待元素隐藏
await expect(page.getByText('Loading')).toBeHidden();

// 等待网络请求完成
await page.waitForLoadState('networkidle');

配置

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
});

适用场景

• E2E测试：最流行的E2E测试框架
• 浏览器自动化：自动化浏览器操作
• 视觉回归测试：截图对比
• 性能测试：页面加载性能

优势

• 多浏览器支持：一套API，多浏览器运行
• 稳定性：自动等待、自动重试
• 速度快：比Selenium快
• 生态成熟：社区活跃，文档完善

挑战

• 学习成本：需要了解框架API
• 维护成本：需要维护测试脚本
• 运行时间：完整的E2E测试运行时间长

最佳实践

1. 优先使用稳定的选择器：data-testid、角色、标签
2. 使用API登录：提高测试速度
3. 测试数据管理：使用Fixture或API准备数据
4. 并行测试：提高测试效率
5. CI/CD集成：每次提交自动运行测试

相关概念

• 测试策略金字塔：Playwright是E2E测试的工具
• Browser_Use：Playwright和Browser Use的对比
• MCP：Playwright MCP是MCP的一种实现