Introduction to Visual Regression Testing

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

Demo 1. Push ~ Detection

Demo 2. Notify to reviewers

Demo 3. Review the difference

Integration with GitHub ﬂow

(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

Introduction to Visual Regression Testing

Introduction to Visual Regression Testing

Yosuke Kurami

More Decks by Yosuke Kurami

Other Decks in Programming

Featured

Transcript