Closed9

Storybook を Cypress + reg-suit で Visual Regression Testing する

kyoncykyoncy

Cypress のセットアップ

https://docs.cypress.io/guides/getting-started/installing-cypress#yarn-add

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"

以下のスナップショットが得られた

kyoncykyoncy

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"
    }
  }
}
  1. .reg/expected ディレクトリに cypress/screenshots ディレクトリを入れる
  2. コードに変更加える
  3. yarn vrt を実行する
  4. reg-suit run を実行する(ref: https://github.com/reg-viz/reg-suit#cli-usage)
  5. http-server .reg でローカルサーバ立ち上げる


regconfig.jsonplugins の設定もしていかないといけない...
以下のことは実現したい

  • 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": ""
    }
  }
}
kyoncykyoncy

残りのタスク

  • CI(Github Actions)で自動化
  • S3連携などの reg-suit plugins 周りの設定
  • 実行時間かかるのでその辺はどう工夫したら良さそうかの考察
kyoncykyoncy

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 が取得できてない?

このスクラップは2021/05/01にクローズされました