Storybook 的視覺迴歸測試
原理
目前有一些網頁的視覺迴歸工具，但大多數要么無法在無頭模式下執行，要么使用已棄用且沒有人真正使用的 phantomjs 瀏覽器。它們通常也需要您維護 fixture。有了 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-至今
