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

by toshiokun

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ある日のこと

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

突然のスタイル崩壊！！

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

しかし

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

なぜか？

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

package.json

Slide 19

Slide 19 text

jestの設定

Slide 20

Slide 20 text

コンポーネント

Slide 21

Slide 21 text

Snapshotテストの設定

Slide 22

Slide 22 text

スナップショットの取得

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

。。。

Slide 25

Slide 25 text

アップデート実行

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31