npm 包 @bouzuya/screenshot-testing 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

前端开发中，我们经常需要进行界面测试。界面测试通常是手工完成的，这需要大量的人力和时间。在一些重复性比较高的场景下，使用自动化测试是非常有优势的。本文将介绍一种简单易用的自动化测试工具——@bouzuya/screenshot-testing，它可以用于生成和比较页面的截图。

安装和使用

安装

安装 @bouzuya/screenshot-testing 的命令如下：

npm install @bouzuya/screenshot-testing

使用

安装完毕后，我们需要创建自己的测试代码。首先，我们需在测试文件中引入模块：

const screenshotTesting = require('@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 对象来指定容忍度参数：

const result = await screenshotTesting({
  pageUrl: 'https://example.com/',
  options: {
    tolerance: 0.3
  }
});

区域忽略

有时候我们需要忽略一些特殊区域的比较。比如一些时间戳或随机生成的元素，在两次截图时是不同的。我们可以通过传入 options 对象来指定忽略的区域：

-- -------------------- ---- -------
----- ------ - ----- -------------------
  -------- -----------------------
  -------- -
    ------- -
      -
        -- --
        -- --
        ------ ----
        ------- ---
      -
    -
  -
---

在这个例子中，我们指定了一个以左上角为起点、宽和高均为 100 的矩形区域。在截图时，这个区域将被忽略掉。

生命周期

我们可以在测试运行前、运行后，以及每次进行截图前进行一些操作。这是指定 before、after、onBeforeFirstScreenshot 和 onBeforeNextScreenshot 参数的场景。

before：在测试运行前进行的操作。
after：在测试运行结束后进行的操作。
onBeforeFirstScreenshot：在每次进行测试前进行的操作。
onBeforeNextScreenshot：在每次进行截图前进行的操作。

这些生命周期都是异步执行的。我们可以使用 async/await 或 Promise 来实现代码。

before: async page => {
  await page.goto('https://example.com/');
  await page.type('#username', 'admin');
  await page.type('#password', 'password');
  const button = await page.$('button');
  await button.click();
}

在这个例子中，我们在测试开始前通过登录表单登录了 example.com，登录过程是异步的。这里我们使用了 page.goto、page.type 和 page.$ 方法。这些方法是 Puppeteer 库提供的，可以模拟用户行为。

对于每次截图前需要进行的操作，我们可以这样实现：

onBeforeNextScreenshot: async page => {
  const button = await page.$('button');
  await button.click();
}

在这个例子中，我们为每次截图前的操作加上了一个简单的点击按钮的操作。

总结

在本文中，我们介绍了一种方便快捷的界面测试工具——@bouzuya/screenshot-testing。它使用简单，支持一些高级配置，可以快速构建自己的测试用例。希望本文能够对大家在开发过程中使用自动化测试有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005726781e8991b448e89a0