Rails,Feature specにViewの回帰テストを入れる

Transcript

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