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
微妙な違いも見逃すな!ビジュアルリグレッションテスト! / phpcon2020
Search
blue_goheimochi
December 12, 2020
Technology
6
1.2k
微妙な違いも見逃すな!ビジュアルリグレッションテスト! / phpcon2020
PHP Conference Japan 2020の登壇資料です。
https://phpcon.php.gr.jp/2020/
blue_goheimochi
December 12, 2020
Tweet
Share
More Decks by blue_goheimochi
See All by blue_goheimochi
コミュニケーションを「パス」のやりとりと捉え大切にしていること / dai-kichijojipm-2024
blue_goheimochi
2
2.6k
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
4
1.2k
芝生の障害対応・メンテナンスについて語る / ya8-2024
blue_goheimochi
1
46
「わたしたちのコード」を安定させるためにフレームワークとの距離を保つ / phperkaigi2024
blue_goheimochi
5
1.9k
コードを計測することで捉える問題点 / phpcondo2024
blue_goheimochi
5
1k
Laravelのコードとわたしたちのコードとの距離を保つ / phpcon2023
blue_goheimochi
1
2k
リンケージにおけるアプリケーションコードとの付き合い方とそれを支えるコミュニケーション / drobe_pixiv_linkage-20230905
blue_goheimochi
1
520
推測しないで、計測し、判断する! 〜カイゼンのためのステップ考察〜 / phpconfuk2023
blue_goheimochi
4
2.1k
iOS, iPadOSにもWeb Pushがきたのでさわってみた
blue_goheimochi
1
470
Other Decks in Technology
See All in Technology
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
12k
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
200
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
Taming you application's environments
salaboy
0
180
The Rise of LLMOps
asei
7
1.4k
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
750
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
370
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Designing the Hi-DPI Web
ddemaree
280
34k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Designing Experiences People Love
moore
138
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Transcript
微妙な違いも⾒逃すな! ビジュアルリグレッションテスト! PHP Conference Japan 2020 2020.12.12 Yuta Ohashi
blue_goheimochi ⼤橋 佑太 株式会社オウケイウェイヴ PHP(Laravel), JavaScript(Vue.js/Nuxt.js), ランニング, サッカー, フットサル, 浜松まつり,
ポケモンカードゲーム, さわやかのげんこつハンバーグ おおはし ゆうた
3 ⽬次 • ビジュアルリグレッションテストとは? • Atomic Designで考えるUIコンポーネント設計 • UIコンポーネントのカタログ化 •
テストのためのツール • CI環境を含めたテストの全体像 • よかったこと&改善できそうなこと • やってみて感じた導⼊障壁 • まとめ
ビジュアルリグレッションテストとは?
5 ビジュアルリグレッションテストとは? • 「⾒た⽬」の変更を検出するためのテスト • 対象はページ全体やUIコンポーネント • 今回はUIコンポーネントの事例をお話しします • 変更前と変更後のスクリーンショットを⽐較して差分を確認する
ことで、意図しない崩れを検知できる
6 ビジュアルリグレッションテストとは? どこが変わっているでしょうか? Before After
7 ビジュアルリグレッションテストとは? 微妙な違いも⾒逃さなかった! Before After リンクテキストの⾊変更 & アンダーライン追加
8 Before After ビジュアルリグレッションテストとは? 微妙な違いも⾒逃さなかった! リンクテキストの⾊変更 & アンダーライン追加
Atomic Designで考えるUIコンポーネント設計
10 Atomic Designで考えるUIコンポーネント設計 Atomic Designとは?
11 Atomic Designで考えるUIコンポーネント設計 Atomic Designとは?
12 Atomic Designで考えるUIコンポーネント設計 Atomic Designとは? • Bread Frostさんが考案した、デザインシステム • UIの構造を5段階で表しているのが特徴
• Atoms(原⼦) が集まってMolecule(分⼦) に、Moleculesが集まって Organism(有機体) に、Organismsが集まって‧‧‧‧Pageができる • Webページの要素を分解して、⼩さい部品の組み合わせ(UIコンポーネン ト)と考える • Vue.jsやReactなどのコンポーネントシステムとも相性が良い
UIコンポーネントのカタログ化
14 UIコンポーネントのカタログ化 Storybook
15 UIコンポーネントのカタログ化 Storybook • コンポーネントをカタログのような形で管理‧閲覧できように するためのツール • 定義ファイルを⽤意することで、コンポーネント1つ1つが Webブラウザから閲覧可能になる •
Vue.js、React、Angularなど主要なフレームワークに対応
テストのためのツール
17 テストのためのツール • Storycap • reg-suit
18 テストのためのツール Storycap
19 テストのためのツール Storycap • Storybookをクロールしてスクリーンショットを撮ってくれる ツール • 指定したディレクトリに、取得結果を出⼒してくれる
20 テストのためのツール reg-suit
21 テストのためのツール reg-suit • 画像の⽐較をしてくれるツール • Storycapで取得したスクリーンショットを変更前‧変更後のもので⽐ 較する • 差分の結果をHTMLで⽣成してくれる
22 テストのためのツール Storycapでコンポーネントのスクリーンショットを取得 Before After
23 Before After テストのためのツール reg-suitでBeforeとAfterのスクリーンショットを⽐較 リンクテキストの⾊変更 & アンダーライン追加
CI環境を含めたテストの全体像
25 CI環境を含めたテストの全体像 AWS • CodeBuild (AWS CodeBuild) • Storybookのビルド、Storycapでのキャプチャ取得、reg-suitで⽐較、などなど⼀ 連の操作‧指⽰をする
• S3 (Amazon Simple Storage Service) • ビルドしたStorybook、reg-suitでの⽐較結果を保存する • ECR (Amazon Elastic Container Service) • Storycapでスクリーンショットを取得するために、Chromiumをインストールした コンテナイメージを事前にpushする
26 CI環境を含めたテストの全体像 前提 • CI環境 • AWS • CodeBuild •
S3 • ECR • リポジトリ • Github Enterprise
27 CI環境を含めたテストの全体像 1. プルリクエスト作成をトリガーにテストが開始される • CodeBuildを呼び出しテストを開始 2. Storybookをビルド 3. Storycapでスクリーンショットを取得
4. reg-suitで前の結果と今回の結果を⽐較する • 前の結果=プルリクエスト対象ブランチがマージされた際に作成されたスク リーンショット 5. テスト結果をプルリクエストにコメントする
28 CI環境を含めたテストの全体像 CodeBuild Github Enterprise 作業内容をGithub EnterpriseにPushする。 git push ECR
S3 Storybook⽤Bucket Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット
29 CI環境を含めたテストの全体像 CodeBuild Github Enterprise プルリクエストを作成する。 pull request ECR S3
Storybook⽤Bucket Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット
30 CI環境を含めたテストの全体像 CodeBuild Github Enterprise Github EnterpriseからのWebhookを経由して、CodeBuildが実⾏される。 この際、buildspeck.ymlに記述されている内容を実⾏する。 Notify(Webhook) ECR
S3 Storybook⽤Bucket Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット
31 CI環境を含めたテストの全体像 CodeBuild Github Enterprise ECRに登録してある、ビジュアルリグレッションテスト⽤のコンテナイメージ(Chromiumなどの必要ツー ルが⼊っている)をdocker pullする ECR S3
Storybook⽤Bucket Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット docker pull
32 CI環境を含めたテストの全体像 CodeBuild Github Enterprise Storybookをビルドする(npm run storybook-build)。コンテナはボリュームマウントして実⾏する形にし ているので、ビルド成果物はコンテナの外に出⼒される。 build
Storybook ECR S3 Storybook⽤Bucket Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット
33 CI環境を含めたテストの全体像 CodeBuild Github Enterprise StorycapがChromiumを利⽤し、Storybook全体をクローリングしつつ各UIコンポーネントのスクリーン ショットを1つ1つ取得する。 Crawl Take screenshots
ECR S3 Storybook⽤Bucket Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット
34 CI環境を含めたテストの全体像 CodeBuild Github Enterprise S3から⽐較対象となる前回のStorybookのスクリーンショットをダウンロードする。 Download prev screenshots ECR
S3 Storybook⽤Bucket Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット
35 CI環境を含めたテストの全体像 CodeBuild Github Enterprise reg-suitで、今回のStorybookのスクリーンショットと前回のStorybookのスクリーンショットの差分を取 り、HTMLレポートを⽣成する。 ECR S3 Storybook⽤Bucket
Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット run reg-suit
36 CI環境を含めたテストの全体像 CodeBuild Github Enterprise Storybook、スクリーンショット、reg-suitのHTMLレポートはアーティファクト(CodeBuildの成果物)とし て、S3にアップロードする。 ECR S3 Storybook⽤Bucket
Chromiumが⼊ったコンテナイメージ 前回のStorybookのスクリーンショット 今回のStorybookのビルド成果物 今回のStorybookのスクリーンショット 今回のreg-suitのHTMLレポート Upload artifacts
37 CI環境を含めたテストの全体像 CodeBuild Github Enterprise 結果をプルリクエストにコメントする。 ECR S3 Storybook⽤Bucket Chromiumが⼊ったコンテナイメージ
前回のStorybookのスクリーンショット 今回のStorybookのビルド成果物 今回のStorybookのスクリーンショット 今回のreg-suitのHTMLレポート Comment to pull request
38 CI環境を含めたテストの全体像 1. プルリクエスト作成をトリガーにテストが開始される • CodeBuildを呼び出しテストを開始 2. Storybookをビルド 3. Storycapでスクリーンショットを取得
4. reg-suitで前の結果と今回の結果を⽐較する • 前の結果=プルリクエスト対象ブランチがマージされた際に作成されたスク リーンショット 5. テスト結果をプルリクエストにコメントする
39 CI環境を含めたテストの全体像 テストが完了するとこんなコメントがプルリクエストにつきます
40 CI環境を含めたテストの全体像 テストが完了するとこんなコメントがプルリクエストにつきます S3にアップロードされた StorybookのURL
41 CI環境を含めたテストの全体像 テストが完了するとこんなコメントがプルリクエストにつきます S3にアップロードされた StorybookのURL S3にアップロードされた reg-suitのレポートのURL
42 CI環境を含めたテストの全体像 テストが完了するとこんなコメントがプルリクエストにつきます 変更されたコンポーネント 追加されたコンポーネント 削除されたコンポーネント 変更がなかったコンポーネント が分かる! S3にアップロードされた StorybookのURL
S3にアップロードされた reg-suitのレポートのURL
よかったこと&改善できそうなこと
44 よかったこと&改善できそうなこと よかったこと • レビューがとてもしやすくなった • CSSのリファクタリングがしやすくなった • 意図しない崩れが起きづらくなった
45 よかったこと&改善できそうなこと よかったこと 変更されたコンポーネント 追加されたコンポーネント 削除されたコンポーネント 変更がなかったコンポーネント が分かる! S3にアップロードされた StorybookのURL
S3にアップロードされた reg-suitのレポートのURL
46 よかったこと&改善できそうなこと よかったこと • レビューがとてもしやすくなった • 対象プルリクエストの修正でコンポーネントを壊していないか?が確 認できる(⼿元でStorybookを⽴ち上げて確認しなくてもよい) • レビューする側としてもとても安⼼感がある
• 追加‧変更‧削除されたコンポーネントがそれぞれわかるので、コー ドレビューの補助にもなっている
47 よかったこと&改善できそうなこと よかったこと • CSSのリファクタリングがしやすくなった • デザイナーから上がってきた声 • ビジュアルリグレッションテストで差分がでなければ正しくリファク タリングができたというのが分かる
• ⼤胆に修正することができた • ⽬視での確認を減らすことができた
48 よかったこと&改善できそうなこと よかったこと • 意図しない崩れが起きづらくなった • 「ビジュアルリグレッションテスト」と話してきたが実はあまりデグレが発⽣して いない • 全体にかかるようなCSSを修正した場合(line-heightを⼀括で変えるなど)にたまにあるくらい
• コンポーネント単位で作成するようになったことにより、変更がコンポーネントの 中で閉じるようになったためだと考えている • コンポーネントを組み合わせてページを構成した際に、marginの設定もれなどで 要素がくっついてしまうというようなことはあるので、ページ全体に対してのテス トもうまくできるように考えていきたい
49 よかったこと&改善できそうなこと 改善できそうなこと • 不安定なコンポーネントを減らす • テストの実⾏時間を短くする • UIコンポーネント設計が難しい
50 よかったこと&改善できそうなこと 改善できそうなこと • 不安定なコンポーネントを減らす • ⾮同期読み込みがあるようなコンポーネントはStorycapのスクリーン ショット取得のタイミングによって変更してないのに差分が出てきて しまうことがある •
⽇付に依存しているコンポーネント
51 よかったこと&改善できそうなこと 改善できそうなこと • テストの実⾏時間を短くする • 1回のテストに10分前後かかってしまっている • Dockerコンテナ経由でのビルドをしないようにする •
テストの並列実⾏ • 開発フローの⾒直し
52 よかったこと&改善できそうなこと 改善できそうなこと • UIコンポーネント設計が難しい • 基本的にはAtomic Designに則ってコンポーネント設計をしている • 最⼩単位のAtomは分かりやすい
• これはMolecule?これはOrganism?と複数のコンポーネントを組み合わせ たものをどこに配置するかよく相談している • 5つの段階だと少ない‧‧‧ • 試験的にOrganismのコンポーネントをページ別に分けて運⽤してみたりしている がまだまだ改善の余地がありそう
やってみて感じた導⼊障壁
54 やってみて感じた導⼊障壁 • フロントエンド‧バックエンドの開発の分離 • デザイナーとの共創
55 やってみて感じた導⼊障壁 フロントエンド‧バックエンド開発の分離 • 組織が分かれている必要はないかもしれないが、コード上でフロントエ ンドとバックエンドが分かれている必要はありそう • 既存のプロダクトにシュッといれられるかというとつらそう‧‧‧ • 今回の事例では、アプリケーションのリプレイスを進めているプロダク
トだったということは導⼊障壁をかなり下げていると思われる • フロントエンドはNuxt.js、バックエンドはLaravelという技術選定から⾏えた • この辺りの開発体制を調整するのにすごく⼒を割いた
56 やってみて感じた導⼊障壁 デザイナーとの共創 • フロントエンドチームができることにより、デザイナーとより 協⼒(1つのチームとして機能すること)が必要 • Atomic Designなどの知識共有、⽂化の共有 •
同じリポジトリを利⽤しての開発 • 開発側としてもよりUIやデザインといった領域を知る必要がある • サンプルリポジトリを作ったり、トレーニング、情報共有などを⾏った
まとめ
58 まとめ • ビジュアルリグレッションテストは「⾒た⽬」をテストする • 今回はUIコンポーネントのテストを紹介 • Atomic Designを取り⼊れUIコンポーネント設計を⾏い、StorybookでUI コンポーネントカタログを作成
• Storycap、reg-suit、CodeBuild、S3、ECRを使ってテスト環境を構築 • レビューがとてもしやすくなった! • 意図しない変更を検知しプルリクエスト上で確認できる • 意図した変更(追加‧変更‧削除)も分かるのでコードレビューの補助となる • ただし、導⼊障壁はやや⾼いと感じている
微妙な違いも⾒逃さなかった! ビジュアルリグレッションテスト!