前言
前端开发中，我们经常需要进行界面测试。界面测试通常是手工完成的，这需要大量的人力和时间。在一些重复性比较高的场景下，使用自动化测试是非常有优势的。本文将介绍一种简单易用的自动化测试工具——@bouzuya/screenshot-testing，它可以用于生成和比较页面的截图。
安装和使用
安装
安装 @bouzuya/screenshot-testing 的命令如下：
--- ------- ---------------------------
使用
安装完毕后，我们需要创建自己的测试代码。首先，我们需在测试文件中引入模块：
----- ----------------- - ---------------------------------------
在使用 @bouzuya/screenshot-testing 时，我们需要指定以下几个参数：
pageUrl：需要截图的页面的 URL。options：一些高级配置选项，比如指定比较结果的容差度、指定需要忽略的区域等等。before：在运行测试前需要进行的操作，比如登录、设置 Cookie 等等。after：测试结束后需要进行的操作，比如清理数据等等。onBeforeFirstScreenshot：测试前需要进行的操作，比如刷新页面等等。onBeforeNextScreenshot：每次截图前需要进行的操作，比如点击按钮、输入等等。
下面是一个简单例子：
--------------------- ---- ------ -- -- -
---------- -- --- ------ ----- -- -- -
----- ------ - ----- -------------------
-------- -----------------------
----------------------- ----- ---- -- -
----- ------ - ----- -----------------
----- ---------------
-
---
--------------------------
---
---在这个例子中，我们测试了 example.com 的主页，并在每次截图前点击了页面上的一个按钮。测试结果将返回一个布尔值，代表两次截图的结果是否一致。如果测试结果为 true，则表示测试通过；否则，测试未通过。
expect(result).to.be.true; 的语句是断言结果的代码，如果测试结果不是 true，则会抛出异常，测试将失败。
高级使用
容忍度
容忍度是指在两张截图比较时所容忍的不同程度。默认情况下，容忍度为 0.1。
我们可以通过传入 options 对象来指定容忍度参数：
----- ------ - ----- -------------------
-------- -----------------------
-------- -
---------- ---
-
---区域忽略
有时候我们需要忽略一些特殊区域的比较。比如一些时间戳或随机生成的元素，在两次截图时是不同的。我们可以通过传入 options 对象来指定忽略的区域：
----- ------ - ----- -------------------
-------- -----------------------
-------- -
------- -
-
-- --
-- --
------ ----
------- ---
-
-
-
---在这个例子中，我们指定了一个以左上角为起点、宽和高均为 100 的矩形区域。在截图时，这个区域将被忽略掉。
生命周期
我们可以在测试运行前、运行后，以及每次进行截图前进行一些操作。这是指定 before、after、onBeforeFirstScreenshot 和 onBeforeNextScreenshot 参数的场景。
before：在测试运行前进行的操作。after：在测试运行结束后进行的操作。onBeforeFirstScreenshot：在每次进行测试前进行的操作。onBeforeNextScreenshot：在每次进行截图前进行的操作。
这些生命周期都是异步执行的。我们可以使用 async/await 或 Promise 来实现代码。
------- ----- ---- -- - ----- ---------------------------------- ----- ---------------------- --------- ----- ---------------------- ------------ ----- ------ - ----- ----------------- ----- --------------- -
在这个例子中，我们在测试开始前通过登录表单登录了 example.com，登录过程是异步的。这里我们使用了 page.goto、page.type 和 page.$ 方法。这些方法是 Puppeteer 库提供的，可以模拟用户行为。
对于每次截图前需要进行的操作，我们可以这样实现：
----------------------- ----- ---- -- - ----- ------ - ----- ----------------- ----- --------------- -
在这个例子中，我们为每次截图前的操作加上了一个简单的点击按钮的操作。
总结
在本文中，我们介绍了一种方便快捷的界面测试工具——@bouzuya/screenshot-testing。它使用简单，支持一些高级配置，可以快速构建自己的测试用例。希望本文能够对大家在开发过程中使用自动化测试有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005726781e8991b448e89a0