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
320
継続的セキュリティテストを導入したい気持ち
anochick
0
1.3k
Other Decks in Technology
See All in Technology
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
280
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
37k
Max out Local LLM in Challenging Environments
sashimimochi
1
130
JAWS-UG Bedrock Claude Night
yamahiro
3
740
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
160
MapLibreとAmazon Location Service
dayjournal
1
190
データベース02: データベースの概念
trycycle
0
180
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
2
390
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
340
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.3k
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
630
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
470
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Optimizing for Happiness
mojombo
370
69k
How GitHub (no longer) Works
holman
305
140k
The Invisible Customer
myddelton
114
12k
Side Projects
sachag
451
41k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Web development in the modern age
philhawksworth
203
10k
Being A Developer After 40
akosma
67
580k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Agile that works and the tools we love
rasmusluckow
325
20k
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だけで完結できると良い
ありがとうございました