Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PlaywrightによるSvelteコンポーネントテスト

kubotak
October 27, 2022

 PlaywrightによるSvelteコンポーネントテスト

Nextbeat Tech Bar:SvelteKit導入企業2社による本音LT会

kubotak

October 27, 2022
Tweet

More Decks by kubotak

Other Decks in Programming

Transcript

  1. Copyright© M&AΫϥ΢υ
    PlaywrightʹΑΔ
    Svelteίϯϙʔωϯτςετ
    Nextbeat Tech BarɿSvelteKitಋೖاۀ2ࣾʹΑΔຊԻLTձ /
    Kenjiro Kubota

    View Slide

  2. Copyright© M&AΫϥ΢υ
    index
    ● SvelteKitͰͷίϯϙʔωϯτͷ࡞Γํ
    ● PlaywrightʹΑΔίϯϙʔωϯτͷςετ
    ࠓ೔࿩͢͜ͱ
    ● SvelteɺSvelteKitͷৄࡉ࢓༷
    ● SvelteKitΛ࠾༻ͨ͠࿩
    ࠓ೔࿩͞ͳ͍͜ͱ

    View Slide

  3. Copyright© M&AΫϥ΢υ
    SvelteKitಋೖʹؔͯ͠ͷ࿩͸ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022
    Ͱ͓࿩͠·͢ɻ

    View Slide

  4. Copyright© M&AΫϥ΢υ
    Profile
    ٱอా ݡೋ࿕
    kubotak-is
    kubotak_public
    kenjiro.kubota
    גࣜձࣾM&AΫϥ΢υॴଐ
    TypeScript
    PHP
    https://kubotak.page
    ϓϩϑΣογϣφϧWebϓϩάϥϛϯά Laravel (ڞஶ)
    Ѫݘɿ౾ࣲ

    View Slide

  5. Copyright© M&AΫϥ΢υ
    ٻਓ޿ࠂαΠτͷΑ͏ͳM&AμΠϨΫτϚονϯά
    5
    ങ͍ख
    ɾҊ݅ใु͸M&A੒ޭใुͷΈ
    ɾ࠷௿ख਺ྉͳ͠
    ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ
    ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬
    ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ
    ɾજࡏ૚ʹ΋Ϧʔν͕Մೳ
    ख਺ྉແ

    ※ϓϥοτϑΥʔϜҊ݅ͷ৔߹

    ചΓख
    1.ܝࡌ͢Δ
    ɾങ͍खͷM&AχʔζΛࣗΒௐ΂Δ͜ͱ͕Մೳ

    ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ

    ɾങ͍खͷM&A୲౰ऀʹ௚઀ίϯλΫτΛͱΕΔ

    ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ
    2.ΦϑΝʔ͢Δ
    M&Aɾग़ࢿχʔζΛܝࡌ
    ങ͍खͷϝϦοτ ചΓखͷϝϦοτ
    ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ
    ʓʓྖҬͷձࣾΛ
    ืू͠·͢
    ͜ͷձࣾͱҰॹʹ
    ΍͍͖͍ͬͯͨʂ
    5
    PR

    View Slide

  6. Copyright© M&AΫϥ΢υ
    Svelteͱ͸ʁ
    Svelte
    ● Write less code
    ○ গͳ͍هड़
    ● No virtual DOM
    ○ Ϗϧυ࣌ʹVanilla JSʹίϯύΠϧ
    ● Truly reactive
    ○ એݴతͳ state ۦಈܕͷίʔυΛॻ͘ඞཁ͕ͳ͍
    React΍Vue.jsʹྨ͢ΔUIߏஙͷͨΊͷίϯϙʔωϯτϑϨʔϜϫʔΫ
    feature

    View Slide

  7. Copyright© M&AΫϥ΢υ
    SvelteKitͱ͸ʁ
    SvelteKit
    SvelteΛϕʔεͱͨ͠WebΞϓϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔϜϫʔΫ
    ● Next.js (React)
    ● Nuxt (Vue.js)
    Similar
    ※SvelteKit͸Svelteͱಉ͡ίϛϡχςΟ͕؅ཧ͍ͯ͠Δ఺Ͱ্هͱҟͳΔ

    View Slide

  8. Copyright© M&AΫϥ΢υ
    ࠃ಺ࣄྫ
    ͡Ό͕Γ͜ͷಛઃαΠτ͕SvelteKitͰ࡞ΒΕͯΔΈ͍ͨͰ͢ʂ
    https://www.calbee.co.jp/agerico/jagaricocomic/

    View Slide

  9. Copyright© M&AΫϥ΢υ
    SvelteKitͷجຊతͳσΟϨΫτϦߏ੒

    View Slide

  10. Copyright© M&AΫϥ΢υ
    SvelteKitͷجຊతͳσΟϨΫτϦߏ੒
    ΞϓϦέʔγϣϯͷίʔυ͸جຊతʹ͸
    src഑Լʹ࡞੒͢Δ
    ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ

    View Slide

  11. Copyright© M&AΫϥ΢υ
    SvelteKitͷجຊతͳσΟϨΫτϦߏ੒
    ϧʔςΟϯά͸ϑΝΠϧγεςϜϕʔε
    ※ϧʔϧ͸ಛघͳͨΊৄ͘͠͸υΩϡϝϯτΛࢀর͍ͩ͘͞
    ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ

    View Slide

  12. Copyright© M&AΫϥ΢υ
    SvelteKitͷجຊతͳσΟϨΫτϦߏ੒
    ࡞੒࣌ʹҎԼΛબ୒͢ΔͱPlaywrightʹ
    ΑΔςετ͕ॳظಋೖ͞ΕΔ
    ✔ Add Playwright for browser testing? … No / Yes
    ※Playwrightʹ͍ͭͯ͸ޙ൒Ͱ͓࿩͠·͢
    ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ

    View Slide

  13. Copyright© M&AΫϥ΢υ
    🤔ίϯϙʔωϯτ͸Ͳ͜ʁ

    View Slide

  14. Copyright© M&AΫϥ΢υ
    src/libʹ$libΤΠϦΞε͕ுΒΕ͍ͯͯɺίϯϙʔωϯτ͸͜ͷதʹஔ͘
    ͷ͕SvelteKitྲྀͬΆ͍
    ※ެࣜυΩϡϝϯτΑΓ

    View Slide

  15. Copyright© M&AΫϥ΢υ
    ΍ͬͯΈΑ͏🚀

    View Slide

  16. Copyright© M&AΫϥ΢υ
    srcσΟϨΫτϦ഑Լʹlib/componentsΛ࡞੒

    View Slide

  17. Copyright© M&AΫϥ΢υ
    routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠

    View Slide

  18. Copyright© M&AΫϥ΢υ
    routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠
    $libΤΠϦΞε
    Ͱݺͼग़͠

    View Slide

  19. Copyright© M&AΫϥ΢υ
    ϒϥ΢βͰݟΔͱ͜Μͳײ͡👍

    View Slide

  20. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτͷςετ

    View Slide

  21. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτͷςετ
    M&AΫϥ΢υͰ͸ҎԼͷ2ͭͷςετΛ࣮ࢪ
    ● Playwright
    ○ ίϯϙʔωϯτͷϦάϨογϣϯςετ
    ● Vitest
    ○ APIͷmock͕ඞཁͳςετ

    View Slide

  22. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτͷςετ
    M&AΫϥ΢υͰ͸ҎԼͷ2ͭͷςετΛ࣮ࢪ
    ● Playwright
    ○ ίϯϙʔωϯτͷϦάϨογϣϯςετ
    ● Vitest
    ○ APIͷmock͕ඞཁͳςετ
    ࠓ೔͸ͪ͜Βʹ͍ͭͯ঺հ

    View Slide

  23. Copyright© M&AΫϥ΢υ
    Playwright
    Cypress΍PuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ
    ● MicrosoftͷOSSʢݩPuppeteerνʔϜʣ
    ● Chromium,firefox,webkitʹΑΔΫϩεϒϥ΢βͷςε
    τ͕Մೳ
    ● ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ
    ϦάϨογϣϯςετ΋Մೳ
    feature

    View Slide

  24. Copyright© M&AΫϥ΢υ
    Playwright
    Cypress΍PuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ
    ● MicrosoftͷOSSʢݩPuppeteerνʔϜʣ
    ● Chromium,firefox,webkitʹΑΔΫϩεϒϥ΢βͷςε
    τ͕Մೳ
    ● ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ
    ϦάϨογϣϯςετ΋Մೳ
    feature
    ࠓ೔͸ͪ͜Βʹ͍ͭͯ঺հ

    View Slide

  25. Copyright© M&AΫϥ΢υ
    ΍ͬͯΈΑ͏🚀

    View Slide

  26. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτςετ༻ͷґଘͱઃఆΛಋೖ
    ϑϨʔϜϫʔΫબ୒ʹSvelte͕͋Δʂ

    View Slide

  27. Copyright© M&AΫϥ΢υ
    ίϚϯυΛ࣮ߦ͢ΔͱҎԼ͕มߋ͞ΕΔ
    ● @playwright/experimental-ct-svelte͕Πϯετʔϧ͞ΕΔ
    ● npm scriptsʹtest-ctίϚϯυ͕௥Ճ͞ΕΔ
    ● ϓϩδΣΫτϧʔτʹplaywright/index.html͕࡞੒͞ΕΔ
    ● ϓϩδΣΫτϧʔτʹplaywright-ct.config.ts͕࡞੒͞ΕΔ

    View Slide

  28. Copyright© M&AΫϥ΢υ
    ઌఔ࡞੒ͨ͠ίϯϙʔωϯτΛςετ
    tests/Test.spec.ts

    View Slide

  29. Copyright© M&AΫϥ΢υ
    $libͷΤΠϦΞεύε͕ղܾͰ͖ͳ͍ͷͰplaywright-ct.config.tsʹҎ
    ԼΛ௥Ճ

    View Slide

  30. Copyright© M&AΫϥ΢υ
    npm run test-ctΛ࣮ߦ͢Δ
    ※ॳճ࣮ߦ࣌͸֤ϒϥ΢βͷμ΢ϯϩʔυ͕࣮ߦ͞ΕΔ

    View Slide

  31. Copyright© M&AΫϥ΢υ
    npm run test-ctΛ࣮ߦ͢Δ
    ※ॳճ࣮ߦ࣌͸֤ϒϥ΢βͷμ΢ϯϩʔυ͕࣮ߦ͞ΕΔ
    3ϒϥ΢βͰςετ͍ͯ͠ΔͷͰ
    3passedʹͳΔ

    View Slide

  32. Copyright© M&AΫϥ΢υ
    npx playwright show-reportΛ࣮ߦ͢ΔͱϨϙʔτ͕ݟΕΔ

    View Slide

  33. Copyright© M&AΫϥ΢υ
    ϏδϡΞϧϦάϨογϣϯςετ΋΍ͬͯΈΑ͏🎭

    View Slide

  34. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτ͕εΫϦʔϯγϣοτͱҰக͢Δ͜ͱΛςετ͢Δ

    View Slide

  35. Copyright© M&AΫϥ΢υ
    npm scriptsʹεΫϦʔϯγϣοτऔಘίϚϯυΛ௥Ճ
    ࣮ߦ͢ΔͱεΫϦʔϯγϣοτ͕ग़ྗ͞ΕΔ

    View Slide

  36. Copyright© M&AΫϥ΢υ
    σϑΥϧτͰ͸ϧʔτσΟϨΫτϦ͔Β__snapshots__σΟϨΫτϦ
    ʹεΫϦʔϯγϣοτ͕อଘ͞ΕΔ
    ͜ͷεΫϦʔϯγϣοτͱςετ࣌ʹҰக͢Δ͔ΛνΣοΫ͢Δɻ
    ίϯϙʔωϯτʹࠩ෼͕͋ΔͱςετࣦഊʹͳΔ

    View Slide

  37. Copyright© M&AΫϥ΢υ
    εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠৔߹

    View Slide

  38. Copyright© M&AΫϥ΢υ
    εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠৔߹
    ςετର৅͕ڱ͍ͷͰςΩετϨϕϧ
    ͷςετͰ͸௨աͯ͠͠·͏

    View Slide

  39. Copyright© M&AΫϥ΢υ
    ActualͰࣦഊΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ

    View Slide

  40. Copyright© M&AΫϥ΢υ
    ࠩ෼͕খ͍͞৔߹͸DiffͰࡉ͔֬͘ೝͰ͖Δ

    View Slide

  41. Copyright© M&AΫϥ΢υ
    🚀 Pros
    ● ࢼݧతͰ͸͋Δ͕े෼ར༻Ͱ͖Δ
    ● PR࣌ʹίϯϙʔωϯτͷεΫϦʔϯγϣοτ͕͋ΔͱϨϏϡʔ͠
    ΍͍͢
    ● Ϋϩεϒϥ΢βͰεΫϦʔϯγϣοτ͕ࡱΒΕΔͷͰಛఆͷϒϥ
    ΢β่Εʹࣄલʹؾͮ͘͜ͱ͕Ͱ͖Δ
    ● ςΩετϨϕϧͷςετʹൺ΂ͯεΫγϣςετ͸ίϯϙʔωϯ
    τશମΛ୲อͰ͖Δ

    View Slide

  42. Copyright© M&AΫϥ΢υ
    🫠 Cons
    ● jsdomʹΑΔςετʹൺ΂Δͱ࣮ߦ͕͔͔࣌ؒΔ
    ● ϦϙδτϦʹը૾Λͦͷ··ஔ͍͍ͯΔͷͰকདྷతͳ༰ྔ͕ؾʹ
    ͳΔ
    ● CIͰ࣮ߦ͢Δ৔߹ɺࣄલʹϒϥ΢β͕Πϯετʔϧ͞ΕͨDocker
    ΠϝʔδΛϗεςΟϯά͓ͯ͘͠ͳͲޮ཰Α͘࢖͏ͨΊʹҰखؒ
    ඞཁ

    View Slide

  43. Copyright© M&AΫϥ΢υ
    Thanks for watching this :)

    View Slide