Loki视觉回归测试工具入门指南

什么是Loki

Loki是一款基于Storybook的视觉回归测试工具，专门用于检测UI组件在不同环境和设备上的视觉表现差异。它通过捕获组件的屏幕截图并与基准图像进行对比，帮助开发者发现意外的UI变化，确保界面在不同平台和设备上的一致性。

环境准备

基础要求

• Node.js 16或更高版本

可选依赖

根据测试需求，你可能需要安装以下工具：

1. GraphicsMagick：用于图像差异比较引擎

   • macOS用户可通过Homebrew安装：brew install graphicsmagick

2. Docker：用于chrome.docker测试目标

3. Chrome 59+：用于chrome.app测试目标

   • 推荐安装Canary版本：brew install --cask google-chrome-canary

4. Android调试工具：用于Android设备上的自愈崩溃功能

安装与配置

快速安装

执行以下命令完成基础安装：

yarn add loki --dev
yarn loki init

初始化命令会自动检测项目类型并生成默认配置。

手动配置

对于特殊需求，可以手动添加配置：

React Native项目

在storybook/storybook.js中添加：

import 'loki/configure-react-native'

其他项目

现代Storybook版本通常无需额外配置。旧版本可能需要：

// 在.storybook/preview.js中添加
import 'loki/configure-react'

测试流程详解

1. 检查配置

初始化后，package.json中会生成默认的Loki配置。对于Web项目，默认包含笔记本电脑和iPhone的测试配置，使用本地Chrome应用。你可以随时修改这些配置。

2. 启动Storybook

测试前必须启动Storybook服务：

yarn storybook

对于React Native项目：

• iOS模拟器：react-native run-ios
• Android模拟器：react-native run-android

3. 创建基准图像

首次使用时需要生成基准图像：

yarn loki update

生成的图像默认保存在loki目录中，建议将这些文件纳入版本控制。

4. 修改组件

对组件或故事进行修改，这些修改将在后续测试中被检测。

5. 执行测试

运行测试命令：

yarn loki test

可以指定测试特定配置：

yarn loki test laptop  # 测试名称包含"laptop"的配置

6. 检查差异

测试完成后会生成：

• loki/current：当前测试截图
• loki/difference：差异对比图

建议使用专业工具仔细检查所有差异。

7. 确认变更

如果差异符合预期，更新基准图像：

yarn loki approve

更新后记得提交代码和新的基准图像。

最佳实践

1. 命名规范：为配置使用描述性名称，如"chrome-desktop"、"ios-mobile"等

2. 版本控制：考虑使用Git LFS管理基准图像

3. CI集成：将Loki测试集成到持续集成流程中

4. 定期更新：随着UI迭代，定期更新基准图像

5. 差异分析：建立明确的差异审查流程，确保只有预期的变更被接受

通过遵循这些步骤，Loki将成为你UI质量保障流程中不可或缺的工具，帮助你在开发早期发现视觉回归问题，提高产品的一致性和可靠性。