Introduction to Visual Regression Testing

893f54413c2bd9ba41d11d753aacaf2c?s=47 Yosuke Kurami
November 25, 2017

Introduction to Visual Regression Testing

For nodefest 17.
How introduce Visual Regression Testing into out products.

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

November 25, 2017
Tweet

Transcript

  1. Introduction to Visual Regression Testing #nodefest ‘17

  2. 5PEBZ`TUIFNF

  3. )PXXFJOUSPEVDF l7JTVBM3FHSFTTJPO5FTUz UPPVSQSPEVDU 41"

  4. 8IZ7JTVBM3FHSFTTJPO

  5. 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>
  6. 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
  7. 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
  8. That is question:
 To create or not to create w

    *OJUJBMMZXFUSJFETPNFTFSWJDFTPSUPPMT
 )PXFWFSUIFSFXBTOPUXIBUXFXBOU  w 8FEFDJEFEUPEFWFMPQPVSl7JTVBM3FHSFTTJPO 5FTUJOHzTZTUFN
  9. Divide into smaller problems w $BQUVSFTOBQTIPUT TDSFFOTIPUJNBHFT  w DPOTJEFSJOHJOUPl)PXJNQMFNFOUBOEUFTUz

    w $PNQBSFTOBQTIPUT TDSFFOTIPUJNBHFT  w DPOTJEFSJOHJOUPl%FWFMPQNFOUXPSLqPXz
  10. $BQUVSFTOBQTIPUT

  11. Which tools do we use?

  12. (e.g.) Stack of our product 'PSFYBNQMF "QQ'SBNFXPSL "OHVMBS 5FTU'SBNFXPSL +BTNJOF

    5FTU3VOOFS IBOENBEFUPPM #SPXTFS .BOJQVMBUPS 1VQQFUFFS $POUJOVPVT*OUFHSBUJPO 0SBDMF8FSDLFS$*
  13. 5IFSFBSFWBSJPVTXBZT 8FEPOPUJOUSPEVDFNFUIPETJOTQFDJpDMJCSBSJFT

  14. 5JQTGPSBVUPNBUFEDBQUVSF JOEFQFOEFOUPGUPPMT

  15. 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
  16. 2. □□□□□□□□□ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ $*˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘ ˘˘˘˘˘˘˘˘.JH.JY˘˘˘˘˘˘˘˘˘

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

  18. 3. Avoid “false positive” 5PHVBSBOUFFl4BNFTPVSDF TBNFJNBHFz w 4VQQSFTT$44"OJNBUJPO w &YFDVUFDBQUVSJOHBTMBUFBTQPTTJCMF

    * { transition: none !important; animation: none !important; } requestIdleCallback(() => screenshot(), { timeout: 30000 });
  19. $PNQBSFTOBQTIPUT

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

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

  22. Difference is not necessarily failure SFHTVJUQSPWJEFTUIJTqPX

  23. %FNP

  24. Demo 1. Push ~ Detection

  25. Demo 2. Notify to reviewers

  26. Demo 3. Review the difference

  27. Integration with GitHub flow

  28. (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
  29. 4VNNBSZ

  30. Summary w "EWBOUBHFPGWJTVBMUFTUJOH w &OIBODFUIFNPUJWBUJPOUPXSJUFUFTUDPEFT w 3FEVDFUIFMPBEPGSFWJFXFST w SFHTVJUJTTUJMMJODPNQMFUFʜ w

    8F`SFXFMDPNFZPVSGFFECBDLBOE13T
  31. Thank you ! by @Quramy