Closed9
Storybook を Cypress + reg-suit で Visual Regression Testing する
以前、CI上でのフォントなくて豆腐になる問題や reg-suit よく分からない問題があって断念した思い出があるので記事として残す前提でまとめていきたい
参考になりそうな記事
- https://tech.recruit-mp.co.jp/front-end/visual-regression-testing/
- https://blog.wadackel.me/2018/storybook-chrome-screenshot-with-reg-viz/
- https://buildersbox.corp-sansan.com/entry/2021/03/18/110000
- https://tech.smartcamp.co.jp/entry/Introducing-visual-regression-testing
- https://storybook.js.org/docs/react/workflows/interaction-testing
- https://storybook.js.org/docs/react/workflows/visual-testing
Create React App + TypeScript のセットアップ
yarn create react-app vrt-sample --template typescript
Storybook のセットアップ
npx -p @storybook/cli sb init
echo SKIP_PREFLIGHT_CHECK=true > .env
Cypress のセットアップ
yarn add cypress --dev
yarn run cypress open
起動を確認できたら閉じる
cypress/integration/examples
ディレクトリの削除
yarn add -D start-server-and-test
スクリーンショットを取得するコード
cypress/integration/vrt/storybook.spec.ts
/// <reference types="cypress" />
context('Storybook', () => {
it('logged in', () => {
cy.visit('http://localhost:6006/?path=/story/example-page--logged-in');
cy.wait(1000);
cy.get('#storybook-preview-wrapper').screenshot();
});
});
package.json の scripts
"storybook:ci": "start-storybook -p 6006 -s public --ci",
"cypress:run": "cypress run",
"vrt": "start-server-and-test storybook:ci http-get://localhost:6006 cypress:run"
以下のスナップショットが得られた
reg-suit のセットアップ
npm i -g reg-suit
reg-suit init
regconfig.json
が作られる。
とりあえずローカルだけで動かしたかったので plugins
は無視した。
regconfig.json
{
"core": {
"workingDir": ".reg",
"actualDir": "cypress/screenshots",
"thresholdRate": 0.01,
"ximgdiff": {
"invocationType": "client"
}
}
}
-
.reg/expected
ディレクトリにcypress/screenshots
ディレクトリを入れる - コードに変更加える
-
yarn vrt
を実行する -
reg-suit run
を実行する(ref: https://github.com/reg-viz/reg-suit#cli-usage) -
http-server .reg
でローカルサーバ立ち上げる
regconfig.json
の plugins
の設定もしていかないといけない...
以下のことは実現したい
- PR作成時に reg-suit の結果をコメントとしてアウトプットする
- S3に expected image をアップロード & S3から expected image をダウンロード
- (Slack に結果を通知する)
regconfig.json
{
"plugins": {
"reg-keygen-git-hash-plugin": false,
"reg-notify-github-plugin": {
"prComment": true,
"prCommentBehavior": "default",
"clientId": ""
},
"reg-notify-slack-plugin": {
"webhookUrl": ""
},
"reg-publish-s3-plugin": {
"bucketName": ""
}
}
}
残りのタスク
- CI(Github Actions)で自動化
- S3連携などの reg-suit plugins 周りの設定
- 実行時間かかるのでその辺はどう工夫したら良さそうかの考察
pluginは reg-notify-slack-plugin
, reg-publish-gcs-plugin
, reg-notify-github-plugin
, reg-keygen-git-hash-plugin
を追加。
S3ではなくGCSを使用した。
.github/workflows/vrt.yml
name: vrt
on: push
jobs:
vrt:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: google-github-actions/setup-gcloud@master
with:
project_id: ${{ secrets.GCP_PROJECT_ID }}
service_account_key: ${{ secrets.GCP_SA_KEY }}
export_default_credentials: true
- uses: actions/setup-node@v2
with:
node-version: 14
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- uses: actions/cache@v2
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: dev-yarn-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
dev-yarn-${{ runner.os }}-
- run: yarn install --frozen-lockfile
- run: yarn vrt
- run: yarn reg-suit
expected image が取得できてない?
expected image 取得してくるはずなんだけどなぁ...なんでだろう
reg-keygen-git-hash-plugin
がよしなに色々やってくれてるんだろうけどブラックボックスだな。コード読むしか。
これ解決策だった👀
スナップショット取得周りのブラウザサイズ周り
コンポーネント増えた時にStorybookの立ち上げを早くしたい
このスクラップは2021/05/01にクローズされました