接入 Playwright，实现 E2E 自动化测试

在日常开发中，每次修改代码后，我们都会重复做一些相同的工作：

登录系统
点击菜单
搜索数据
新增、编辑、删除
检查页面是否正常显示

这些操作虽然简单，但非常耗时，而且容易遗漏。如果每次发布都依赖人工回归测试，不仅效率低，还可能因为遗漏某个操作导致线上 Bug。

有没有一种方式，让电脑像真实用户一样自动完成这些操作？

答案就是 E2E（End-to-End，端到端）自动化测试。

# 什么是 E2E 测试？

E2E（End-to-End）测试就是模拟真实用户操作，对整个业务流程进行自动化验证。

例如登录功能：

打开浏览器
    ↓
访问登录页
    ↓
输入用户名
    ↓
输入密码
    ↓
点击登录
    ↓
进入首页

1
2
3
4
5
6
7
8
9
10
11

整个过程由程序自动完成，无需人工参与。

它测试的不仅是某一个函数，而是整个系统是否能够正常运行。

# 为什么选择 Playwright？

目前主流的 E2E 自动化测试工具主要有：

Playwright
Cypress
Selenium

如果是一个新的前端项目，我更推荐使用 Playwright。

原因很简单：

学习成本低
API 简洁
支持主流浏览器
调试体验优秀
社区活跃，更新频繁
对 Vue、React、Angular 等框架都适用

对于现代前端项目来说，它几乎已经成为 E2E 自动化测试的首选方案。

# Playwright 十大特色能力

Playwright 不只是一个自动化测试工具，它还有很多提升开发效率的能力。

# 1. 自动等待（Auto Waiting）

无需手动编写各种等待逻辑，Playwright 会自动等待元素可见、可点击，大幅降低测试失败率。

# 2. Codegen 自动录制

执行：

npx playwright codegen

即可录制浏览器操作，自动生成测试代码，非常适合新手快速上手。

# 3. Trace 调试

测试失败后，可以像看录像一样回放整个测试过程，包括点击、输入、网络请求、DOM 变化等信息，定位问题非常方便。

# 4. 自动截图和录像

测试失败时可以自动保存截图和视频，帮助快速分析问题，无需重新运行测试。

# 5. 多浏览器支持

同一套测试代码即可运行在：

Chromium
Firefox
WebKit（Safari）

真正做到一次编写，多浏览器验证。

# 6. 并行执行

多个测试可以同时运行，大幅缩短执行时间，非常适合 CI/CD。

# 7. 网络请求 Mock

支持拦截接口并返回模拟数据，即使后端接口未完成，也可以提前进行页面测试。

# 8. API Testing

除了操作浏览器，还可以直接发送 HTTP 请求，实现接口测试与页面测试统一管理。

# 9. 登录状态复用

登录一次即可保存登录状态，后续测试无需重复登录，提高执行效率。

# 10. 丰富的测试报告

内置 HTML 测试报告，支持查看执行结果、耗时、截图、录像等信息，方便团队排查问题。

# 安装 Playwright

进入项目根目录，执行：

npm init playwright@latest

安装过程中按照默认配置即可。

安装完成后，项目中会新增：

tests/
playwright.config.ts

1
2

其中：

tests：存放测试用例
playwright.config.ts：测试配置文件

# 编写第一个测试

新建：

tests/login.spec.ts

代码如下：

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

test('登录成功', async ({ page }) => {

  await page.goto('http://localhost:3000/login');

  await page.getByPlaceholder('用户名').fill('admin');

  await page.getByPlaceholder('密码').fill('123456');

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

  await expect(page).toHaveURL(/home/);

});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行测试：

npx playwright test

浏览器会自动打开，完成整个登录流程。

# Codegen：最快的编写方式

推荐大家先学会使用 Codegen。

执行：

npx playwright codegen http://localhost:3000

浏览器中的每一步操作都会自动生成对应代码。

例如：

await page.getByPlaceholder('用户名').fill('admin');

await page.getByPlaceholder('密码').fill('123456');

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

1
2
3
4
5

很多简单的测试，几乎不需要自己手写。

# 常用 API

# 打开页面

await page.goto('/login');

# 输入内容

await page.getByPlaceholder('用户名').fill('admin');

# 点击按钮

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

1
2
3

# 获取文本

const text = await page.locator('.title').textContent();

# 判断元素存在

await expect(
  page.getByText('登录成功')
).toBeVisible();

1
2
3

# 判断页面跳转

await expect(page).toHaveURL(/home/);

# 查看测试报告

执行：

npx playwright test --reporter=html

然后：

npx playwright show-report

浏览器会自动打开测试报告，可以查看：

测试是否通过
执行耗时
错误信息
截图
Trace
视频

调试效率非常高。

# 推荐的项目结构

随着测试越来越多，建议采用 Page Object Model（POM）模式组织代码。

tests/

pages/
    LoginPage.ts
    UserPage.ts
    OrderPage.ts

specs/
    login.spec.ts
    user.spec.ts
    order.spec.ts

utils/

1
2
3
4
5
6
7
8
9
10
11
12
13

把页面操作封装到 Page 中，可以减少重复代码，提高维护性。

# 企业项目实践建议

E2E 测试并不是覆盖所有页面，而是优先覆盖最核心的业务流程。

例如：

登录
权限验证
查询列表
新增数据
编辑数据
删除数据
文件上传
文件下载
导出报表
支付流程

对于一些静态页面或展示型页面，没有必要投入过多自动化测试成本。

遵循 20% 的核心流程覆盖 80% 的业务风险，往往比追求 100% 覆盖率更有价值。

# 总结

Playwright 已经成为现代前端自动化测试的主流选择。

它不仅提供了简洁的 API，更集成了自动等待、Codegen、Trace、Mock、多浏览器支持等一系列实用能力，让编写、调试和维护自动化测试变得更加轻松。

如果你的项目还停留在人工回归测试阶段，不妨从最核心的业务流程开始，例如登录、查询、新增等功能，逐步建立自己的自动化测试体系。随着测试用例不断积累，每次发布都可以自动验证关键流程，不仅能减少重复劳动，也能显著提升项目质量和团队开发效率。

编辑

上次更新: 2026/07/08, 6:07:00

← 微信小程序开发