reg-suit_CircleCIで_Visual_Regression_Test環境の構築.pdf

reg-suit+CircleCIで Visual Regression Test環境の構築谷口俊博

フリーランスフロントエンドエンジニア React/NextJSが現在の主戦場 Rails/React Native/Swift/Ionic(AngularJS)などを経験してきました Twitter: @toshiokun0322 Zenn: https://zenn.dev/toshiokun
github: https://github.com/toshiokun 自己紹介谷口俊博

https://zenn.dev/toshiokun/articles/3d7087b84ba1d9 Zennに投稿したこちらの記事の内容を話します

アジェンダ reg-suitという画像差分検出ツールがとてもよいフロントエンドのリグレッションテストは難しいよ Jestのsnapshotを導入した際の散々な結果 reg-suitとCircleCIでVRT環境を構築するスタリングのリグレッションをせねばと思ったある日のこと

ある日のこと

デザイナーから依頼されたレイアウト修正の対応が終わったし、本番に反映するぞー

リリース前カタカタターン！！ ※画像はイメージです

リリース後うげ！CSS当たってないじゃん！！ ※画像はイメージです

突然のスタイル崩壊！！

CSSの変更の影響範囲読めねーな、、、フロントエンドでもリグレッションテスト必要だな

しかし

フロントエンドのリグレッションテストは難しいよ

なぜか？

①UIはアプリケーションの中で一番変更されやすい →リグレッションテスト自体のメンテナンスコストが高くつく ②HTMLやCSSの修正によるリグレッションは、ロジック面ではなくビジュアル面でのリグレッションになる →最終的には人間の目による確認が必要になるなぜフロントエンドのリグレッションテストは難しい？

UIは一番変更されやすいソフトウェア設計の第一のルールは、その理由がテスト容易性だろうと何だろうと、常に同じである。それは、変化しやすいものに依存しないだ。GUIは変化しやすい。GUIを使用してシステムを操作するテストスイートは脆弱である。したがって、GUI を使用しなくてもビジネスルールのテストができるように、システムとテストを設計しなければいけない。ＲｏｂｅｒｔＣ．Ｍａｒｔｉｎ,角征典,高木
正弘. Clean Architecture　達人に学ぶソフトウェアの構造と設計 (Japanese Edition)

Jestのsnapshotを導入した際の散々な結果

components ├── __tests__ │ ├── fuga.spec.tsx │ ├── hoge.spec.tsx │
└── piyo.spec.tsx ├── fuga.tsx ├── hoge.tsx └── piyo.tsx ディレクトリ構成

package.json

jestの設定

コンポーネント

Snapshotテストの設定

スナップショットの取得

スナップショットとの差分確認

。。。

アップデート実行

①JestのSnapshotはHTMLしか保存しないため、CSSによるスタイリングは保存されない ②テスト失敗時の差分はほとんど`git diff`で確認している内容と同じようなものしか確認できない ③結果、差分確認をしてそのままスナップショットをアップデートするだけで、「想定しないコンポーネントのレイアウト崩れの検知」という目的が全く達成されない Jestのsnapshotを導入した際の散々な結果

そんな中出会ったツールが

reg-suit https://github.com/reg- viz/reg-suit

正確に言うとreg-suitは画像の差分比較ができるツール ①指定のフォルダに配置されている画像ファイルをS3(またはGoogle Cloud Storage)に格納する ②PullRequestを作成すると、merge先のブランチの画像とmerge元のブランチの画像の差分を比較することができる reg-suitの特徴

①画像差分を比較するレポートが視覚的にわかりやすい ②スクリーンショットを撮影するツールは何でもいい ③画像を上げる先はS3、Google Cloud Storageどちらも選択できる ④githubやslackに差分比較結果を通知するプラグインがある reg-suit採用のメリット

リグレッションテスト用のツールreg-suit (reg-suitの仕組み)

リグレッションテスト用のツールreg-suit (出力レポートイメージ)

reg-suit+storycap+Circ leCIによるVRT環境構築

①アップロード先のS3の準備をする ②コンポーネントのスクリーンショットを取る ③reg-suitの初期設定をする ④CircleCI上で、スクリーンショットを取りreg-suitによるS3アップロード＆画像比較を実行できるようにする ⑤PRの作成 VRT環境構築の大まかな手順

パブリックアクセスの設定に気をつける ①アップロード先のS3の準備をする

該当のS3バケットにアクセスできるユーザーを作成する ①アップロード先のS3の準備をする

今回はStorybookで定義したコンポーネントを撮影するstorycapというツールを使用 (※reg-suitと同じ開発者によるライブラリ) https://github.com/reg-viz/storycap ②コンポーネントのスクリーショットを撮る

storycapとpuppeteerのインストール > yarn add storycap puppeteer ※puppeteerをインストールするのは、puppeteerを使用してスクリーンショットを撮影するため ②コンポーネントのスクリーショットを撮る

package.json "scripts": { "storybook": "start-storybook -p 6006 -c .storybook", "screenshot":
"storycap -C puppeteer --serverCmd \"start-storybook -p 6006\" http://localhost:6006 --serverTimeout 60000", }, ②コンポーネントのスクリーショットを撮る

storybookの設定 ②コンポーネントのスクリーショットを撮る

yarn screenshotを叩いた結果 ※Storybookで定義したコンポーネントが画像として__screenshots__配下に出力される ②コンポーネントのスクリーショットを撮る

> yarn add reg-suit > yarn reg-suit init --use-yarn #
--use-yarnはpluginをインストールする際にyarnの使用を指定するオプション …(pluginや設定の選択が表示されるが省略) ③reg-suitの初期設定を行う

reg-suitのインストールと初期設定 > yarn add reg-suit > yarn reg-suit init --use-yarn
# --use-yarnはpluginをインストールする際にyarnの使用を指定するオプション …(pluginや設定の選択が表示されるが省略) ③reg-suitの初期設定を行う

package.jsonのscriptsの定義 "scripts": { "regression": "reg-suit run", }, ③reg-suitの初期設定を行う

④CircleCI上で、スクリーンショットを取りreg-suitによるS3アップロード＆画像比較を実行できるようにする .circleci/conﬁg.ymlにyarn screenshotとyarn regressionを実行するjobを定義する

④CircleCI上で、スクリーンショットを取りreg-suitによるS3アップロード＆画像比較を実行できるようにする S3にアクセスできるようにするために、環境変数設定を忘れない

スタイルの修正をしてPRを作成 ⑤PRの作成

CircleCIのジョブが完了すると下記のようなコメントが自動で投稿される ⑤PRの作成

reg-suitのメリット/デメリット【メリット】ビジュアルの差分を画像ベースで検出するリグレッションテストのため、スタイリングの実装方法を変えた場合はテストが通る ex) CSS modules -> CSS in
JS(styled-components)への変更など【デメリット】パブリックアクセスができるS3に画像を公開するためセキュリティリスクがある

reg-suit_CircleCIで_Visual_Regression_Test環境の構築.pdf

reg-suit_CircleCIで_Visual_Regression_Test環境の構築.pdf

More Decks by toshiokun

Other Decks in Technology

Featured

Transcript