Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

3548cf5f9b978439a2e7dea4c00725aa?s=128

toshiokun

May 20, 2021
Tweet

Transcript

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

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

    github: https://github.com/toshiokun 自己紹介 谷口 俊博
  3. https://zenn.dev/toshiokun/articles/3d7087b84ba1d9 Zennに投稿したこちらの記事の内容 を話します

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

  5. ある日のこと

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

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

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

  9. 突然の スタイル崩壊!!

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

  11. しかし

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

  13. なぜか?

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

  15. UIは一番変更されやすい ソフトウェア設計の第一のルールは、その理由がテスト容易性 だろうと何だろうと、常に同じである。それは、変化しやすいも のに依存しないだ。GUIは変化しやすい。GUIを使用してシス テムを操作するテストスイートは脆弱である。したがって、GUI を使用しなくてもビジネスルールのテストができるように、シス テムとテストを設計しなければいけない。 Robert C.Martin,角 征典,高木

    正弘. Clean Architecture  達人に学ぶソフトウェアの構造と設計 (Japanese Edition)
  16. Jestのsnapshotを導入し た際の散々な結果

  17. components ├── __tests__ │ ├── fuga.spec.tsx │ ├── hoge.spec.tsx │

    └── piyo.spec.tsx ├── fuga.tsx ├── hoge.tsx └── piyo.tsx ディレクトリ構成
  18. package.json

  19. jestの設定

  20. コンポーネント

  21. Snapshotテストの設定

  22. スナップショットの取得

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

  24. 。。。

  25. アップデート実行

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  44. package.json "scripts": { "storybook": "start-storybook -p 6006 -c .storybook", "screenshot":

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

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

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

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

  49. > yarn add reg-suit > yarn reg-suit init --use-yarn #

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

    # --use-yarnはpluginをインストールする際にyarnの使用を指定するオプショ ン …(pluginや設定の選択が表示されるが省略) ③reg-suitの初期設定を行う
  51. package.jsonのscriptsの定義 "scripts": { "regression": "reg-suit run", }, ③reg-suitの初期設定を行う

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

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

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

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

  56. reg-suitのメリット/デメリット 【メリット】 ビジュアルの差分を画像ベースで検出するリグレッションテストのため、スタイリ ングの実装方法を変えた場合はテストが通る ex) CSS modules -> CSS in

    JS(styled-components)への変更など 【デメリット】 パブリックアクセスができるS3に画像を公開するためセキュリティリスクがある