Slide 1
Slide 1 text
Rails,Feature specに
Viewの回帰テストを⼊れる
Slide 2
Slide 2 text
⾃⼰紹介
Slide 3
Slide 3 text
上野 ⼤貴 (ueno daiki)
Webマーケティング事業部 WM開発ユニット
主な開発プロダクト →Markeship
Webマーケティング統合支援ツール
(今は特にSEO)
GoogleAnalyticsや検索順位の扱い
最近自然言語を扱ったり
Slide 4
Slide 4 text
本題
Slide 5
Slide 5 text
まず課題
Slide 6
Slide 6 text
課題1
リリースに際してプロダクトオーナー(⾮技術者)が安⼼で
きるレポートを出したい
課題2
仕様変更に伴う、UIの予期せぬレイアウト崩れを検知した
い。
Slide 7
Slide 7 text
課題1.A
E2Eテストのタイミングでスクリーンショットをとって
出⼒する。
課題2.A
上記でとったスクリーンショットを利⽤し、
前リリースとの差分を算出・レポートする。
Slide 8
Slide 8 text
E2Eテスト
• エンドトゥエンドテスト、統合テストとも呼ばれる
• システム全体が正しく動作するかを確認するテスト
• テストシナリオを⽤意して、ユーザの利⽤と同じ動作が
実際にできるかをブラウザの⾃動操作で検証する
Slide 9
Slide 9 text
回帰テスト
• レグレッションテスト、退⾏テストとも呼ばれる
• 機能追加・修正によりコードを書き換えた際、想定しな
い範囲にまで影響が及んでいないかを確認するテスト
• 今回は⼀般的な⾃動テストでは対応が難しいUIの回帰テ
ストに着⽬する
Slide 10
Slide 10 text
作ったもの
Slide 11
Slide 11 text
システム構成
Amazon S3
ImageMagick
Capybara
Poltergeist
(ヘッドレスブラウザ)
1.
2.
3.
4.
5.
Slide 12
Slide 12 text
システム構成
Amazon S3
ImageMagick
Capybara
Poltergeist
(ヘッドレスブラウザ)
1.Circle CIでビルド
2.
3.
4.
5.
①
Slide 13
Slide 13 text
システム構成
Amazon S3
ImageMagick
Capybara
Poltergeist
(ヘッドレスブラウザ)
1.Circle CIでビルド
2.feature specが走る(SS撮る)
3.
4.
5.
①
②
Slide 14
Slide 14 text
システム構成
Amazon S3
ImageMagick
Capybara
Poltergeist
(ヘッドレスブラウザ)
1.Circle CIでビルド
2.feature specが走る(SS撮る)
3.SSをS3に格納
4.
5.
①
②
③
Slide 15
Slide 15 text
システム構成
Amazon S3
ImageMagick
Capybara
Poltergeist
(ヘッドレスブラウザ)
1.Circle CIでビルド
2.feature specが走る(SS撮る)
3.SSをS3に格納
4.前ビルドでのSSとの差分をとる
5.
①
②
④
③
Slide 16
Slide 16 text
システム構成
Amazon S3
ImageMagick
Capybara
Poltergeist
(ヘッドレスブラウザ)
1.Circle CIでビルド
2.feature specが走る(SS撮る)
3.SSをS3に格納
4.前ビルドでのSSとの差分をとる
5.差分画像・データをS3に格納
①
②
④
⑤
③
Slide 17
Slide 17 text
feature specでssを撮る
upload_evidence_image(identifier)
その時の画⾯を
[bucket]/[branch名]/[ビルドNo]/screenshot/[identifier].png
でS3に格納する。
Slide 18
Slide 18 text
identifier
ID0002.png
Slide 19
Slide 19 text
デザイン修正してみる
• 例としてWebフォントを導⼊する
→コミット、pushして再度ビルド
前ビルドで⽣成されたSSとの⽐較が⾏われる
↓
差分画像と統計値がS3に出⼒される
Slide 20
Slide 20 text
identifier
フォントが変わった！
Slide 21
Slide 21 text
ImageMagickをつかった処理
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
差分を数値的にとる
mean error par pixel: ピクセルあたりの平均誤差(0〜65535)
normalized mean error: 正規平均誤差(0〜1)
normalized maximum error: 最大誤差(0〜1)
normalized mean errorを見ると
どのぐらい変化したかが分かりそう。
Slide 24
Slide 24 text
課題・やりたいこと
• 差分統計値の閾値設定
– 理想は⾃動でアラート出すまでやる
• Screenshotの識別⼦もっとうまく扱えないか
– いちいち”ID0001”とか記述するの微妙
– 重複チェックぐらいは出来そう
• 差分計算時間かかるようならAWS Lambdaに逃がす
• レポートページ静的なので良いからhtmlで作る
– S3だけで完結できると良い
Slide 25
Slide 25 text
ありがとうございました