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.5k
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
340
継続的セキュリティテストを導入したい気持ち
anochick
0
1.3k
Other Decks in Technology
See All in Technology
AOAI Dev Day - Opening Session
yoshidashingo
2
430
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Code Reviewing Like a Champion
maltzj
517
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
It's Worth the Effort
3n
181
27k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Designing for humans not robots
tammielis
247
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Agile that works and the tools we love
rasmusluckow
325
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
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だけで完結できると良い
ありがとうございました