Storybook 的视觉回归测试
理由
有一些针对 Web 的视觉回归测试工具,但大多数要么不能无头运行,要么使用已弃用且没人“真正”使用的 phantomjs 浏览器。它们通常还要求您维护 fixtures。使用 react-native 现在可以使用单一代码库针对多个平台,但我不知道有任何工具可以测试所有平台。
Loki 旨在易于设置,维护成本低或无,无论运行在何种操作系统上都能得到可重现的测试,可在 CI 上运行并支持 Storybook 支持的所有平台。
支持的平台
- Docker 中的 Chrome(推荐)
- AWS Lambda 中的 Chrome
- 本地 Chrome 应用
- iOS 模拟器
- Android 模拟器
先决条件
可选依赖
- GraphicsMagick 用于 gm 差异引擎,
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