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.7k
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
390
継続的セキュリティテストを導入したい気持ち
anochick
0
1.5k
Other Decks in Technology
See All in Technology
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
3
680
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
5
1.2k
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
700
TypeScript入門
recruitengineers
PRO
20
6.6k
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
250
Backboneとしてのtimm2025
yu4u
4
1.6k
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
220
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
トヨタ生産方式(TPS)入門
recruitengineers
PRO
3
240
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Documentation Writing (for coders)
carmenintech
73
5k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Site-Speed That Sticks
csswizardry
10
790
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building an army of robots
kneath
306
46k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Into the Great Unknown - MozCon
thekraken
40
2k
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だけで完結できると良い
ありがとうございました