Playwrightから始めるVisual Regression Testingのススメ by とっと

by totto2727

Slide 1

Slide 1 text

1MBZXSJHIU͔Β࢝ΊΔ7JTVBM 3FHSFTTJPO5FTUJOHͷεεϝ גࣜձࣾΏΊΈͱͬͱ

Slide 2

Slide 2 text

ࣗݾ঺հ w ͱͬͱ w 9ͱ(JU)VCɿ!UPUUP w גࣜձࣾΏΊΈॴଐ w ೖࣾ೥໨ͷϑϩϯτΤϯυΤϯδχΞ w ϏδϡΞϧϦάϨογϣϯςετͷܦݧɿ൒೥͙Β͍

Slide 3

Slide 3 text

ձࣾ঺հ ΦʔϓϯϋϯυϒοΫ

Slide 4

Slide 4 text

͋Δ೔ͷ࡞ۀ ʓʓϖʔδͷͨΊʹʓʓίϯϙʔωϯτΛमਖ਼ʂ ʢʓʓϖʔδΛ֬ೝͯ͠ʜʣ मਖ਼͞Ε͍ͯΔɺϤγοʂ

Slide 5

Slide 5 text

਺೔ޙʜ ʢमਖ਼ͨ͠ϖʔδͱ͸ผͷϖʔδͷʣ 6*่͕Ε͍ͯ·͢ʂʂʂ

Slide 6

Slide 6 text

ݪҼ w ίϯϙʔωϯτઃܭ͕ྑ͘ͳ͔ͬͨ w γεςϜ΁ͷཧղ౓͕௿͔ͬͨ w ࣮૷ɺϨϏϡʔͷࡍʹ֬ೝ͕ෆे෼ͩͬͨ

Slide 7

Slide 7 text

ͱ͸͍͑ ຖճશϖʔδ֬ೝ͢Δͷ͸΍Γͨ͘ͳ͍ʂʂʂ ʢ޻਺తʹ΋ݫ͍͠ʣ

Slide 8

Slide 8 text

ͦ͏ͩʂςετͰղܾ͠Α͏ʂ

Slide 9

Slide 9 text

ϑϩϯτΤϯυͷ৭ʑͳςετ w ൣғผ w ੩తղੳ w ୯ମςετ w ݁߹ςετ w &&ςετ w ໨తผ w ΠϯλϥΫγϣϯςετ w ΞΫηγϏϦςΟςετ w εφοϓγϣοτςετ w 6*ίϯϙʔωϯτΤΫεϓϩʔϥ w ϏδϡΞϧϦάϨογϣϯςετ w FUDʜ ࢀߟࢿྉɿ w ຋༁ʮϑϩϯτΤϯυΞϓϦέʔγϣϯͷ੩తɺ୯ମɺ݁߹ɺ&&ςετʯCZ,FOU$%PEET w &&ςετͷఆٛΛ஌Γ͍ͨ

Slide 10

Slide 10 text

ϏδϡΞϧϦάϨογϣϯςετ

Slide 11

Slide 11 text

ϏδϡΞϧϦάϨογϣϯςετ w Ҏ߱Ͱ͸735ͱলུ͠·͢ w ը૾ͷൺֱΛߦ͍ࠩ෼Λݕग़͢Δςετ w 6*ͷมߋʢ$44ؚΉʣ΋ݕ஌Ͱ͖Δ

Slide 12

Slide 12 text

735ͷ͓͓·͔ͳྲྀΕ 8FCαΠτͷ഑৴؀ڥͷ্ཱͪ͛ εφοϓγϣοτऔಘ લճͷը૾ͷൺֱ Ϩϙʔτͷੜ੒

Slide 13

Slide 13 text

ҙ֎ͱߟ͑Δ͜ͱ͕ଟ͍ʜ w ࡱӨ͢Δର৅ w ը૾ͷอଘ৔ॴ w εφοϓγϣοτςετͷߋ৽λΠϛϯά w ϨϏϡʔମ੍ w $*$%

Slide 14

Slide 14 text

ͱ͍͏͜ͱͰ͓ࢼ͠ΩοτΛ࡞Γ·ͨ͠ʂ QMBZXSJHIUWSUIBOETPO w ߏ੒ w ࡱӨ͢Δର৅ɿϖʔδ୯Ґ w ը૾ͷอଘ৔ॴɿ(JUϦϙδτϦ w $*$% w 1MBZXSJHIU w (JU)VC"DUJPOT(JU)VC1BHFT w "DUJPOTͰ6QEBUFδϣϒΛ࣮ߦ͢Δͱ13͕ੜ੒͞ΕΔ

Slide 15

Slide 15 text

1MBZXSJHIU w &&ςεςΟϯάϑϨʔϜϫʔΫ w ϒϥ΢βΛίʔυϕʔεͰૢ࡞Ͱ͖Δ w +BWB4DSJQUҎ֎ʹ΋1ZUIPOͳͲ৭ʑͳ࣮૷͕͋Γ·͢ w ϘλϯͷΫϦοΫ΍εΫϩʔϧɺ։ൃऀπʔϧͷૢ࡞ͳͲ৭ʑͰ͖Δ w ༷ʑͳϒϥ΢βʹରԠ͍ͯ͠ΔଞɺσόΠεͷϓϦηοτ΋ଟ͘ϓϩδΣ Ϋτʹ߹ΘͤͯॊೈʹςετΛ࣮ݱͰ͖Δ

Slide 16

Slide 16 text

(JU)VC"DUJPOT w $*$%ύΠϓϥΠϯΛఏڙ͢ΔΫϥ΢υαʔϏεͷҰͭ w (JU)VCͱີ઀ʹ࿈ܞ͍ͯ͠Δ w ϦϙδτϦपΓͷτϦΨʔ͕ඇৗʹ๛෋ w ϦϙδτϦ͕͋Ε͹؀ڥߏஙෆཁ w ϦϙδτϦͷૢ࡞͕༰қ w 1VCMJDϦϙδτϦͰ͋Ε͹ɺجຊతʹແ੍ݶʹར༻Մೳ

Slide 17

Slide 17 text

(JU)VC1BHFT w (JU)VCϦϙδτϦͱؔ࿈͢Δ8FCαΠτΛϗεςΟϯάͰ͖ΔαʔϏε w ࠓճ͸735ͷϨϙʔτΛϗεςΟϯά͢ΔͨΊʹར༻͠·͢ w ͭͷυϝΠϯ͔࣋ͯ͠ͳ͍ͱ͍͏ܽ఺͸͋Γ·͕͢ɺඇৗʹ͓खܰʹར ༻Ͱ͖ΔػೳͰ͢ w ಉ࣌ʹෳ਺ͷϒϥϯν͔ΒσϓϩΠ͍ͨ͠ʜʂͱ͍͏৔߹͸ɺ/FUMJGZ΍ 7FSWFMɺ$MPVE fl BSF1BHFTͳͲΛར༻͠·͠ΐ͏

Slide 18

Slide 18 text

735ͷ͓͓·͔ͳྲྀΕ 8FCαΠτͷ഑৴؀ڥͷ্ཱͪ͛ εφοϓγϣοτऔಘ લճͷը૾ͷൺֱ Ϩϙʔτͷੜ੒ 1MBZXSJHIUͷ ୲౰ൣғ πʔϧʹΑͬͯ͸ Ұ෦ʹಛԽ͍ͯ͠Δ΋ͷ΋ SFHTVJUͳͲ

Slide 19

Slide 19 text

ίʔυͱϨϙʔτ ੺͘ͳ͍ͬͯΔ ෦෼͕ࠩ෼ ϖʔδಡΈࠐΜͰ735Ͱ͢Δ ͚ͩͳΒ͜Ε͚ͩͰ͍͍ ʢ࣮ࡍ͸ΠϯλϥΫγϣϯ΍ͳΜΒ͔ͷ଴ ػ͕ڬ·Δ͜ͱ͕ଟ͍ʣ

Slide 20

Slide 20 text

ੜ੒͞Εͨ13ͱ1BHFT w Ϩϙʔτ w IUUQT UPUUPHJUIVCJP WSUIBOETPO w ߋ৽13 w IUUQTHJUIVCDPN UPUUPWSU IBOETPOQVMM

Slide 21

Slide 21 text

վળ఺৭ʑ w ίϯϙʔωϯτϨϕϧ735 w $*؀ڥͱϩʔΧϧ؀ڥΛἧ͑Δ w ଞͷ735πʔϧͷݕ౼ w ύϑΥʔϚϯε w &&ςετͱͷ࢖͍෼͚ w FUDʜ

Slide 22

Slide 22 text

ίϯϙʔωϯτϨϕϧͷ735 w ϑϧϖʔδͷ735͸࣮૷͕؆୯ͳΑ͏ʹݟ͑ͯམͱ͕݀͠Կ఺͔͋Δ w େ͖ͳࠩ෼͕ग़Δͱຊདྷݕग़͔ͨͬͨࠩ͠෼͕ຒ΋ΕΔ w දࣔ֎ͷը૾ͷಡΈࠐΈ w ίϯϙʔωϯτϨϕϧʹ෼ׂ͢Δ͜ͱͰɺΑΓৄࡉ͔࣮ͭ֬ʹ735ͷԸܙ Λड͚Δ͜ͱ͕Ͱ͖Δ

Slide 23

Slide 23 text

ίϯϙʔωϯτϨϕϧͷ735 w 1MBZXSJHIUͷίϯϙʔωϯτςετػೳʢ։ൃதʣ w ಛఆͷίϯϙʔωϯτͷΈϒϥ΢βͰϨϯμϦϯάͰ͖Δ w ࣌఺ɺ3FBDUɺ4WFMUFɺ7VFɺ4PMJEͰར༻Ͱ͖Δ w 6*ίϯϙʔωϯτΤΫεϓϩʔϥ735 w 4UPSZCPPLͳͲͱ૊Έ߹ΘͤΔ͜ͱͰ࣮ݱ͢Δ w ୅දతͳ૊Έ߹Θͤɿ4UPSZCPPLTUPSZDBQSFHTVJU

Slide 24

Slide 24 text

%PDLFSΛར༻ͨ͠735 w ͓ࢼ͠ΩοτͰ͸$*Ͱอଘͨ͠ը૾ΛϩʔΧϧͰྲྀ༻Ͱ͖·ͤΜ w $*ͷΈͰ࣮ߦ͢Δ৔߹͸໰୊ʹͳΒͳ͍Ͱ͕͢ɺϩʔΧϧͰҰ෦͚࣮ͩߦ ͍ͨ͠৔߹͸ɺϑΥϯτͳͲͰࠩ෼͕ग़ΔՄೳੑ͕ߴ͍Ͱ͢ w ϩʔΧϧͱ$*ͷ྆ํͰ735Λ࣮ߦ͢Δ৔߹͸ɺಉ͡%PDLFS*NBHFΛར༻ ͯ͠ςετ͢Δ͜ͱΛ͓͢͢Ί͠·͢ w 1MBZXSJHIUͷެࣜυΩϡϝϯτ w ೔ຊޠ؀ڥ޲͚ͷ1MBZXSJHIU%PDLFS fi MF

Slide 25

Slide 25 text

ଞͷ735πʔϧ w ۙ೥ɺ735ઐ໳ͷ༗༻ͳπʔϧɺαʔϏε͕ొ৔͍ͯ͠·͢ w Ϋϥ΢υαʔϏε w $ISPNBUJDɺ-PTU1JYFM w πʔϧ w -PTU1JYFMɺSFHTVJU ͱTUPSZDBQ w ೥ʹ7JTVBM3FHSFTTJPO5FTUJOHΛ࢝ΊΔͳΒͲΜͳબ୒ࢶ͕͋Δ͔

Slide 26

Slide 26 text

ࢀߟࢿྉͷ঺հ w ϑϩϯτΤϯυ։ൃͷͨΊͷςετೖ໳ࠓ͔ΒͰ΋஌͓͖͍ͬͯͨࣗಈς ετઓུͷඞਢ஌ࣝ w ࠓඞཁͳجૅ஌͔ࣝΒ࣮ફ·Ͱ໢ཏ͞Ε͍ͯΔ w ϥΠϒϥϦ΍πʔϧͷ࢓༷มߋ౳΋͋ΔͨΊɺಡΉͳΒࠓ͕͓͢͢Ί w ϏδϡΞϧϦάϨογϣϯςετπʔϧ̐બʂϢʔβʔ͕ޠΔ֤πʔϧͷ ϝϦοτ w ࠓճ঺հ͍ͯ͠ͳ͍1MBZXSJHIUҎ֎ͷπʔϧ͕঺հ͞Ε͍ͯ·͢

Slide 27

Slide 27 text

Πϕϯτ঺հ w ϑϩϯτΤϯυΧϯϑΝϨϯε๺ւ ಓΞϑλʔτʔΫ0OMJOF w ΏΊΈº-BZFS9ºαΠϘ΢ζࣾ߹ ಉϑϩϯτΤϯυΧϯϑΝϨϯε๺ ւಓޙ໷ࡇˏ౦ژ

Slide 28

Slide 28 text

ऴΘΓͰ͢ʂ ͝੒௕͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ