[Playwright][01] 从 Puppeteer 到 Playwright：为什么选择 Playwright + TypeScript？

1. 前言

之前做 Web 自动化测试时，我主要使用 JavaScript + Puppeteer，基于已有开源框架进行二次开发，并逐步将手工回归测试转化为自动化测试。

最近重新整理自己的自动化测试项目，发现大量自动化测试招聘需要Playwright技术，所以决定使用 Playwright + TypeScript做一个Demo。

为什么没有继续使用熟悉的 Puppeteer？

主要原因不是 Puppeteer 不好用，而是对于一个新的 E2E 自动化测试项目，我更希望测试框架本身能够提供完整的测试运行、断言、报告和 CI/CD 集成能力。

这篇文章简单对比 Puppeteer 和 Playwright，并通过一个 Demo 介绍 Playwright + TypeScript 的基本使用。

2. Puppeteer 和 Playwright 有什么区别？

Puppeteer 和 Playwright 都可以通过代码控制浏览器，实现页面跳转、元素定位、点击、输入和截图等操作。

区别主要在于工具定位和测试工程化能力。

对比项	Puppeteer	Playwright Test
主要用途	浏览器自动化	Web E2E 自动化测试
JavaScript / TypeScript	支持	支持
浏览器	Chrome、Firefox 等	Chromium、Firefox、WebKit
自动等待	支持部分等待机制	Locator 与自动重试断言集成
测试运行器	通常结合其他工具	内置
断言	通常结合断言库	内置 expect
并行执行	需要结合具体工具实现	内置支持
测试报告	依赖测试工具组合	内置 HTML Report
CI/CD	支持	支持，并提供完整测试工具链

对于单纯的浏览器操作，两者都可以完成。

如果目标是搭建一套可持续维护的 Web E2E 自动化测试框架，Playwright Test 的集成能力会更加方便。Trace 功能巨好用。

3. 为什么选择 Playwright + TypeScript？

3.1 自动等待与断言

UI 自动化测试经常遇到的问题是：页面还没有加载完成，测试脚本就开始操作元素。

我很喜欢用下面这个方法，但固定等待有缺陷：

typescript 复制代码

await page.waitForTimeout(3000);

这种方式既可能等待时间不足，也可能浪费时间执行。

Playwright 提供 Locator 和自动重试断言：

typescript 复制代码

await page.getByRole('button', {
  name: 'Submit'
}).click();

await expect(
  page.getByText('Completed')
).toBeVisible();

点击 Submit 按钮后，检查页面是否出现 Completed，以此判断操作是否成功。如果页面内容没有立即更新，Playwright 会自动等待一段时间，不需要我们手动添加固定等待。

优点

点击前的等待：如果 Submit 按钮还不能点击，Playwright 会自动等待按钮变得可点击，然后执行 click()。
点击后的等待：如果 Completed 还没出现，toBeVisible() 不会立即报错，而是反复检查，直到内容出现或超时。

这两个步骤都自带等待机制。

相比大量使用固定等待，这种方式更适合处理常见的异步页面状态。

3.2 内置测试运行器

Playwright Test 已经集成了测试组织、断言、并行执行、重试和报告功能。

例如：

typescript 复制代码

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

test('check page title', async ({ page }) => {
  await page.goto('https://example.com');

  await expect(page).toHaveTitle('xxxx');
});

一个测试用例不需要额外搭建独立的断言框架，就可以直接运行。

3.3 TypeScript 类型支持

相比 JavaScript，TypeScript 可以通过静态类型检查提前发现部分错误。

例如：

typescript 复制代码

interface TestUser {
  username: string;
  password: string;
}

const user: TestUser = {
  username: 'testuser',
  password: 'test123'
};

当自动化项目中存在大量测试数据、公共方法和配置时，类型定义能够提高代码的可读性和可维护性。

当然，TypeScript 并不能替代测试断言，也不能保证业务逻辑正确。

4. 怎么使用 Playwright？

4.1 创建项目

首先确保本地已经安装 Node.js。

在终端中执行：

bash 复制代码

npm init playwright@latest

按照提示选择：

TypeScript
测试目录，例如 tests
是否添加 GitHub Actions
是否安装浏览器

初始化后，项目通常包含

text 复制代码

playwright-demo/
├── tests/
│   └── example.spec.ts
├── playwright.config.ts
├── package.json
└── package-lock.json

4.2 常用命令

执行所有测试：

bash 复制代码

npx playwright test

使用浏览器界面观察测试执行：

bash 复制代码

npx playwright test --headed

打开 Playwright UI Mode：

bash 复制代码

npx playwright test --ui

调试测试：

这个好用，可以时时查看UI执行步骤

bash 复制代码

npx playwright test --debug

查看 HTML 测试报告：

bash 复制代码

npx playwright show-report

5. Demo：编写第一个 Playwright 测试

创建文件：

tests/demo/bing.spec.ts

typescript 复制代码

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

test('Bing Playwright', async ({ page }) => {
  await page.goto('https://www.bing.com/');

  const search = page.locator('#sb_form_q');
  // 输入关键词
  await search.fill('Playwright');
  // 点击搜索
  await page.locator('#search_icon').click();

  // 验证搜索页面 URL
  
  await expect(page).toHaveURL(/bing\.com\/search\?.*q=Playwright/i);
});

执行：

bash 复制代码

npx playwright test tests/demo/bing.spec.ts

如果测试通过，终端会显示 Passed 状态。

Playwright 测试执行成功

HTML 测试报告

6. 总结

Puppeteer 和 Playwright 都是优秀的浏览器自动化工具。

如果主要是浏览器操作、页面截图或者已有 Puppeteer 项目维护，继续使用 Puppeteer 完全没有问题。

但如果准备新建一套 Web E2E 自动化测试框架，我会优先考虑 Playwright + TypeScript。

原因主要有三个：

Playwright Test 集成了测试运行器、断言和报告。
Locator 和自动重试断言可以减少部分不稳定测试。
TypeScript 有助于维护测试数据和公共方法。

下一篇准备介绍：

$Playwright$ $02$ 常用命令与调试：Debug UI、Mode和 Trace Viewer

参考文档：

Playwright：https://playwright.dev/
Puppeteer：https://pptr.dev/
TypeScript：https://www.typescriptlang.org/