Playwright 简介 #

什么是 Playwright？ #

Playwright 是由 Microsoft 开发的现代端到端（E2E）测试框架，专为现代 Web 应用设计。它支持所有主流浏览器引擎（Chromium、Firefox、WebKit），提供可靠、快速且强大的自动化测试能力。Playwright 可以跨平台、跨语言使用，支持 JavaScript/TypeScript、Python、Java 和 .NET。

核心定位 #

text

┌─────────────────────────────────────────────────────────────┐
│                        Playwright                            │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  跨浏览器    │  │  自动等待    │  │  原生事件    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  网络拦截    │  │  追踪查看    │  │  并行执行    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

Playwright 的历史 #

发展历程 #

text

2020年 ─── Playwright 项目启动
    │
    │      Microsoft 团队开发
    │      核心成员来自 Puppeteer
    │
2020年中 ─── 首个公开版本
    │
    │      支持 Chromium、Firefox、WebKit
    │      跨浏览器测试能力
    │
2021年 ─── 快速迭代
    │
    │      测试运行器
    │      追踪查看器
    │      代码生成工具
    │
2022年 ─── 生态成熟
    │
    │      组件测试
    │      视觉回归测试
    │      VS Code 插件
    │
2023年 ─── 企业级采用
    │
    │      大规模部署支持
    │      云服务集成
    │      性能优化
    │
至今   ─── 行业标准
    │
    │      超过 100 万周下载量
    │      主流企业采用
    │      活跃社区支持

里程碑版本 #

版本	时间	重要特性
1.0	2020	首个稳定版本，跨浏览器支持
1.10	2021	测试运行器、追踪查看器
1.20	2021	组件测试、网络 Mock
1.25	2022	VS Code 插件、UI 模式
1.30	2022	视觉回归测试增强
1.40	2023	性能优化、新断言
1.50	2024	AI 辅助测试、增强调试

为什么选择 Playwright？ #

传统 E2E 测试的痛点 #

在使用传统测试工具时，开发者面临以下问题：

javascript

// Selenium 需要显式等待
driver.get("https://example.com");
await driver.wait(
  until.elementLocated(By.id("button")),
  10000
);
const button = driver.findElement(By.id("button"));
await button.click();

// 容易出现竞态条件
// 元素可能存在但不可见/不可点击
// 需要手动处理各种等待

Playwright 的解决方案 #

javascript

// 自动等待，无需显式等待
await page.goto("https://example.com");

// 自动等待元素可见、可点击
await page.click("#button");

// 智能重试，自动处理动态内容
await expect(page.locator(".result")).toHaveText("Success");

Playwright 的核心特点 #

1. 跨浏览器支持 #

一套代码，多浏览器运行：

javascript

// 支持所有主流浏览器
const browsers = ['chromium', 'firefox', 'webkit'];

for (const browserType of browsers) {
  const browser = await playwright[browserType].launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  // 相同的测试代码
}

2. 自动等待机制 #

智能等待元素状态：

text

┌─────────────────────────────────────────────────────────────┐
│                    Playwright 自动等待                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  操作前自动检查：                                             │
│  ├── 元素已附加到 DOM                                        │
│  ├── 元素可见                                                │
│  ├── 元素稳定（非动画中）                                     │
│  ├── 元素可接收事件                                          │
│  └── 元素已启用                                              │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3. 原生事件支持 #

支持真实的用户交互：

javascript

// 键盘事件
await page.keyboard.press('Enter');
await page.keyboard.type('Hello World');

// 鼠标事件
await page.mouse.click(100, 200);
await page.mouse.move(0, 0);

// 触摸事件
await page.touchscreen.tap(100, 200);

// 拖拽操作
await page.locator('#source').dragTo(page.locator('#target'));

4. 强大的选择器引擎 #

多种元素定位方式：

javascript

// CSS 选择器
await page.locator('button.submit').click();

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

// 角色选择器（推荐）
await page.getByRole('button', {