BackstopJS -岩石教程

特点

自动化截图：在指定视口和设备配置下自动捕获网页或组件的截图。
像素级对比：进行像素级别的图像对比，检测视觉变化和回归。
多视口支持：支持多种设备和浏览器视口，确保跨平台一致性。
详细报告：生成详细的视觉差异报告，突出显示变化部分，便于审查和修复问题。
易于集成：与各种 CI/CD 工具和测试框架无缝集成，自动化视觉测试流程。
灵活配置：通过简单的配置文件自定义测试参数和设置。

使用场景

视觉回归测试：捕获代码变化前后的视觉差异，防止意外的视觉回归。
跨设备和浏览器测试：确保应用在不同设备和浏览器上的一致性。
UI 组件库测试：自动捕获和比较 UI 组件的视觉变化。
自动化测试：集成 CI/CD 工具，自动运行视觉测试，确保持续集成中的高质量交付。

安装方式

使用 npm 安装 BackstopJS：

npm install -g backstopjs

初始化 BackstopJS 配置文件：

backstop init

使用示例

配置文件 (backstop.json)

创建一个 backstop.json 文件，定义测试设置：

{
  "id": "backstop_default",
  "viewports": [
    {
      "label": "phone",
      "width": 320,
      "height": 480
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "scenarios": [
    {
      "label": "homepage",
      "url": "https://example.com",
      "selectors": ["document"],
      "delay": 5000,
      "misMatchThreshold" : 0.1
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "puppeteer",
  "engineFlags": [],
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

运行测试

生成参考截图：

backstop reference

运行测试并比较新旧截图：

backstop test

查看报告

生成的视觉差异报告将存储在 backstop_data/html_report 目录下，可以通过浏览器打开查看。

常用 API 介绍

backstop reference：生成参考截图，用于后续比较。
```
backstop reference
```
backstop test：运行测试并比较新旧截图，生成差异报告。
```
backstop test
```
backstop approve：如果新截图被批准为正确版本，可以将其更新为参考截图。
```
backstop approve
```

viewports：定义要测试的设备和浏览器视口。

"viewports": [
  {
    "label": "phone",
    "width": 320,
    "height": 480
  }
]

scenarios：定义要测试的场景，包括 URL、选择器、延迟等。

"scenarios": [
  {
    "label": "homepage",
    "url": "https://example.com",
    "selectors": ["document"],
    "delay": 5000,
    "misMatchThreshold" : 0.1
  }
]

misMatchThreshold：设置图像比较时的误差阈值，以容忍微小的视觉变化。
```
"misMatchThreshold": 0.1
```

paths：定义存储截图和报告的路径。

"paths": {
  "bitmaps_reference": "backstop_data/bitmaps_reference",
  "bitmaps_test": "backstop_data/bitmaps_test"
}

高级用法

自定义脚本

可以通过 engine_scripts 配置选项来定义自定义脚本，在捕获截图前执行特定操作，例如模拟用户交互。

"engine_scripts": {
  "onReadyScript": "path/to/onReady.js"
}

在 onReady.js 中编写脚本：

module.exports = async (page, scenario, viewport, isReference) => {
  await page.click('#someElement');
  await page.waitForSelector('#someOtherElement');
};

集成 CI/CD 工具

以下是一个简单的 GitHub Actions 配置示例，用于集成 BackstopJS 进行视觉测试：

name: Visual Testing

on: [push, pull_request]

jobs:
  visual-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install BackstopJS
        run: npm install -g backstopjs

      - name: Run visual tests
        run: backstop test

BackstopJS

特点

使用场景

安装方式

使用示例

常用 API 介绍

高级用法

官方资料