Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
reg-suit_CircleCIで_Visual_Regression_Test環境の構築.pdf
Search
toshiokun
May 20, 2021
Technology
2
630
reg-suit_CircleCIで_Visual_Regression_Test環境の構築.pdf
toshiokun
May 20, 2021
Tweet
Share
More Decks by toshiokun
See All by toshiokun
直感と論理をつなぐ_思考法.pdf
toshiokun
1
220
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
140
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
450
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
260
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
710
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Why Our Code Smells
bkeepers
PRO
336
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Faster Mobile Websites
deanohume
307
31k
Git: the NoSQL Database
bkeepers
PRO
430
65k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Music & Morning Musume
bryan
46
6.6k
Transcript
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 を使用しなくてもビジネスルールのテストができるように、シス テムとテストを設計しなければいけない。 Robert C.Martin,角 征典,高木
正弘. 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 (出力レポートイメージ)
リグレッションテスト用のツール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の設定 ②コンポーネントのスクリーショットを撮る
storybookの設定 ②コンポーネントのスクリーショットを撮る
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/config.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に画像を公開するためセキュリティリスクがある