如何使用LOKI为您的设计系统进行视觉回归测试
据我所知，目前没有用于视觉回归测试的领先独立工具。许多公司实施了自己的解决方案，但是没有广泛使用和建议作为标准的工具。
一些公司积极探索OSS解决方案，在本文中，我将与其中一家分享我的经验。
什么是洛基？
Loki是一种工具，可以轻松测试故事书项目的视觉回归项目。 Loki用于Thoughtworks tech radar的试验阶段。
为什么要洛基？
有一些用于网络的视觉回归工具，但是大多数不能无头运行，也不能使用defecected和browser的koude0。他们通常还需要您维护固定装置。使用React-Native，现在可以使用一个代码库来定位多个平台，但是没有单个工具可以测试我所知。
如何为您的项目设置Loki？
1.安装Loki软件包
npm i loki --save-dev
或使用纱线
yarn add loki -D
2.创建一个loki配置文件
yarn loki init
这将为您的项目添加标准配置。您可以在package.json文件中找到它。
配置的示例：
{
"name": "my-project",
"version": "1.0.0",
"loki": {
"chromeSelector": "#my-decorator > *",
"configurations": {
"chrome.laptop": {
"target": "chrome.app",
"width": 1366,
"height": 768
},
"chrome.iphone7": {
"target": "chrome.docker",
"preset": "iPhone 7"
},
"chrome.a4": {
"target": "chrome.aws-lambda",
"preset": "A4 Paper"
},
"ios": {
"target": "ios.simulator"
},
"android": {
"target": "android.emulator"
}
}
}
}
我不想污染我的package.json，而是将配置提取到单独的文件loki.config.js：
// loki.config.js
module.exports = {
diffingEngine: 'pixelmatch',
configurations: {
'chrome.laptop': {
target: 'chrome.docker',
width: 1366,
height: 768,
deviceScaleFactor: 1,
mobile: false,
},
// 'chrome.iphone7': {
// target: 'chrome.docker',
// preset: 'iPhone 7'
// }
},
}
我现在使用最简单的配置，但是您可以在Loki documentation中找到有关配置选项的更多信息。
我现在选择pixelmatch引擎，但是您也可以在GraphicsMagick（gm）和looks-same之间进行选择。目前，可以使用三个扩散引擎。值得一提的是，如果您想使用graphicsmagick扩散引擎，
为了进行图像比较，您需要将其安装在机器 / CI上作为附加依赖项。< / p>
3.安装Docker
loki使用Docker在图像中运行测试。如果您没有安装Docker，则可以关注installation instructions。
4.开始故事书
在本地运行测试时，您需要运行故事书的本地实例并开始执行测试。
yarn storybook
5.生成参考图像
yarn loki update
将为您的故事书中的每个故事创建参考图像，并将它们放在.loki/reference目录中。
6.运行测试
yarn loki test
或者要运行特定平台的测试（例如笔记本电脑，iPhone7等）
yarn loki test laptop
在每个测试运行中，Loki将在.loki目录中创建新文件。在此目录中，您将找到current，difference和reference文件夹。
-
current目录包含测试运行期间生成的图像。 -
difference目录包含在测试运行过程中生成的图像，并且与参考图像不同的图像，带有视觉差异。 -
reference目录包含在loki update命令中生成的参考图像。这些是用于与当前图像进行比较的图像。
reference目录的图像应将其用于存储库，如果您想将其用作CI上的测试的参考。
7.将loki添加到CI（作为GitHub动作）
要在CI上运行Loki，您需要在CI管道中添加新工作。
更新NPM脚本
{
"scripts": {
"visual-tests": "loki test laptop",
"visual-tests-ci": "build-storybook && loki --requireReference --reactUri file:./storybook-static"
}
}
作为github动作，在CI管道中添加新工作
# .github/workflows/ci.yml
visual-regression-tests:
name: 'Visual tests: React DOM'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup node from node version file
uses: actions/setup-node@v3
with:
node-version: '16'
cache: 'yarn'
registry-url: 'https://npm.pkg.github.com/'
scope: '@your-org'
- name: Install dependencies
run: yarn --frozen-lockfile --non-interactive --silent --ignore-scripts
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Run loki
run: yarn visual-tests-ci
- name: Archive screenshots
if: ${{ failure() }}
uses: actions/upload-artifact@v1
with:
name: design-system
path: .loki
跳过故事
如果您想跳过测试中的一些故事，则可以在故事中添加loki.skip参数：
<!-- Badge.stories.mdx -->
import { Canvas, Story } from '@storybook/addon-docs'
import Badge from './Badge'
<Canvas>
<Story
name="warning"
parameters={{
loki: {
skip: true
}
}}
>
<Badge variant="warning">
On hold
</Badge>
</Story>
</Canvas>
批准更改
如果您想批准更改，则可以运行：
yarn loki approve
如果预期更改并且有效。
，这将在参考文件夹中更新图像。从github操作访问伪影文件
如果进行片状测试或在CI上失败但在本地通过的测试，您可以下载工件文件并在本地运行测试以查看发生了什么。
要访问工件文件，您可以转到存储库中的“操作”选项卡，找到工作流程，导航到“摘要”，然后从最新运行中下载工件：
优点
- 相对容易设置
- 多设备/平台支持
- 在Docker中运行
- 不同的比较引擎可供选择
缺点
- 在每次测试运行中构建故事书，Loki要求它在静态构建输出上执行测试。该构建需要CI的时间和资源。可能的解决方案：以某种方式缓存
- 没有方便的方式在视觉上比较/接受测试运行之间的差异/更改
比较统计数据 - VRT测试
测试是在本地机器和CI机器上进行的（不包括构建时间）。
测试是在一个故事书上进行的，每个组件平均每个组成部分。
。测试使用3个不同的比较引擎进行。
在比较loki中的图像时，当前有三个可用的选项。
| 测试运行 | pixelmatch | gm | looks-same |
|---|---|---|---|
| 本地（M1） | 〜27.71S | 〜27.7S | 〜29.09S |
结论
在工具带中使用视觉回归测试工具很重要。这是一种尽早捕获视觉错误并阻止其产生的好方法。
实施视觉回归测试时有很多要考虑的事情，它不应减慢您的开发过程和发布过程。
尽管使用Loki有一些缺点，但我会尝试一下，看看它是否适合您。这是一个体面的捕获视觉错误的工具，并且相对容易设置。
如果您有任何疑问或建议，请随时在Twitter @alxgri
上与我联系