# Playwright

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

## 定义

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

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

## 核心特征

### 1. 多浏览器支持
- Chromium（Chrome、Edge）
- Firefox
- WebKit（Safari）
- 一套API，多浏览器运行

### 2. 自动化能力
- 自动等待元素可操作
- 自动重试断言
- 网络拦截
- 截图和视频录制

### 3. 稳定性
- 使用稳定的选择器
- 自动处理动态内容
- 支持并行测试

## 基本使用

### 安装
```bash
npm init playwright@latest
```

### 基本测试
```typescript
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/);
});
```

### 登录测试
```typescript
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登录（更稳定）
```typescript
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();
});
```

## 选择器最佳实践

### 推荐的选择器（从优到差）
```typescript
// 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();
```

## 等待策略

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

### 显式等待
```typescript
// 等待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
```typescript
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的一种实现