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
Rails,Feature specにViewの回帰テストを入れる
Search
Dueno
October 04, 2016
Technology
0
1.7k
Rails,Feature specにViewの回帰テストを入れる
Dueno
October 04, 2016
Tweet
Share
More Decks by Dueno
See All by Dueno
Feature SpecにVisual Regression Testいれてみる
anochick
0
380
継続的セキュリティテストを導入したい気持ち
anochick
0
1.5k
Other Decks in Technology
See All in Technology
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
200
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
370
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
360
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
240
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
140
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
160
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
630
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
280
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
130
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Pragmatic Product Professional
lauravandoore
35
6.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Balancing Empowerment & Direction
lara
1
390
A Tale of Four Properties
chriscoyier
160
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Writing Fast Ruby
sferik
628
62k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Practical Orchestrator
shlominoach
188
11k
Transcript
Rails,Feature specに Viewの回帰テストを⼊れる
⾃⼰紹介
上野 ⼤貴 (ueno daiki) Webマーケティング事業部 WM開発ユニット 主な開発プロダクト →Markeship Webマーケティング統合支援ツール (今は特にSEO)
GoogleAnalyticsや検索順位の扱い 最近自然言語を扱ったり
本題
まず課題
課題1 リリースに際してプロダクトオーナー(⾮技術者)が安⼼で きるレポートを出したい 課題2 仕様変更に伴う、UIの予期せぬレイアウト崩れを検知した い。
課題1.A E2Eテストのタイミングでスクリーンショットをとって 出⼒する。 課題2.A 上記でとったスクリーンショットを利⽤し、 前リリースとの差分を算出・レポートする。
E2Eテスト • エンドトゥエンドテスト、統合テストとも呼ばれる • システム全体が正しく動作するかを確認するテスト • テストシナリオを⽤意して、ユーザの利⽤と同じ動作が 実際にできるかをブラウザの⾃動操作で検証する
回帰テスト • レグレッションテスト、退⾏テストとも呼ばれる • 機能追加・修正によりコードを書き換えた際、想定しな い範囲にまで影響が及んでいないかを確認するテスト • 今回は⼀般的な⾃動テストでは対応が難しいUIの回帰テ ストに着⽬する
作ったもの
システム構成 Amazon S3 ImageMagick Capybara Poltergeist (ヘッドレスブラウザ) 1. 2. 3.
4. 5.
システム構成 Amazon S3 ImageMagick Capybara Poltergeist (ヘッドレスブラウザ) 1.Circle CIでビルド 2.
3. 4. 5. ①
システム構成 Amazon S3 ImageMagick Capybara Poltergeist (ヘッドレスブラウザ) 1.Circle CIでビルド 2.feature
specが走る(SS撮る) 3. 4. 5. ① ②
システム構成 Amazon S3 ImageMagick Capybara Poltergeist (ヘッドレスブラウザ) 1.Circle CIでビルド 2.feature
specが走る(SS撮る) 3.SSをS3に格納 4. 5. ① ② ③
システム構成 Amazon S3 ImageMagick Capybara Poltergeist (ヘッドレスブラウザ) 1.Circle CIでビルド 2.feature
specが走る(SS撮る) 3.SSをS3に格納 4.前ビルドでのSSとの差分をとる 5. ① ② ④ ③
システム構成 Amazon S3 ImageMagick Capybara Poltergeist (ヘッドレスブラウザ) 1.Circle CIでビルド 2.feature
specが走る(SS撮る) 3.SSをS3に格納 4.前ビルドでのSSとの差分をとる 5.差分画像・データをS3に格納 ① ② ④ ⑤ ③
feature specでssを撮る upload_evidence_image(identifier) その時の画⾯を [bucket]/[branch名]/[ビルドNo]/screenshot/[identifier].png でS3に格納する。
identifier ID0002.png
デザイン修正してみる • 例としてWebフォントを導⼊する →コミット、pushして再度ビルド 前ビルドで⽣成されたSSとの⽐較が⾏われる ↓ 差分画像と統計値がS3に出⼒される
identifier フォントが変わった!
ImageMagickをつかった処理
None
差分を数値的にとる mean error par pixel: ピクセルあたりの平均誤差(0〜65535) normalized mean error: 正規平均誤差(0〜1)
normalized maximum error: 最大誤差(0〜1) normalized mean errorを見ると どのぐらい変化したかが分かりそう。
課題・やりたいこと • 差分統計値の閾値設定 – 理想は⾃動でアラート出すまでやる • Screenshotの識別⼦もっとうまく扱えないか – いちいち”ID0001”とか記述するの微妙 –
重複チェックぐらいは出来そう • 差分計算時間かかるようならAWS Lambdaに逃がす • レポートページ静的なので良いからhtmlで作る – S3だけで完結できると良い
ありがとうございました