Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Introduction to Visual Regression Testing
Yosuke Kurami
November 25, 2017
Programming
1
2.9k
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
T3 Stack and TypeScript ecosystem
quramy
3
700
apollo client / react / esm
quramy
1
39
Apollo Client useFragment
quramy
1
120
About Type Syntax Proposal
quramy
1
1.6k
GraphQLとの向き合い方2022年版
quramy
20
9.8k
Generate React Component with TypeScript AST
quramy
6
2.4k
tsconfig options best5
quramy
0
180
DIY GraphQL Codegen
quramy
0
210
TypeScript Language Service Plugin backside
quramy
0
230
Other Decks in Programming
See All in Programming
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
180
フロントエンドで 良いコードを書くために
t_keshi
3
1.6k
Swift Concurrency in GoodNotes
inamiy
4
1.3k
様々なWebアプリをAzureにデプロイする
tomokusaba
0
110
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
120
Circuit⚡
monaapk
0
200
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
440
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
110
ECテックカンファレンス2023
kspace
1
210
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
420
Ruby Pattern Matching
bkuhlmann
0
610
OSC大阪 パスワード認証は人類には早すぎる ~ IDaaSを使ったソーシャルログインのすすめ ~
authyasan
0
180
Featured
See All Featured
The Language of Interfaces
destraynor
149
21k
We Have a Design System, Now What?
morganepeng
37
5.9k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Scaling GitHub
holman
453
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
How to Ace a Technical Interview
jacobian
270
21k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
The Invisible Side of Design
smashingmag
292
48k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Gamification - CAS2011
davidbonilla
75
4.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
830
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