Feature SpecにVisual Regression Testいれてみる

Transcript

1. Feature specに Visual Regression Test いれてみる 表参道.rb #14 2016/08/04
2. 自己紹介 • Dueno @anoChick • 株式会社 Speee 新卒3年目 中途 • Webマーケティング事業部 • 主な開発プロダクト↓ Webマーケティング総合支援プラットフォーム サイト内のテキスト・キーワード分析 メトリクス分析　
3. 本題
4. E2Eテスト • エンドトゥエンドテスト、統合テストとも呼ばれる • システム全体が正しく動作するかを確認するテスト • テストシナリオを用意して、ユーザの利用と同じ動作が実 際に行われるかをブラウザの自動操作で検証する 例） ログインのテスト
5. そこに Regression Testを 差し込む
6. Regression Test • 回帰テスト、退行テストとも呼ばれる • 機能追加・修正によりコードを書き換えた際、想定しない範 囲にまで影響が及んでないかを確認するテスト • 今回は一般的な自動テストでは対応が難しいUIに関する Regression Testを扱う（Visual Regression Testing）
7. 作る
8. できた
9. つかいかた １．Feature spec 内 upload_evidence_image(‘identifier’) 　　と書く。 　　 　　 [bucket名]/[branch名]/[ビルド番号]/screenshot/[identifier].png でscreenshotが吐かれる（AWS S3）
10. つかいかた 2．前ビルドのscreenshotとの差分をとる 　　 　　 Mean error per pixel : ピクセルあたりの平均誤差 Normalized mean erro : 正規平均誤差 Nomalized maximum error : 最大誤差 ↑数値ででる 全部S3に吐かれる
11. レポート出力 するぞ
12. レポート出力・描画 静的htmlコンテンツとしてS3に吐く GoogleWebComponents/google-chart が便利だった 　　 　　 <link rel="import" href="google-chart.html"> でTemplateをimportして、 と記述するだけで グラフが描画されるの、すごい。
13. レポート例 いい感じにしたい
14. そのた • 異常値検出(anomaly detection)とか考えたけど運用でいま いちっぽくなりそう。 • 分散のしかた。分散テスト実行もそうだけど、差分計算と か、AWSLambdaでも出来そう。
15. ありがとうございました