Introduction to Visual Regression Testing

Slide 1

Slide 1 text

Introduction to Visual Regression Testing #nodefest ‘17

Slide 2

Slide 2 text

5PEBZ`TUIFNF

Slide 3

Slide 3 text

)PXXFJOUSPEVDF l7JTVBM3FHSFTTJPO5FTUz UPPVSQSPEVDU 41"

Slide 4

Slide 4 text

8IZ7JTVBM3FHSFTTJPO

Slide 5

Slide 5 text

1. How assert components ? w *Gtype: B XIBULJOEQSPQFSUZEPZPVBTTFSU   nodeName or textContent, classList

Good evening, {{name}}.

Bon soir, {{name}}.

Other...

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

2. We want to test Styles w 0VSVTFSTBSFOPUJOUFSFTUFEJO$44DMBTTOBNF .hoge { padding: 15px; color: #808080; border: 1px solid currentColor; }

ABCDEF

JOUFSFTUFE OPUJOUFSFTUFE

Slide 8

Slide 8 text

That is question:  To create or not to create w *OJUJBMMZXFUSJFETPNFTFSWJDFTPSUPPMT  )PXFWFSUIFSFXBTOPUXIBUXFXBOU w 8FEFDJEFEUPEFWFMPQPVSl7JTVBM3FHSFTTJPO 5FTUJOHzTZTUFN

Slide 9

Slide 9 text

Divide into smaller problems w $BQUVSFTOBQTIPUT TDSFFOTIPUJNBHFT w DPOTJEFSJOHJOUPl)PXJNQMFNFOUBOEUFTUz w $PNQBSFTOBQTIPUT TDSFFOTIPUJNBHFT w DPOTJEFSJOHJOUPl%FWFMPQNFOUXPSLqPXz

Slide 10

Slide 10 text

$BQUVSFTOBQTIPUT

Slide 11

Slide 11 text

Which tools do we use?

Slide 12

Slide 12 text

(e.g.) Stack of our product 'PSFYBNQMF "QQ'SBNFXPSL "OHVMBS 5FTU'SBNFXPSL +BTNJOF 5FTU3VOOFS IBOENBEFUPPM #SPXTFS .BOJQVMBUPS 1VQQFUFFS $POUJOVPVT*OUFHSBUJPO 0SBDMF8FSDLFS$*

Slide 13

Slide 13 text

5IFSFBSFWBSJPVTXBZT 8FEPOPUJOUSPEVDFNFUIPETJOTQFDJpDMJCSBSJFT

Slide 14

Slide 14 text

5JQTGPSBVUPNBUFEDBQUVSF JOEFQFOEFOUPGUPPMT

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

2. □□□□□□□□□ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ $*˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘.JH.JY˘˘˘˘˘˘˘˘˘

Slide 17

Slide 17 text

2. ϑΥϯτೖΕ͓ͯ͘ ϚϧνόΠτݍΛλʔήοτʹ։ൃ͍ͯ͠ΔͷͰ͋Ε͹ $*ʹ΋ϑΥϯτΛೖΕ͓͖ͯ·͠ΐ͏ɻ ં֯ͷΩϟϓνϟը૾͕౾෗ͩΒ͚ʹͳΓ·͢ɻ ͏ͪͷνʔϜͰ͸.JH.JYϑΥϯτΛ࢖͍ͬͯ·͢ɻ

Slide 18

Slide 18 text

3. Avoid “false positive” 5PHVBSBOUFFl4BNFTPVSDF TBNFJNBHFz w 4VQQSFTT$44"OJNBUJPO w &YFDVUFDBQUVSJOHBTMBUFBTQPTTJCMF * { transition: none !important; animation: none !important; } requestIdleCallback(() => screenshot(), { timeout: 30000 });

Slide 19

Slide 19 text

$PNQBSFTOBQTIPUT

Slide 20

Slide 20 text

We’ve released a tool https://reg-viz.github.io/reg-suit/

Slide 21

Slide 21 text

reg-suit features SFHTVJUJOUFHSBUFTUIFGPMMPXJOHUBTLT w %FUFDUEJ⒎FSFODF w )FMQUPWJFXEJ⒎FSFODF w 6QEBUFTOBQTIPUT

Slide 22

Slide 22 text

Difference is not necessarily failure SFHTVJUQSPWJEFTUIJTqPX

Slide 23

Slide 23 text

%FNP

Slide 24

Slide 24 text

Demo 1. Push ~ Detection

Slide 25

Slide 25 text

Demo 2. Notify to reviewers

Slide 26

Slide 26 text

Demo 3. Review the difference

Slide 27

Slide 27 text

Integration with GitHub ﬂow

Slide 28

Slide 28 text

(almost all) Built with JavaScript w $-* /PEFKT w $PNQBSFJNBHFTQOHKTQJYFMNBUDI 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

Slide 29

Slide 29 text

4VNNBSZ

Slide 30

Slide 30 text

Summary w "EWBOUBHFPGWJTVBMUFTUJOH w &OIBODFUIFNPUJWBUJPOUPXSJUFUFTUDPEFT w 3FEVDFUIFMPBEPGSFWJFXFST w SFHTVJUJTTUJMMJODPNQMFUFʜ w 8F`SFXFMDPNFZPVSGFFECBDLBOE13T

Slide 31

Slide 31 text

Thank you ! by @Quramy