Playwright 自动化测试：现代 Web 应用的质量守护者

## 什么是 Playwright

Playwright 是由微软开发的一款开源自动化测试框架，专为现代 Web 应用而设计。它支持 Chromium、Firefox 和 WebKit 三大浏览器引擎，能够在 Windows、macOS 和 Linux 上运行，是当前最强大的端到端（E2E）测试工具之一。

## 为什么选择 Playwright

### 1. 多浏览器支持

与 Cypress 只支持 Chromium 系浏览器不同，Playwright 原生支持三大浏览器引擎：

- **Chromium**：Chrome、Edge 等
- **Firefox**：Mozilla Firefox
- **WebKit**：Safari

这意味着你只需编写一套测试代码，即可在所有主流浏览器中运行验证。

### 2. 自动等待机制

Playwright 内置了智能等待机制，在执行操作前会自动等待元素满足条件（可见、可点击、稳定等），大幅减少了 `sleep` 和手动等待的需要：

```javascript
// Playwright 会自动等待按钮可点击
await page.click('button#submit');

// 自动等待元素出现
await page.waitForSelector('.result-list');
```

### 3. 强大的选择器

Playwright 提供了多种选择器语法：

```javascript
// CSS 选择器
await page.click('.btn-primary');

// 文本选择器
await page.click('text=登录');

// 组合选择器
await page.click('.modal >> text=确认');
```

### 4. 网络拦截与 Mock

可以轻松拦截和模拟网络请求：

```javascript
await page.route('**/api/users', route => {
    route.fulfill({
        status: 200,
        body: JSON.stringify([{ name: 'test' }])
    });
});
```

## 快速上手

### 安装

```bash
npm init playwright@latest
```

### 编写第一个测试

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

test('首页标题验证', async ({ page }) => {
    await page.goto('https://example.com');
    await expect(page).toHaveTitle(/Example/);
});

test('登录流程', async ({ page }) => {
    await page.goto('https://example.com/login');
    await page.fill('#username', 'admin');
    await page.fill('#password', 'password');
    await page.click('button[type="submit"]');
    await expect(page.locator('.welcome')).toBeVisible();
});
```

### 运行测试

```bash
# 运行所有测试
npx playwright test

# 有头模式运行（显示浏览器）
npx playwright test --headed

# 指定浏览器
npx playwright test --project=chromium
```

## 高级特性

### 截图与录制

```javascript
// 截图
await page.screenshot({ path: 'screenshot.png', fullPage: true });

// 录制视频（在配置中开启）
// playwright.config.js
module.exports = {
    use: {
        video: 'on-first-retry'
    }
};
```

### Trace Viewer

Playwright 提供了强大的 Trace Viewer 工具，可以回放测试执行过程，包括 DOM 快照、网络请求和控制台日志：

```bash
npx playwright test --trace on
npx playwright show-trace trace.zip
```

## Playwright vs 其他工具

| 特性 | Playwright | Cypress | Selenium |
|------|-----------|---------|----------|
| 多浏览器 | 原生支持 | 有限 | 支持 |
| 速度 | 快 | 快 | 较慢 |
| 自动等待 | 支持 | 支持 | 不支持 |
| 多标签页 | 支持 | 不支持 | 支持 |
| iframe | 支持 | 有限 | 支持 |
| 文件下载 | 支持 | 有限 | 有限 |
| 移动端模拟 | 支持 | 支持 | 有限 |

## 总结

Playwright 凭借其多浏览器支持、智能等待、强大的 API 和优秀的调试工具，已经成为现代 Web 自动化测试的首选框架。无论是小型项目还是大型企业应用，Playwright 都能显著提升测试效率和代码质量。

> 本文由 Playwright 自动化脚本撰写并发布，正是 Playwright 能力的最佳证明。

评论