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.4k
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
フロントエンドテストの育て方
quramy
11
3k
App Router 悲喜交々
quramy
8
580
上手に付き合うコンポーネントテスト
quramy
5
2k
Patched fetch did not work
quramy
6
650
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.1k
Next.js App Router
quramy
15
3.5k
Fragment Composition of GraphQL
quramy
16
3.8k
reg-viz VRT tools
quramy
4
1.4k
NoInfer
quramy
0
270
Other Decks in Programming
See All in Programming
Vibe Codingをせずに Clineを使っている
watany
17
6.3k
エンジニアが挑む、限界までの越境
nealle
1
220
AI Agents with JavaScript
slobodan
0
240
国漢文混用体からHolloまで
minhee
1
190
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
170
Make Parsers Compatible Using Automata Learning
makenowjust
1
5.1k
Fiber Scheduler vs. General-Purpose Parallel Client
hayaokimura
1
100
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
140
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
200
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
Lambda(Python)の リファクタリングが好きなんです
komakichi
3
200
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
150
Featured
See All Featured
Visualization
eitanlees
146
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Designing Experiences People Love
moore
141
24k
Fireside Chat
paigeccino
37
3.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Site-Speed That Sticks
csswizardry
5
500
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
How GitHub (no longer) Works
holman
314
140k
Become a Pro
speakerdeck
PRO
27
5.3k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
How to Ace a Technical Interview
jacobian
276
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
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