每个项目都能用上吧:使用Playwright进行图片比较测试
Playwright 做为新一代的浏览器 ui 自动化测试工具，有很多有意思的功能，其中截图对比就是其中一个。
本质上讲 playwright 的图片对比测试其实就是基准测试，其流程大致如下：
- 先运行一遍测试用例，把代码里定义的需要截图的地方都截图，这些截图就是以后测试的基准了，后面所有的比较都是针对于这次截图进行的
- 第一遍运行测试用例时候用例会报错，因为之前没有任何截图，不过没关系，再运行一次就可以了
- 任何时候都可以再次运行用例，此时会拿本次运行时的截图跟第一次保存的截图做像素级的比较，一旦像素有差异用例就会失败，否则用例通过
下面简单介绍一下如何从零开始使用 playwright 进行截图对比测试。
安装 playwright
安装 playwright 之前，大家需要安装 nodejs，这一步可以自行搜索。
这里推荐大家使用Typescript进行代码的编写。主要是因为在入门阶段我们基本上不会接触到复杂的 typescript 语法结构，难度其实跟写 javascript 差不多，心智上的压力其实不算大。最重要的一点是，使用 typescript+vscode+playwright 这套微软组合（三者都是微软出品的），可以在编辑器里非常容易的得到稳定的代码提示，毕竟 ts 可以算得上是静态语言，对于初学者来说代码提示有时候是非常重要的。
因为国内的网络问题，整个安装过程需要用到淘宝 npm 源。
打开命令行，敲入下面的命令。不知道怎么使用命令行的同学可以自行搜索弄清楚命令行是怎么回事。
npm install -D @playwright/test --registry=https://registry.npmmirror.com
npm install -D typescript --registry=https://registry.npmmirror.com
npx playwright install
mkdir -p tests
touch tests/itest.info.spec.ts
第 1 行是安装 playwright 及测试套件；第 2 行是安装 typescript，第 3 行是安装 playwright 需要调用的浏览器。最后两行则创建了 tests 文件夹并创建了名为itest.info.spec.ts的文件。
第一个用例
在itest.info.spec.ts中输入下面的内容。
import { test, expect } from "@playwright/test";
test("Itest.info homepage", async ({ page }) => {
await page.goto("http://www.itest.info");
await expect(page).toHaveScreenshot();
});
上面代码的意思是跳转到重定向学院的首页www.itest.info，然后截图，如果截图跟之前保存的像素级别一致，那么用例通过，否则用例失败。