Introduction to Visual Regression Testing(JP)

Slide 1

Slide 1 text

Introduction to Visual Regression Testing #nodefest ‘17

Slide 2

Slide 2 text

ࠓ೔ͷ͓୊

Slide 3

Slide 3 text

ࣗࣾϑϩϯτΤϯυ։ൃʹ ը૾ճؼςετΛಋೖͨ͠࿩

Slide 4

Slide 4 text

ͳͥը૾ճؼςετͳͷ͔ʁ

Slide 5

Slide 5 text

1. Ͳ͜·ͰDOMͷassert͢Δ͔ w type: Bͷͱ͖ʹɺԿΛνΣοΫ͠·͔͢ʁ  nodeName, textContent, classList શ෦֬ೝ͢Δʁ

Good evening, {{name}}.

Bon soir, {{name}}.

Other...

Slide 6

Slide 6 text

1. Ͳ͜·ͰDOMͷassert͢Δ͔ w BTTFSUॻ͖͗͢Δͱɺϝϯςͣ͠Β͍ʜ  Ͱ΋BTTFSU͕গͳ͗͢Δͷ΋΋ෆ҆ʜ w ͦ͏ͩɺεφοϓγϣοτςετ͠Α͏ ƭ The latest snapshot (DOM String) ƭ The actual snapshot (DOM String) Update if snapshot is accepted Assertion

Slide 7

Slide 7 text

2. ݟͨ໨΋ςετ͍ͨ͠ w Ϣʔβʔ͸Ϋϥε໊΍λά໊ʹڵຯ͕͋Δ༁͡Όͳ͍ .hoge { padding: 15px; color: #808080; border: 1px solid currentColor; }

ABCDEF

ݕূ͍ͨ͠ର৅ ͿͬͪΌ͚Ͳ͏Ͱ΋͍͍

Slide 8

Slide 8 text

୳͢ʁͦΕͱ΋࡞Δʁ w ౰ॳ͸ز͔ͭͷπʔϧ΍αʔϏεͷར༻Λݕ౼͢Δ΋ɺ ྑ͍΋ͷʹग़ձ͑ͳ͔ͬͨ w ࣗ෼ͨͪͰ࢓૊ΈΛ࡞Δ͔͠ͳ͍ʂ

Slide 9

Slide 9 text

໰୊Λ෼͚Δ w εφοϓγϣοτ Ωϟϓνϟը૾ ͷऔಘ w ϑϩϯτΤϯυͷ࣮૷ɾςετํ๏ͱີʹؔ࿈ w εφοϓγϣοτ Ωϟϓνϟը૾ ͷൺֱ w ։ൃϫʔΫϑϩʔͱີʹؔ࿈

Slide 10

Slide 10 text

εφοϓγϣοτͷऔಘ

Slide 11

Slide 11 text

Ͳ͏΍࣮ͬͯ૷͠·͠ΐ͏͔ʁ

Slide 12

Slide 12 text

(ࢀߟ): πʔϧͷ૊߹Θͤྫ ιϑτ΢ΣΞελοΫͷྫ "QQ'SBNFXPSL "OHVMBS 5FTU'SBNFXPSL +BTNJOF 5FTU3VOOFS ࣗ࡞ #SPXTFS .BOJQVMBUPS 1VQQFUFFS $POUJOVPVT*OUFHSBUJPO 0SBDMF8FSDLFS$*

Slide 13

Slide 13 text

૊Έ߹Θͤຖʹ΍Γํ͸༷ʑ

Slide 14

Slide 14 text

ΩϟϓνϟࣗಈԽͷ ීวతͳϙΠϯτ

Slide 15

Slide 15 text

1. CIͰϒϥ΢βಈ͔͢ %PDLFS*NBHF࡞Δ࣌ͷࢀߟʹ w ࣮ϒϥ΢β࢖͏ύλʔϯ w YWGC 9XJOEPXԾ૝ϑϨʔϜόοϑΝ ೖΕͱ͜͏ w $ISPNFIFBEMFTT࢖͏ύλʔϯ w YDC 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. ِཅੑΛճආ͢Δ ʮಉ͡ιʔείʔυ͸ಉ͡ը૾ʯΛอূ͢Δ5JQT w $44Ξχϝʔγϣϯͷ཈ࢭ w Ωϟϓνϟऔಘ͸ ͳΔ΂͘ ࠷ޙʹ࣮ߦ͢Δ  * { transition: none !important; animation: none !important; } requestIdleCallback(() => screenshot(), { timeout: 30000 });

Slide 19

Slide 19 text

εφοϓγϣοτͷൺֱ

Slide 20

Slide 20 text

πʔϧΛ࡞੒ https://reg-viz.github.io/reg-suit/

Slide 21

Slide 21 text

reg-suitͷಛ௃ ը૾εφοϓγϣοτςετʹ͓͚Δ w ࠩ෼ݕ஌ w ൺֱ݁Ռͷදࣔ w εφοϓγϣοτͷߋ৽ Λ౷߹

Slide 22

Slide 22 text

ʮࠩ෼ൃੜ = ࣦഊʯͱ͸ݶΒͳ͍ ͜ͷϑϩʔΛ؆୯ʹ࣮ݱ͢ΔͨΊͷπʔϧ

Slide 23

Slide 23 text

αϯϓϧͰݟͯΈΑ͏

Slide 24

Slide 24 text

Demo 1. Push ~ ࠩ෼ݕ஌

Slide 25

Slide 25 text

Demo 2. ϨϏϡΞ΁௨ୡ

Slide 26

Slide 26 text

Demo 3. ࠩ෼ͷ֬ೝ

Slide 27

Slide 27 text

GitHubϑϩʔͱͷ౷߹

Slide 28

Slide 28 text

(΄΅) JavaScriptͰͰ͖͍ͯΔ w $-* /PEFKT w ը૾ࠩ෼ͷݕग़QOHKTQJYFMNBUDI w ը૾ͷอଘ"844%, w (JU)VC"QQ "84-BNCEB w "QPMMP(SBQI2-$MJFOU w ൺֱϨϙʔτ 8FC#SPXTFS w ϑϩϯτΤϯυ7VFKT w ࠩ෼৘ใϚʔΩϯά0QFO$7 8FC"TTFNCMZ

Slide 29

Slide 29 text

·ͱΊ

Slide 30

Slide 30 text

·ͱΊ w ΍ͬͯͯྑ͔ͬͨը૾ςετ w ςετΛॻ͘Ϟνϕʔγϣϯ޲্ w ϨϏϡʔෛՙͷܰݮ w SFHTVJU͸·ͩ·ͩվྑͷ༨஍͋Γʜ w ϑΟʔυόοΫ13ͳͲ͓଴͓ͪͯ͠Γ·͢

Slide 31

Slide 31 text

Thank you ! by @Quramy