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
TypeScript LSP の今までとこれから
quramy
1
780
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
630
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.4k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Other Decks in Programming
See All in Programming
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
250
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
220
型で語るカタ
irof
0
800
AI Ramen Fight
yusukebe
0
110
Jakarta EE Meets AI
ivargrimstad
0
270
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
slogパッケージの深掘り
integral0515
0
120
コーディングエージェント概観(2025/07)
itsuki_t88
0
130
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
14k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
Featured
See All Featured
Code Review Best Practice
trishagee
69
19k
A better future with KSS
kneath
238
17k
The Language of Interfaces
destraynor
158
25k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Scaling GitHub
holman
461
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Why Our Code Smells
bkeepers
PRO
337
57k
Producing Creativity
orderedlist
PRO
346
40k
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