Introduction to Visual Regression Testing(JP)

nodefest 17 向け資料(日本語版)

Transcript

1. Introduction to Visual Regression Testing #nodefest ‘17
2. ࠓ೔ͷ͓୊
3. ࣗࣾϑϩϯτΤϯυ։ൃʹ
   ը૾ճؼςετΛಋೖͨ͠࿩
4. ͳͥը૾ճؼςετͳͷ͔ʁ
5. 1. Ͳ͜·ͰDOMͷassert͢Δ͔ w type: B
   ͷͱ͖ʹɺԿΛνΣοΫ͠·͔͢ʁ
 nodeName, 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. Ͳ͜·ͰDOMͷassert͢Δ͔ w BTTFSUॻ͖͗͢Δͱɺϝϯςͣ͠Β͍ʜ
 Ͱ΋BTTFSU͕গͳ͗͢Δͷ΋΋ෆ҆ʜ
   w ͦ͏ͩɺεφοϓγϣοτςετ͠Α͏ ƭ The latest snapshot (DOM String) ƭ The actual snapshot (DOM String) Update if snapshot is accepted Assertion
7. 2. ݟͨ໨΋ςετ͍ͨ͠ w Ϣʔβʔ͸Ϋϥε໊΍λά໊ʹڵຯ͕͋Δ༁͡Όͳ͍ .hoge { padding: 15px; color: #808080; border: 1px solid currentColor; } <div class="hoge"> ABCDEF </div> ݕূ͍ͨ͠ର৅ ͿͬͪΌ͚Ͳ͏Ͱ΋͍͍
8. ୳͢ʁͦΕͱ΋࡞Δʁ w ౰ॳ͸ز͔ͭͷπʔϧ΍αʔϏεͷར༻Λݕ౼͢Δ΋ɺ ྑ͍΋ͷʹग़ձ͑ͳ͔ͬͨ
   w ࣗ෼ͨͪͰ࢓૊ΈΛ࡞Δ͔͠ͳ͍ʂ
9. ໰୊Λ෼͚Δ w εφοϓγϣοτ Ωϟϓνϟը૾ ͷऔಘ
   w ϑϩϯτΤϯυͷ࣮૷ɾςετํ๏ͱີʹؔ࿈
   w εφοϓγϣοτ Ωϟϓνϟը૾ ͷൺֱ
   w ։ൃϫʔΫϑϩʔͱີʹؔ࿈
10. εφοϓγϣοτͷऔಘ
11. Ͳ͏΍࣮ͬͯ૷͠·͠ΐ͏͔ʁ
12. (ࢀߟ): πʔϧͷ૊߹Θͤྫ ιϑτ΢ΣΞελοΫͷྫ "QQ
    'SBNFXPSL "OHVMBS 5FTU
    'SBNFXPSL +BTNJOF 5FTU
    3VOOFS ࣗ࡞ #SPXTFS .BOJQVMBUPS 1VQQFUFFS $POUJOVPVT
    *OUFHSBUJPO 0SBDMF
    8FSDLFS
    $*
13. ૊Έ߹Θͤຖʹ΍Γํ͸༷ʑ
14. ΩϟϓνϟࣗಈԽͷ
    ීวతͳϙΠϯτ
15. 1. CIͰϒϥ΢βಈ͔͢ %PDLFS
    *NBHF࡞Δ࣌ͷࢀߟʹ
    w ࣮ϒϥ΢β࢖͏ύλʔϯ
    w YWGC
    9
    XJOEPXԾ૝ϑϨʔϜόοϑΝ ೖΕͱ͜͏
    w $ISPNF
    IFBEMFTT
    ࢖͏ύλʔϯ
    w YDC
    9
    QSPUPDPM
    $MBOH
    #JOEJOHT ೖΕͱ͜͏
16. 2. □□□□□□□□□ ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘
    $*˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘
    ˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘˘
    ˘˘˘˘˘˘˘˘.JH.JY˘˘˘˘˘˘˘˘˘
17. 2. ϑΥϯτೖΕ͓ͯ͘ ϚϧνόΠτݍΛλʔήοτʹ։ൃ͍ͯ͠ΔͷͰ͋Ε͹
    $*ʹ΋ϑΥϯτΛೖΕ͓͖ͯ·͠ΐ͏ɻ
    ં֯ͷΩϟϓνϟը૾͕౾෗ͩΒ͚ʹͳΓ·͢ɻ
    ͏ͪͷνʔϜͰ͸.JH.JYϑΥϯτΛ࢖͍ͬͯ·͢ɻ
18. 3. ِཅੑΛճආ͢Δ ʮಉ͡ιʔείʔυ͸ಉ͡ը૾ʯΛอূ͢Δ5JQT
    w $44Ξχϝʔγϣϯͷ཈ࢭ
    w Ωϟϓνϟऔಘ͸ ͳΔ΂͘ ࠷ޙʹ࣮ߦ͢Δ
 * { transition: none !important; animation: none !important; } requestIdleCallback(() => screenshot(), { timeout: 30000 });
19. εφοϓγϣοτͷൺֱ
20. πʔϧΛ࡞੒ https://reg-viz.github.io/reg-suit/
21. reg-suitͷಛ௃ ը૾εφοϓγϣοτςετʹ͓͚Δ
    w ࠩ෼ݕ஌
    w ൺֱ݁Ռͷදࣔ
    w εφοϓγϣοτͷߋ৽
    Λ౷߹
22. ʮࠩ෼ൃੜ = ࣦഊʯͱ͸ݶΒͳ͍ ͜ͷϑϩʔΛ؆୯ʹ࣮ݱ͢ΔͨΊͷπʔϧ
23. αϯϓϧͰݟͯΈΑ͏
24. Demo 1. Push ~ ࠩ෼ݕ஌
25. Demo 2. ϨϏϡΞ΁௨ୡ
26. Demo 3. ࠩ෼ͷ֬ೝ
27. GitHubϑϩʔͱͷ౷߹
28. (΄΅) JavaScriptͰͰ͖͍ͯΔ w $-* /PEFKT 
    w ը૾ࠩ෼ͷݕग़
    QOHKT
    
    QJYFMNBUDI
    w ը૾ͷอଘ
    "844%,
    w (JU)VC
    "QQ "84
    -BNCEB 
    w "QPMMP
    (SBQI2-
    $MJFOU
    w ൺֱϨϙʔτ 8FC
    #SPXTFS 
    w ϑϩϯτΤϯυ
    7VFKT
    w ࠩ෼৘ใϚʔΩϯά
    0QFO$7 8FC"TTFNCMZ
29. ·ͱΊ
30. ·ͱΊ w ΍ͬͯͯྑ͔ͬͨը૾ςετ
    w ςετΛॻ͘Ϟνϕʔγϣϯ޲্
    w ϨϏϡʔෛՙͷܰݮ
    w SFHTVJU͸·ͩ·ͩվྑͷ༨஍͋Γʜ
    w ϑΟʔυόοΫ
    
    13ͳͲ͓଴͓ͪͯ͠Γ·͢
31. Thank you ! by @Quramy