Storybook 的可视化回归测试
基本原理
Web 端有一些可视化回归测试工具,但大多数要么无法无头运行,要么使用已被弃用的 PhantomJS,而且实际上没有人在使用这个浏览器。它们通常还需要你维护夹具(fixtures)。使用 React Native,现在可以用一个代码库针对多个平台,但据我所知,目前还没有一个工具可以测试所有平台。
Loki 的目标是实现轻松设置、低维护成本、无论在哪个操作系统上运行都能重现的测试、能在 CI 上运行并支持 Storybook 支持的所有平台。
支持的平台
- Docker 中的 Chrome(推荐)
- AWS Lambda 中的 Chrome
- 本地 Chrome 应用
- iOS 模拟器
- Android 模拟器
前提条件
可选依赖项
- GraphicsMagick(用于 gm diffing 引擎,
brew install graphicsmagick
) - Docker(用于
chrome.docker
目标) - Chrome 59+(用于
chrome.app
目标,brew cask install google-chrome-canary
)
安装
yarn add loki --dev
yarn loki init
工作流程
Loki 不会为您启动任何服务器,因此请确保在运行测试之前 Storybook 和任何模拟器/仿真器都已启动并运行。
- 启动 Storybook 服务器
yarn storybook
- 添加第一组参考文件
yarn loki update
- 对组件进行一些更改
- 对比参考文件进行测试
yarn loki test
- 查看 diff 文件夹中的更改
- 批准更改并更新参考文件
yarn loki approve
文档
示例
开发
# Install dependencies
yarn
# Start example storybook
yarn workspace @loki/example-react run storybook
# Run example visual tests
yarn workspace @loki/example-react run test
# Run unit tests
yarn test
# Run cli integration tests
cd test/cli && yarn test
维护者
许可证
MIT 许可证. © Joel Arvidsson 2017-present