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
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
220
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
150
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
S3アクセス制御の設計ポイント
tommy0124
3
200
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
1.7k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
540
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Language of Interfaces
destraynor
161
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Thoughts on Productivity
jonyablonski
70
4.8k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Producing Creativity
orderedlist
PRO
347
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Rails Girls Zürich Keynote
gr2m
95
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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に画像を公開するためセキュリティリスクがある