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
Introduction to Visual Regression Testing
Search
Yosuke Kurami
November 25, 2017
Programming
1
3.3k
Introduction to Visual Regression Testing
For nodefest 17.
How introduce Visual Regression Testing into out products.
Yosuke Kurami
November 25, 2017
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
App Router 悲喜交々
quramy
7
520
上手に付き合うコンポーネントテスト
quramy
4
1.9k
Patched fetch did not work
quramy
6
590
GraphQL あるいは React における自律的なデータ取得について
quramy
18
4.8k
Next.js App Router
quramy
15
3.3k
Fragment Composition of GraphQL
quramy
16
3.5k
reg-viz VRT tools
quramy
4
1.3k
NoInfer
quramy
0
240
Precondition with schema directives
quramy
0
1.5k
Other Decks in Programming
See All in Programming
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
560
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
780
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
250
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
240
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
11
5.5k
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
2025.01.17_Sansan × DMM.swift
riofujimon
2
590
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.8k
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.8k
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
2.9k
선언형 UI에서의 상태관리
l2hyunwoo
0
270
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
9k
Optimising Largest Contentful Paint
csswizardry
33
3k
Docker and Python
trallard
43
3.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Unsuck your backbone
ammeep
669
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Adopting Sorbet at Scale
ufuk
74
9.2k
Practical Orchestrator
shlominoach
186
10k
For a Future-Friendly Web
brad_frost
176
9.5k
Transcript
Introduction to Visual Regression Testing #nodefest ‘17
5PEBZ`TUIFNF
)PXXFJOUSPEVDF l7JTVBM3FHSFTTJPO5FTUz UPPVSQSPEVDU 41"
8IZ7JTVBM3FHSFTTJPO
1. How assert components ? w *Gtype: B XIBULJOEQSPQFSUZEPZPVBTTFSU
nodeName or textContent, classList <template> <class="greeting" div> <div v-if="type === 'A'"> Good evening, {{name}}. </div> <div class="type-b" v-else-if="type === 'B'"> Bon soir, {{name}}. </div> <div v-else>Other...</div> </div> </template>
1. How assert DOM ? w 0WFSBTTFSUJPO-PXNBJOUBJOBCJMJUZʜ 'FXBTTFSUJPO6OFBTJOFTTʜ w 4P
l4OBQTIPUUFTUJOHz ƭ The latest snapshot (DOM String) ƭ The actual snapshot (DOM String) Update if snapshot is accepted Assertion
2. We want to test Styles w 0VSVTFSTBSFOPUJOUFSFTUFEJO$44DMBTTOBNF .hoge {
padding: 15px; color: #808080; border: 1px solid currentColor; } <div class="hoge"> ABCDEF </div> JOUFSFTUFE OPUJOUFSFTUFE
That is question: To create or not to create w
*OJUJBMMZXFUSJFETPNFTFSWJDFTPSUPPMT )PXFWFSUIFSFXBTOPUXIBUXFXBOU w 8FEFDJEFEUPEFWFMPQPVSl7JTVBM3FHSFTTJPO 5FTUJOHzTZTUFN
Divide into smaller problems w $BQUVSFTOBQTIPUT TDSFFOTIPUJNBHFT w DPOTJEFSJOHJOUPl)PXJNQMFNFOUBOEUFTUz
w $PNQBSFTOBQTIPUT TDSFFOTIPUJNBHFT w DPOTJEFSJOHJOUPl%FWFMPQNFOUXPSLqPXz
$BQUVSFTOBQTIPUT
Which tools do we use?
(e.g.) Stack of our product 'PSFYBNQMF "QQ'SBNFXPSL "OHVMBS 5FTU'SBNFXPSL +BTNJOF
5FTU3VOOFS IBOENBEFUPPM #SPXTFS .BOJQVMBUPS 1VQQFUFFS $POUJOVPVT*OUFHSBUJPO 0SBDMF8FSDLFS$*
5IFSFBSFWBSJPVTXBZT 8FEPOPUJOUSPEVDFNFUIPETJOTQFDJpDMJCSBSJFT
5JQTGPSBVUPNBUFEDBQUVSF JOEFQFOEFOUPGUPPMT
1. Web browsers in your CI env 1MFBTFSFGFSXIFOZPVDSFBUF%PDLFS*NBHFT w
*GZPVXBOUVTFlSFBMzXFCCSPXTFST w :PVOFFEYWGC 9XJOEPX7JSUVBM'SBNF#V⒎FS w *GZPVXBOUUPVTF$ISPNFXJUIlIFBEMFTT w :PVOFFEYDC 9QSPUPDPM$MBOH#JOEJOHT
2. □□□□□□□□□ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ $*˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘.JH.JY˘˘˘˘˘˘˘˘˘
2. ϑΥϯτೖΕ͓ͯ͘ ϚϧνόΠτݍΛλʔήοτʹ։ൃ͍ͯ͠ΔͷͰ͋Ε $*ʹϑΥϯτΛೖΕ͓͖ͯ·͠ΐ͏ɻ ં֯ͷΩϟϓνϟը૾͕౾ͩΒ͚ʹͳΓ·͢ɻ ͏ͪͷνʔϜͰ.JH.JYϑΥϯτΛ͍ͬͯ·͢ɻ
3. Avoid “false positive” 5PHVBSBOUFFl4BNFTPVSDF TBNFJNBHFz w 4VQQSFTT$44"OJNBUJPO w &YFDVUFDBQUVSJOHBTMBUFBTQPTTJCMF
* { transition: none !important; animation: none !important; } requestIdleCallback(() => screenshot(), { timeout: 30000 });
$PNQBSFTOBQTIPUT
We’ve released a tool https://reg-viz.github.io/reg-suit/
reg-suit features SFHTVJUJOUFHSBUFTUIFGPMMPXJOHUBTLT w %FUFDUEJ⒎FSFODF w )FMQUPWJFXEJ⒎FSFODF w 6QEBUFTOBQTIPUT
Difference is not necessarily failure SFHTVJUQSPWJEFTUIJTqPX
%FNP
Demo 1. Push ~ Detection
Demo 2. Notify to reviewers
Demo 3. Review the difference
Integration with GitHub flow
(almost all) Built with JavaScript w $-* /PEFKT w
$PNQBSFJNBHFTQOHKT QJYFMNBUDI w 4UPSFJNBHFT"844%, w (JU)VC"QQ "84-BNCEB w "QPMMP(SBQI2-$MJFOU w $PNQBSJTPO3FQPSU 8FC#SPXTFS w 'SPOUFOE7VFKT w %J⒎FSFODFNBSLFST0QFO$7 8FC"TTFNCMZ
4VNNBSZ
Summary w "EWBOUBHFPGWJTVBMUFTUJOH w &OIBODFUIFNPUJWBUJPOUPXSJUFUFTUDPEFT w 3FEVDFUIFMPBEPGSFWJFXFST w SFHTVJUJTTUJMMJODPNQMFUFʜ w
8F`SFXFMDPNFZPVSGFFECBDLBOE13T
Thank you ! by @Quramy