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
Feature SpecにVisual Regression Testいれてみる
Search
Dueno
September 23, 2016
Technology
0
390
Feature SpecにVisual Regression Testいれてみる
Dueno
September 23, 2016
Tweet
Share
More Decks by Dueno
See All by Dueno
Rails,Feature specにViewの回帰テストを入れる
anochick
0
1.7k
継続的セキュリティテストを導入したい気持ち
anochick
0
1.5k
Other Decks in Technology
See All in Technology
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
640
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
6
1.5k
Browser
recruitengineers
PRO
5
700
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
200
モダンフロントエンド 開発研修
recruitengineers
PRO
4
1.1k
アジャイルテストで高品質のスプリントレビューを
takesection
0
120
TypeScript入門
recruitengineers
PRO
26
7.9k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
600
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
3
460
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
190
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.2k
浸透しなさいRFC 5322&7208
hinono
0
120
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Code Reviewing Like a Champion
maltzj
525
40k
Automating Front-end Workflow
addyosmani
1370
200k
Balancing Empowerment & Direction
lara
2
590
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
RailsConf 2023
tenderlove
30
1.2k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Language of Interfaces
destraynor
160
25k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Transcript
Feature specに Visual Regression Test いれてみる 表参道.rb #14 2016/08/04
自己紹介 • Dueno @anoChick • 株式会社 Speee 新卒3年目 中途 •
Webマーケティング事業部 • 主な開発プロダクト↓ Webマーケティング総合支援プラットフォーム サイト内のテキスト・キーワード分析 メトリクス分析
本題
E2Eテスト • エンドトゥエンドテスト、統合テストとも呼ばれる • システム全体が正しく動作するかを確認するテスト • テストシナリオを用意して、ユーザの利用と同じ動作が実 際に行われるかをブラウザの自動操作で検証する 例) ログインのテスト
そこに Regression Testを 差し込む
Regression Test • 回帰テスト、退行テストとも呼ばれる • 機能追加・修正によりコードを書き換えた際、想定しない範 囲にまで影響が及んでないかを確認するテスト • 今回は一般的な自動テストでは対応が難しいUIに関する Regression
Testを扱う(Visual Regression Testing)
作る
できた
つかいかた 1.Feature spec 内 upload_evidence_image(‘identifier’) と書く。 [bucket名]/[branch名]/[ビルド番号]/screenshot/[identifier].png でscreenshotが吐かれる(AWS
S3)
つかいかた 2.前ビルドのscreenshotとの差分をとる Mean error per pixel : ピクセルあたりの平均誤差
Normalized mean erro : 正規平均誤差 Nomalized maximum error : 最大誤差 ↑数値ででる 全部S3に吐かれる
レポート出力 するぞ
レポート出力・描画 静的htmlコンテンツとしてS3に吐く GoogleWebComponents/google-chart が便利だった <link rel="import" href="google-chart.html"> でTemplateをimportして、
と記述するだけで グラフが描画されるの、すごい。
レポート例 いい感じにしたい
そのた • 異常値検出(anomaly detection)とか考えたけど運用でいま いちっぽくなりそう。 • 分散のしかた。分散テスト実行もそうだけど、差分計算と か、AWSLambdaでも出来そう。
ありがとうございました