使用 Nightwatch 进行视觉回归测试 (VRT)

概述

视觉回归测试 (VRT) 是一种软件测试技术，它比较应用程序更改前后用户界面的屏幕截图或图像。 VRT 的目标是检测开发过程中可能引入的意外视觉更改，例如布局、颜色、排版或其他视觉元素的更改。

视觉回归测试通常包括以下步骤

  1. 在更改前后捕获应用程序或网页的屏幕截图。
  2. 逐像素比较屏幕截图以识别任何差异。
  3. 审查和分析差异以确定它们是故意的还是无意的。
  4. 如果更改是故意的，则批准更改

它是如何工作的？

Nightwatch 使用 JIMP，一个没有本地依赖关系的 Javascript 图像处理库，进行图像比较。

Nightwatch 逻辑

  1. 等待元素出现
  2. 截取屏幕截图
  3. 将屏幕截图与基线进行比较
  4. 在 VRT 报告中显示当前屏幕截图与基线之间的视觉差异

安装

步骤 1

使用以下命令安装插件

npm i @nightwatch/vrt --save-dev

步骤 2

更新 Nightwatch 配置以将插件添加到列表中

nightwatch.conf.js
module.exports = {
  plugins: ['@nightwatch/vrt']
  // other nightwatch settings...
}

编写视觉回归测试

为了使用 nightwatch-vrt，您只需要调用 screenshotIdenticalToBaseline 断言并传递要比较的 DOM 元素的 css 选择器。您也可以传递自定义文件名、visual_regression_settings 覆盖和自定义日志消息。

screenshotIdenticalToBaseline 接受 4 个参数作为输入

  1. selector - 标识将在屏幕截图中捕获的元素
  2. fileName - 此屏幕截图的可选文件名；默认为选择器
  3. settings - 可选设置以覆盖默认值和 visual_regression_settings
  4. message - Nightwatch 在完成时记录的可选 message

例如。

vrt-demo.js
describe('VRT demo test', function() {
    it('Test Google UI loads correctly', function(browser) {
        browser
            .navigateTo('https://www.google.co.uk')
            .assert.screenshotIdenticalToBaseline('body',  /* Optional */ 'custom-name', {threshold: 0.0}, 'VRT custom-name complete.')
            .end()
    })
})

测试第一次运行时，将创建基线屏幕截图并存储在磁盘上。您应该始终注册基线屏幕截图。此测试的后续执行将与该基线进行比较。

视觉回归设置

Nightwatch VRT 附带精心设计的默认设置。以下是列表

  1. generate_screenshot_path default none - 传递的函数将生成屏幕截图路径
  2. latest_screenshots_path default "vrt/latest" - 最近捕获的屏幕截图的路径
  3. latest_suffix default "" - 附加到最近捕获的屏幕截图末尾的字符串
  4. baseline_screenshots_path default "vrt/baseline" - 基线预期屏幕截图的路径
  5. baseline_suffix default "" - 附加到基线屏幕截图末尾的字符串
  6. diff_screenshots_path default "vrt/diff" - 两个屏幕截图的差异图像的路径
  7. diff_suffix default "" - 附加到差异图像末尾的字符串
  8. threshold default 0.0 - 匹配阈值，范围从 0 到 1。较小的值使比较更敏感
  9. prompt default false - 如果为 true，则当最近捕获的屏幕截图不同时，将提示用户覆盖基线屏幕截图
  10. updateScreenshots default false - 如果为 true，则最近捕获的屏幕截图将始终覆盖基线

但是，这些可以通过 nightwatch.conf.js 全局覆盖，如 below 所示

nightwatch.conf.js
module.exports = {
  

  //... other config
  

  '@nightwatch/vrt': {
    latest_screenshots_path: 'vrt/latest',
    latest_suffix: '',
    baseline_screenshots_path: 'vrt/baseline',
    baseline_suffix: '',
    diff_screenshots_path: 'vrt/diff',
    diff_suffix: '',
    threshold: 0.00,
    prompt: false,
    updateScreenshots: false
  },
}

此外，还可以通过传递 JSON 对象（settings 参数）来覆盖设置，如 示例 中所示，作为 screenshotIdenticalToBaseline 断言的一部分。作为函数参数传递的设置将覆盖配置文件和默认值中的设置。

审查

测试运行完成后，将生成报告。在 vrt-report 文件夹下。您可以手动打开它，也可以使用 --open 和 run test 命令自动打开报告。

基线和差异

这显示了基线图像以及差异。在差异图像中，所有不匹配的像素都被标记为红色。

Baseline & Diff

如您所见，还显示了差异%。如果差异% 小于阈值，VRT 引擎将不会将测试标记为失败。

基线和最新

这显示了当前图像与基线图像的不同之处。

Baseline & Latest

批准

在您查看所有视觉更改都是故意的后，您可以使用 --update-screenshots 标志更新基线。这很重要，因为所有后续比较都将针对新基线进行。

例如。

npx nightwatch <path to tests> --update-screenshots