入門Visual Regression Test

Visual Regression Test

画像回帰テストです
これの設定をある程度まで手順書に落とし、公開します
きっと手順通りにやったら10分ぐらいでできる。。。はず

DEMO

1. vue cli ui等で適当にプロジェクトを作成する

2. vue-cli-plugin-storybookを追加

https://github.com/storybooks/vue-cli-plugin-storybook
これだけで凄く簡単にstorybookをvueに追加できます。
一度起動してみて正常に起動できるか確認しましょう！

3. storybookからスクショを撮るライブラリを導入

日本での画像回帰テストの第一人者と言っても過言ではないQuramyさんがstorybookから簡単に画像を抽出してくれるzisuiという素晴らしいライブラリを作っています。
https://github.com/Quramy/zisui

install

$ yarn add zisui --dev

package.jsonにコマンド追加

こんな感じでコマンドを追加します。
このコマンドはstorybookのサーバーを起動して、そのstorybookのポート番号を6006番と期待して、スクレイピングし、ローカルに保存します。(勿論吸い出し終わったら自動でstorybookサーバーを閉じてくれます
デフォだと__screenshots__ディレクトリとかに保存されます。

"screenshot": "zisui --serverCmd \"yarn serve:storybook\" http://localhost:6006"

4. reg-suitを導入

reg-suitを導入します。
reg-suitでは、ローカルの画像と自身のs3やgcs等に保存されている画像との差分比較できます。
比較結果は主に3種類あって、新たな画像が追加された、画像に差分が出た、画像が削除された、です。
基本的に画像に差分が出たプルリクはreg-suitは警告を発します(勿論github連携前提)。そして、その警告が発されたプルリクがマージされた場合はその画像の差分が正しいという事になり、比較元画像が更新されます。
詳しくはreg-suitのドキュメントを参照してください。

install

reg-suit initで、今回自分の場合はgcsを選択しました。
gcsのバケットも作る？と聞かれますが、作りましょう。
もしgcloud認証がいるよーとか色々言われたら全て従います。
ローカルの比較元画像が格納されているディレクトリはどれか聞かれると思いますが、その時はzisui導入時に選択したディレクトリを指定してください。
zisuiのデフォルトは__screenshots__です。
また、githubとか各種サービスと連携したいと出ますが、連携しといてください。

$ npm install -g reg-suit
$ cd path-to-your-project
$ reg-suit init
# Answer a few questions...

一応npm内で完結するようにdevでパッケージも追加しときます

$ yarn add reg-suit --dev

package.jsonに追加

こんな感じで画像回帰テストするコマンドを追加します

"regression": "reg-suit run",

実際にテストしてみる

まずは画像を吸い出す

$ yarn screenshot

比較する

$ yarn regression

もしgcsの権限がないよーとかって叱られたら、権限がつくように、ローカルでgcloud loginとか正しいprojectを選ぶとか色々頑張ってやってください

circleciに組み込む

googleのサービスアカウントキー(jsonタイプ)を取得

以下のリンクをそれとなくやればすぐ手に入るはずです。
https://cloud.google.com/docs/authentication/getting-started

circleciの環境変数に埋め込む

先程ダウンロードしたjsonキーファイルをbase64エンコードします。

$ base64 your-project.json

出力された値をcircleciの環境変数に埋め込みます。

環境変数名はGCLOUD_SERVICE_KEYにしてください。

circleciでの埋め込み方

既にあるプロジェクトの場合jobsタブのこの右上にある歯車をクリックすると、設定画面に飛べます
メニューでEnvironment Variablesをクリックして、keyをGCLOUD_SERVICE_KEYにして、valueをサービスキーをbase64エンコードした文字列を貼り付けてください

以上で環境変数の設定は完了です

プロジェクトにcircleciの設定を追加する

一応vue cli uiのバージョンは以下の通りです。

$ vue -V
3.1.1

この手順通りの設定をやっていれば以下の設定で上手く動くと思います。

defaults: &defaults
  working_directory: ~/reg-suit
  docker:
    - image: kahiro/node-nightmare
      environment:
        DISPLAY: ":99"
        GOOGLE_APPLICATION_CREDENTIALS: "/root/gcloud-service-key.json"

version: 2
jobs:
  build:
    <<: *defaults
    steps:
      - checkout
      - run:
          name: setup GCP
          command: echo $GCLOUD_SERVICE_KEY | base64 -d > /root/gcloud-service-key.json
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "yarn.lock" }}
            - v1-dependencies-
      - run:
          name: Install dependencies
          command: yarn --pure-lockfile
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "yarn.lock" }}
      - run:
          name: Lint
          command: yarn run lint
      - run:
          name: Test
          command: yarn run test:unit
      - run:
          name: Screenshot
          command: yarn run screenshot
      - run:
          name: Regression
          command: yarn run regression

image kahiro/node-nightmareの設定

Dockerfileは以下のとおりです
もしnodeのバージョンこれが良いとかあったら調整してdocker hubに上げて使うと便利そうです。

FROM node:9.8.0

RUN apt-get update -y
RUN apt-get install -y xvfb x11-xkb-utils xfonts-100dpi xfonts-75dpi \
    xfonts-scalable xfonts-cyrillic x11-apps clang libdbus-1-dev \
    libgtk2.0-dev libnotify-dev libgnome-keyring-dev libgconf2-dev \
    libasound2-dev libcap-dev libcups2-dev libxtst-dev libxss1 \
    libnss3-dev gcc-multilib g++-multilib

COPY ./xvfbd /usr/local/bin
RUN chmod 755 /usr/local/bin/xvfbd

設定完了

以上で設定は完了していると思います。
せっかくなので設定したブランチでプルリクを出してみましょう！