Storybook 的視覺迴歸測試
基本原理
市面上有一些用於 Web 的視覺迴歸工具，但大多數都無法在無頭模式下執行，或使用已棄用的 PhantomJS，而這並非真正有人在使用的瀏覽器。它們通常也需要您維護固定裝置。藉由 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 - 檢閱差異資料夾中的變更
- 核准變更並更新參考
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-至今
