Playwright ​

playwright 是微软公司开源的一个专注于end-to-end测试的测试框架，它具有跨浏览器、跨平台、跨语言的特性。

它的API设计和puppeteer很像，puppeteer用户很容易上手playwright。

puppeteer是一个操作Chromium无头浏览器的Node.js库，可以用来实现浏览器自动化操作。
playwright用类似方式实现了chromium、firefox、webkit浏览器的e2e测试框架。

据说playwright的成员包括puppeteer的核心开发

安装 ​

playwright 支持4种语言：Node.js、Python、Java、.NET，本文基于Node.js语言展开。

npm init playwright@latest

playwright在Node.js中是一个npm包，安装过程中询问是否安装playwright指定的浏览器。

允许则会安装全部3个，默认设置也会在3个浏览器里执行测试用例。不过这3个都是现代浏览器，兼容性问题很少，可以手动修改配置文件playwright.config.ts来减少浏览器测试。

测试 ​

init过程会在当前目录创建tests/目录，并准备好example.spec.ts文件存放可执行的测试用例，下面是一个我修改过后的例子，非原代码模板产物。

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

test.describe('XX页面', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('https://your.website')
    })
    test('title', async ({ page }) => {
        await expect(page).toHaveTitle(/页面标题/)
    })
})

这个例子访问指定页面，然后执行测试用例title，检查网页标题内容是否是页面标题。

这个例子性能上不佳，beforeEach会在每个test()执行前执行一遍。

测试需要登录的页面 ​

如果打开的是一个需要登录的页面，如何在测试框架中实现登录态？有两种思路：

• 抄一份登录态数据，让测试框架直接使用。问题是登录信息过期后需要更新登录数据
• 在测试框架中进行登录过程。问题是频繁执行登录过程，容易触发风控，也增加了运行测试耗时

playwright结合了两种思路，提供了登录+保存登录信息以复用的解决方案。

代码生成器 ​

如何开发“在测试框架中进行登录过程”？可以使用playwright的codegen，代码生成器。

它会打开一个浏览器和一个代码生成器界面，用户在浏览器中的每次交互，都会在代码生成器中记录为操作浏览器的代码。借此可以轻松完成“在测试框架中进行登录过程”的相关代码开发。

这是官方文档中的一个例子：Login

Trace viewer ​

在本地开发中，默认不会重试（retries）执行失败的用例，也就没有收集trace。

可以修改配置文件retries次数大于0，来启用功能。
也可以通过运行命令附加参数来强制开启trace

npx playwright test --trace on

开启后，可在测试用例执行完成的HTML报告页面，查看失败用例记录的trace。

Trace viewer是查看trace的网页GUI工具，可供查看的内容包括：

• 页面截屏时间轴
• 浏览器开发者工具console、network等
• 测试用例执行栈及相关信息
• 执行栈中每个动作执行前中后的快照

小结 ​

Playwright是一个功能丰富，值得信赖的E2E测试框架，推荐作为首选方案。