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

フロントエンドカンファレンス北海道2024の5分枠で発表した内容です！

Transcript

1. 1MBZXSJHIU͔Β࢝ΊΔ7JTVBM
   3FHSFTTJPO
   5FTUJOHͷεεϝ גࣜձࣾΏΊΈͱͬͱ
2. ࣗݾ঺հ w ͱͬͱ
   w 9ͱ(JU)VCɿ!UPUUP
   w גࣜձࣾΏΊΈॴଐ
   w ೖࣾ೥໨ͷϑϩϯτΤϯυΤϯδχΞ
   w ϏδϡΞϧϦάϨογϣϯςετͷܦݧɿ൒೥͙Β͍
3. ձࣾ঺հ ΦʔϓϯϋϯυϒοΫ
4. ͋Δ೔ͷ࡞ۀ ʓʓϖʔδͷͨΊʹʓʓίϯϙʔωϯτΛमਖ਼ʂ ʢʓʓϖʔδΛ֬ೝͯ͠ʜʣ
   मਖ਼͞Ε͍ͯΔɺϤγοʂ
5. ਺೔ޙʜ ʢमਖ਼ͨ͠ϖʔδͱ͸ผͷϖʔδͷʣ
   6*่͕Ε͍ͯ·͢ʂʂʂ
6. ݪҼ w ίϯϙʔωϯτઃܭ͕ྑ͘ͳ͔ͬͨ
   w γεςϜ΁ͷཧղ౓͕௿͔ͬͨ
   w ࣮૷ɺϨϏϡʔͷࡍʹ֬ೝ͕ෆे෼ͩͬͨ
7. ͱ͸͍͑ ຖճશϖʔδ֬ೝ͢Δͷ͸΍Γͨ͘ͳ͍ʂʂʂ
   ʢ޻਺తʹ΋ݫ͍͠ʣ
8. ͦ͏ͩʂςετͰղܾ͠Α͏ʂ
9. ϑϩϯτΤϯυͷ৭ʑͳςετ w ൣғผ
   w ੩తղੳ
   w ୯ମςετ
   w ݁߹ςετ
   w &&ςετ w ໨తผ
   w ΠϯλϥΫγϣϯςετ
   w ΞΫηγϏϦςΟςετ
   w εφοϓγϣοτςετ
   w 6*ίϯϙʔωϯτΤΫεϓϩʔϥ
   w ϏδϡΞϧϦάϨογϣϯςετ
   w FUDʜ ࢀߟࢿྉɿ
   w ຋༁ʮϑϩϯτΤϯυΞϓϦέʔγϣϯͷ੩తɺ୯ମɺ݁߹ɺ&&ςετʯ
   CZ
   ,FOU
   $
   %PEET
   w &&ςετͷఆٛΛ஌Γ͍ͨ
10. ϏδϡΞϧϦάϨογϣϯςετ
11. ϏδϡΞϧϦάϨογϣϯςετ w Ҏ߱Ͱ͸735ͱলུ͠·͢
    w ը૾ͷൺֱΛߦ͍ࠩ෼Λݕग़͢Δςετ
    w 6*ͷมߋʢ$44ؚΉʣ΋ݕ஌Ͱ͖Δ
12. 735ͷ͓͓·͔ͳྲྀΕ 8FCαΠτͷ഑৴؀ڥͷ্ཱͪ͛ εφοϓγϣοτऔಘ લճͷը૾ͷൺֱ Ϩϙʔτͷੜ੒
13. ҙ֎ͱߟ͑Δ͜ͱ͕ଟ͍ʜ w ࡱӨ͢Δର৅
    w ը૾ͷอଘ৔ॴ
    w εφοϓγϣοτςετͷߋ৽λΠϛϯά
    w ϨϏϡʔମ੍
    w $*$%
14. ͱ͍͏͜ͱͰ͓ࢼ͠ΩοτΛ࡞Γ·ͨ͠ʂ QMBZXSJHIUWSUIBOETPO w ߏ੒
    w ࡱӨ͢Δର৅ɿϖʔδ୯Ґ
    w ը૾ͷอଘ৔ॴɿ(JUϦϙδτϦ
    w $*$%
    w 1MBZXSJHIU
    w (JU)VC
    "DUJPOT
    
    (JU)VC
    1BHFT
    w "DUJPOTͰ6QEBUFδϣϒΛ࣮ߦ͢Δͱ13͕ੜ੒͞ΕΔ
15. 1MBZXSJHIU w &&ςεςΟϯάϑϨʔϜϫʔΫ
    w ϒϥ΢βΛίʔυϕʔεͰૢ࡞Ͱ͖Δ
    w +BWB4DSJQUҎ֎ʹ΋1ZUIPOͳͲ৭ʑͳ࣮૷͕͋Γ·͢
    w ϘλϯͷΫϦοΫ΍εΫϩʔϧɺ։ൃऀπʔϧͷૢ࡞ͳͲ৭ʑͰ͖Δ
    w ༷ʑͳϒϥ΢βʹରԠ͍ͯ͠ΔଞɺσόΠεͷϓϦηοτ΋ଟ͘ϓϩδΣ Ϋτʹ߹ΘͤͯॊೈʹςετΛ࣮ݱͰ͖Δ
16. (JU)VC
    "DUJPOT w $*$%ύΠϓϥΠϯΛఏڙ͢ΔΫϥ΢υαʔϏεͷҰͭ
    w (JU)VCͱີ઀ʹ࿈ܞ͍ͯ͠Δ
    w ϦϙδτϦपΓͷτϦΨʔ͕ඇৗʹ๛෋
    w ϦϙδτϦ͕͋Ε͹؀ڥߏஙෆཁ
    w ϦϙδτϦͷૢ࡞͕༰қ
    w 1VCMJDϦϙδτϦͰ͋Ε͹ɺجຊతʹແ੍ݶʹར༻Մೳ
17. (JU)VC
    1BHFT w (JU)VCϦϙδτϦͱؔ࿈͢Δ8FCαΠτΛϗεςΟϯάͰ͖ΔαʔϏε
    w ࠓճ͸735ͷϨϙʔτΛϗεςΟϯά͢ΔͨΊʹར༻͠·͢
    w ͭͷυϝΠϯ͔࣋ͯ͠ͳ͍ͱ͍͏ܽ఺͸͋Γ·͕͢ɺඇৗʹ͓खܰʹར ༻Ͱ͖ΔػೳͰ͢
    w ಉ࣌ʹෳ਺ͷϒϥϯν͔ΒσϓϩΠ͍ͨ͠ʜʂͱ͍͏৔߹͸ɺ/FUMJGZ΍ 7FSWFMɺ$MPVE fl BSF
    1BHFTͳͲΛར༻͠·͠ΐ͏
18. 735ͷ͓͓·͔ͳྲྀΕ 8FCαΠτͷ഑৴؀ڥͷ্ཱͪ͛ εφοϓγϣοτऔಘ લճͷը૾ͷൺֱ Ϩϙʔτͷੜ੒ 1MBZXSJHIUͷ
    ୲౰ൣғ πʔϧʹΑͬͯ͸
    Ұ෦ʹಛԽ͍ͯ͠Δ΋ͷ΋
    SFHTVJUͳͲ
19. ίʔυͱϨϙʔτ ੺͘ͳ͍ͬͯΔ ෦෼͕ࠩ෼ ϖʔδಡΈࠐΜͰ735Ͱ͢Δ ͚ͩͳΒ͜Ε͚ͩͰ͍͍
    ʢ࣮ࡍ͸ΠϯλϥΫγϣϯ΍ͳΜΒ͔ͷ଴ ػ͕ڬ·Δ͜ͱ͕ଟ͍ʣ
20. ੜ੒͞Εͨ13ͱ1BHFT w Ϩϙʔτ
    w IUUQT UPUUPHJUIVCJP WSUIBOETPO
    w ߋ৽13
    w IUUQTHJUIVCDPN UPUUPWSU IBOETPOQVMM
21. վળ఺৭ʑ w ίϯϙʔωϯτϨϕϧ735
    w $*؀ڥͱϩʔΧϧ؀ڥΛἧ͑Δ
    w ଞͷ735πʔϧͷݕ౼
    w ύϑΥʔϚϯε
    w &&ςετͱͷ࢖͍෼͚
    w FUDʜ
22. ίϯϙʔωϯτϨϕϧͷ735 w ϑϧϖʔδͷ735͸࣮૷͕؆୯ͳΑ͏ʹݟ͑ͯམͱ͕݀͠Կ఺͔͋Δ
    w େ͖ͳࠩ෼͕ग़Δͱຊདྷݕग़͔ͨͬͨࠩ͠෼͕ຒ΋ΕΔ
    w දࣔ֎ͷը૾ͷಡΈࠐΈ
    w ίϯϙʔωϯτϨϕϧʹ෼ׂ͢Δ͜ͱͰɺΑΓৄࡉ͔࣮ͭ֬ʹ735ͷԸܙ Λड͚Δ͜ͱ͕Ͱ͖Δ
23. ίϯϙʔωϯτϨϕϧͷ735 w 1MBZXSJHIUͷίϯϙʔωϯτςετػೳʢ։ൃதʣ
    w ಛఆͷίϯϙʔωϯτͷΈϒϥ΢βͰϨϯμϦϯάͰ͖Δ
    w ࣌఺ɺ3FBDUɺ4WFMUFɺ7VFɺ4PMJEͰར༻Ͱ͖Δ
    w 6*ίϯϙʔωϯτΤΫεϓϩʔϥ
    
    735
    w 4UPSZCPPLͳͲͱ૊Έ߹ΘͤΔ͜ͱͰ࣮ݱ͢Δ
    w ୅දతͳ૊Έ߹Θͤɿ4UPSZCPPL
    
    TUPSZDBQ
    
    SFHTVJU
24. %PDLFSΛར༻ͨ͠735 w ͓ࢼ͠ΩοτͰ͸$*Ͱอଘͨ͠ը૾ΛϩʔΧϧͰྲྀ༻Ͱ͖·ͤΜ
    w $*ͷΈͰ࣮ߦ͢Δ৔߹͸໰୊ʹͳΒͳ͍Ͱ͕͢ɺϩʔΧϧͰҰ෦͚࣮ͩߦ ͍ͨ͠৔߹͸ɺϑΥϯτͳͲͰࠩ෼͕ग़ΔՄೳੑ͕ߴ͍Ͱ͢
    w ϩʔΧϧͱ$*ͷ྆ํͰ735Λ࣮ߦ͢Δ৔߹͸ɺಉ͡%PDLFS
    *NBHFΛར༻ ͯ͠ςετ͢Δ͜ͱΛ͓͢͢Ί͠·͢
    w 1MBZXSJHIUͷެࣜυΩϡϝϯτ
    w ೔ຊޠ؀ڥ޲͚ͷ1MBZXSJHIU
    %PDLFS fi MF
25. ଞͷ735πʔϧ w ۙ೥ɺ735ઐ໳ͷ༗༻ͳπʔϧɺαʔϏε͕ొ৔͍ͯ͠·͢
    w Ϋϥ΢υαʔϏε
    w $ISPNBUJDɺ-PTU
    1JYFM
    w πʔϧ
    w -PTU
    1JYFMɺSFHTVJU ͱTUPSZDBQ
    w ೥ʹ7JTVBM
    3FHSFTTJPO
    5FTUJOHΛ࢝ΊΔͳΒͲΜͳબ୒ࢶ͕͋Δ͔
26. ࢀߟࢿྉͷ঺հ w ϑϩϯτΤϯυ։ൃͷͨΊͷςετೖ໳
    ࠓ͔ΒͰ΋஌͓͖͍ͬͯͨࣗಈς ετઓུͷඞਢ஌ࣝ
    w ࠓඞཁͳجૅ஌͔ࣝΒ࣮ફ·Ͱ໢ཏ͞Ε͍ͯΔ
    w ϥΠϒϥϦ΍πʔϧͷ࢓༷มߋ౳΋͋ΔͨΊɺಡΉͳΒࠓ͕͓͢͢Ί
    w ϏδϡΞϧϦάϨογϣϯςετπʔϧ̐બʂϢʔβʔ͕ޠΔ֤πʔϧͷ ϝϦοτ
    w ࠓճ঺հ͍ͯ͠ͳ͍1MBZXSJHIUҎ֎ͷπʔϧ͕঺հ͞Ε͍ͯ·͢
27. Πϕϯτ঺հ w ϑϩϯτΤϯυΧϯϑΝϨϯε๺ւ ಓΞϑλʔτʔΫ
    0OMJOF
    w ΏΊΈº-BZFS9ºαΠϘ΢ζࣾ߹ ಉϑϩϯτΤϯυΧϯϑΝϨϯε๺ ւಓޙ໷ࡇˏ౦ژ
28. ऴΘΓͰ͢ʂ
    ͝੒௕͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ