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

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 を使用しなくてもビジネスルールのテストができるように、シス テムとテストを設計しなければいけない。 Ｒｏｂｅｒｔ Ｃ．Ｍａｒｔｉｎ,角 征典,高木

    正弘. 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に画像を公開するためセキュリティリスクがある