Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PlaywrightによるSvelteコンポーネントテスト
Search
kubotak
October 27, 2022
Programming
0
3.9k
PlaywrightによるSvelteコンポーネントテスト
Nextbeat Tech Bar:SvelteKit導入企業2社による本音LT会
kubotak
October 27, 2022
Tweet
Share
More Decks by kubotak
See All by kubotak
情報漏洩させないための設計
kubotak
5
2k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
120
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
530
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
870
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.2k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
790
Felteで作る簡単フォームバリデーション
kubotak
1
1.6k
SvelteKitを本番投入してみて
kubotak
2
2.1k
Other Decks in Programming
See All in Programming
漸進。
ssssota
0
1.1k
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.1k
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
420
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
810
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
Parallel::Pipesの紹介
skaji
2
870
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.4k
Doma で目指す ORM 最適解
nakamura_to
1
160
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
Featured
See All Featured
Music & Morning Musume
bryan
47
6.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Building an army of robots
kneath
306
45k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Faster Mobile Websites
deanohume
307
31k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Code Reviewing Like a Champion
maltzj
523
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Adopting Sorbet at Scale
ufuk
76
9.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
Copyright© M&AΫϥυ PlaywrightʹΑΔ Svelteίϯϙʔωϯτςετ Nextbeat Tech BarɿSvelteKitಋೖاۀ2ࣾʹΑΔຊԻLTձ / Kenjiro Kubota
Copyright© M&AΫϥυ index • SvelteKitͰͷίϯϙʔωϯτͷ࡞Γํ • PlaywrightʹΑΔίϯϙʔωϯτͷςετ ࠓ͢͜ͱ • SvelteɺSvelteKitͷৄࡉ༷
• SvelteKitΛ࠾༻ͨ͠ ࠓ͞ͳ͍͜ͱ
Copyright© M&AΫϥυ SvelteKitಋೖʹؔͯ͠ͷϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022 Ͱ͓͠·͢ɻ
Copyright© M&AΫϥυ Profile ٱอా ݡೋ࿕ kubotak-is kubotak_public kenjiro.kubota גࣜձࣾM&AΫϥυॴଐ TypeScript
PHP https://kubotak.page ϓϩϑΣογϣφϧWebϓϩάϥϛϯά Laravel (ڞஶ) Ѫݘɿ౾ࣲ
Copyright© M&AΫϥυ ٻਓࠂαΠτͷΑ͏ͳM&AμΠϨΫτϚονϯά 5 ങ͍ख ɾҊ݅ใुM&AޭใुͷΈ ɾ࠷खྉͳ͠ ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬ ɾհۀऀΛհͣ͞ʹμΠϨΫτʹΓऔΓՄೳ
ɾજࡏʹϦʔν͕Մೳ खྉແ ྉ ※ϓϥοτϑΥʔϜҊ݅ͷ߹ ※ ചΓख 1.ܝࡌ͢Δ ɾങ͍खͷM&AχʔζΛࣗΒௐΔ͜ͱ͕Մೳ ɾհۀऀΛհͣ͞ʹμΠϨΫτʹΓऔΓՄೳ ɾങ͍खͷM&A୲ऀʹίϯλΫτΛͱΕΔ ɾհۀऀΛΘͳ͍ͷͰखྉ͕ແྉ 2.ΦϑΝʔ͢Δ M&Aɾग़ࢿχʔζΛܝࡌ ങ͍खͷϝϦοτ ചΓखͷϝϦοτ ɾհۀऀΛΘͳ͍ͷͰखྉ͕ແྉ ʓʓྖҬͷձࣾΛ ืू͠·͢ ͜ͷձࣾͱҰॹʹ ͍͖͍ͬͯͨʂ 5 PR
Copyright© M&AΫϥυ Svelteͱʁ Svelte • Write less code ◦ গͳ͍هड़
• No virtual DOM ◦ Ϗϧυ࣌ʹVanilla JSʹίϯύΠϧ • Truly reactive ◦ એݴతͳ state ۦಈܕͷίʔυΛॻ͘ඞཁ͕ͳ͍ ReactVue.jsʹྨ͢ΔUIߏஙͷͨΊͷίϯϙʔωϯτϑϨʔϜϫʔΫ feature
Copyright© M&AΫϥυ SvelteKitͱʁ SvelteKit SvelteΛϕʔεͱͨ͠WebΞϓϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔϜϫʔΫ • Next.js (React) • Nuxt
(Vue.js) Similar ※SvelteKitSvelteͱಉ͡ίϛϡχςΟ͕ཧ͍ͯ͠ΔͰ্هͱҟͳΔ
Copyright© M&AΫϥυ ࠃࣄྫ ͡Ό͕Γ͜ͷಛઃαΠτ͕SvelteKitͰ࡞ΒΕͯΔΈ͍ͨͰ͢ʂ https://www.calbee.co.jp/agerico/jagaricocomic/
Copyright© M&AΫϥυ SvelteKitͷجຊతͳσΟϨΫτϦߏ
Copyright© M&AΫϥυ SvelteKitͷجຊతͳσΟϨΫτϦߏ ΞϓϦέʔγϣϯͷίʔυجຊతʹ srcԼʹ࡞͢Δ ※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυ SvelteKitͷجຊతͳσΟϨΫτϦߏ ϧʔςΟϯάϑΝΠϧγεςϜϕʔε ※ϧʔϧಛघͳͨΊৄ͘͠υΩϡϝϯτΛࢀর͍ͩ͘͞ ※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυ SvelteKitͷجຊతͳσΟϨΫτϦߏ ࡞࣌ʹҎԼΛબ͢ΔͱPlaywrightʹ ΑΔςετ͕ॳظಋೖ͞ΕΔ ✔ Add Playwright for browser
testing? … No / Yes ※Playwrightʹ͍ͭͯޙͰ͓͠·͢ ※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυ 🤔ίϯϙʔωϯτͲ͜ʁ
Copyright© M&AΫϥυ src/libʹ$libΤΠϦΞε͕ுΒΕ͍ͯͯɺίϯϙʔωϯτ͜ͷதʹஔ͘ ͷ͕SvelteKitྲྀͬΆ͍ ※ެࣜυΩϡϝϯτΑΓ
Copyright© M&AΫϥυ ͬͯΈΑ͏🚀
Copyright© M&AΫϥυ srcσΟϨΫτϦԼʹlib/componentsΛ࡞
Copyright© M&AΫϥυ routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠
Copyright© M&AΫϥυ routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠ $libΤΠϦΞε Ͱݺͼग़͠
Copyright© M&AΫϥυ ϒϥβͰݟΔͱ͜Μͳײ͡👍
Copyright© M&AΫϥυ ίϯϙʔωϯτͷςετ
Copyright© M&AΫϥυ ίϯϙʔωϯτͷςετ M&AΫϥυͰҎԼͷ2ͭͷςετΛ࣮ࢪ • Playwright ◦ ίϯϙʔωϯτͷϦάϨογϣϯςετ • Vitest
◦ APIͷmock͕ඞཁͳςετ
Copyright© M&AΫϥυ ίϯϙʔωϯτͷςετ M&AΫϥυͰҎԼͷ2ͭͷςετΛ࣮ࢪ • Playwright ◦ ίϯϙʔωϯτͷϦάϨογϣϯςετ • Vitest
◦ APIͷmock͕ඞཁͳςετ ࠓͪ͜Βʹ͍ͭͯհ
Copyright© M&AΫϥυ Playwright CypressPuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ • MicrosoftͷOSSʢݩPuppeteerνʔϜʣ • Chromium,firefox,webkitʹΑΔΫϩεϒϥβͷςε τ͕Մೳ •
ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ ϦάϨογϣϯςετՄೳ feature
Copyright© M&AΫϥυ Playwright CypressPuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ • MicrosoftͷOSSʢݩPuppeteerνʔϜʣ • Chromium,firefox,webkitʹΑΔΫϩεϒϥβͷςε τ͕Մೳ •
ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ ϦάϨογϣϯςετՄೳ feature ࠓͪ͜Βʹ͍ͭͯհ
Copyright© M&AΫϥυ ͬͯΈΑ͏🚀
Copyright© M&AΫϥυ ίϯϙʔωϯτςετ༻ͷґଘͱઃఆΛಋೖ ϑϨʔϜϫʔΫબʹSvelte͕͋Δʂ
Copyright© M&AΫϥυ ίϚϯυΛ࣮ߦ͢ΔͱҎԼ͕มߋ͞ΕΔ • @playwright/experimental-ct-svelte͕Πϯετʔϧ͞ΕΔ • npm scriptsʹtest-ctίϚϯυ͕Ճ͞ΕΔ • ϓϩδΣΫτϧʔτʹplaywright/index.html͕࡞͞ΕΔ
• ϓϩδΣΫτϧʔτʹplaywright-ct.config.ts͕࡞͞ΕΔ
Copyright© M&AΫϥυ ઌఔ࡞ͨ͠ίϯϙʔωϯτΛςετ tests/Test.spec.ts
Copyright© M&AΫϥυ $libͷΤΠϦΞεύε͕ղܾͰ͖ͳ͍ͷͰplaywright-ct.config.tsʹҎ ԼΛՃ
Copyright© M&AΫϥυ npm run test-ctΛ࣮ߦ͢Δ ※ॳճ࣮ߦ֤࣌ϒϥβͷμϯϩʔυ͕࣮ߦ͞ΕΔ
Copyright© M&AΫϥυ npm run test-ctΛ࣮ߦ͢Δ ※ॳճ࣮ߦ֤࣌ϒϥβͷμϯϩʔυ͕࣮ߦ͞ΕΔ 3ϒϥβͰςετ͍ͯ͠ΔͷͰ 3passedʹͳΔ
Copyright© M&AΫϥυ npx playwright show-reportΛ࣮ߦ͢ΔͱϨϙʔτ͕ݟΕΔ
Copyright© M&AΫϥυ ϏδϡΞϧϦάϨογϣϯςετͬͯΈΑ͏🎭
Copyright© M&AΫϥυ ίϯϙʔωϯτ͕εΫϦʔϯγϣοτͱҰக͢Δ͜ͱΛςετ͢Δ
Copyright© M&AΫϥυ npm scriptsʹεΫϦʔϯγϣοτऔಘίϚϯυΛՃ ࣮ߦ͢ΔͱεΫϦʔϯγϣοτ͕ग़ྗ͞ΕΔ
Copyright© M&AΫϥυ σϑΥϧτͰϧʔτσΟϨΫτϦ͔Β__snapshots__σΟϨΫτϦ ʹεΫϦʔϯγϣοτ͕อଘ͞ΕΔ ͜ͷεΫϦʔϯγϣοτͱςετ࣌ʹҰக͢Δ͔ΛνΣοΫ͢Δɻ ίϯϙʔωϯτʹ͕ࠩ͋ΔͱςετࣦഊʹͳΔ
Copyright© M&AΫϥυ εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠߹
Copyright© M&AΫϥυ εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠߹ ςετର͕ڱ͍ͷͰςΩετϨϕϧ ͷςετͰ௨աͯ͠͠·͏
Copyright© M&AΫϥυ ActualͰࣦഊΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ
Copyright© M&AΫϥυ ͕ࠩখ͍͞߹DiffͰࡉ͔֬͘ೝͰ͖Δ
Copyright© M&AΫϥυ 🚀 Pros • ࢼݧతͰ͋Δ͕ेར༻Ͱ͖Δ • PR࣌ʹίϯϙʔωϯτͷεΫϦʔϯγϣοτ͕͋ΔͱϨϏϡʔ͠ ͍͢ •
ΫϩεϒϥβͰεΫϦʔϯγϣοτ͕ࡱΒΕΔͷͰಛఆͷϒϥ β่Εʹࣄલʹؾͮ͘͜ͱ͕Ͱ͖Δ • ςΩετϨϕϧͷςετʹൺͯεΫγϣςετίϯϙʔωϯ τશମΛ୲อͰ͖Δ
Copyright© M&AΫϥυ 🫠 Cons • jsdomʹΑΔςετʹൺΔͱ࣮ߦ͕͔͔࣌ؒΔ • ϦϙδτϦʹը૾Λͦͷ··ஔ͍͍ͯΔͷͰকདྷతͳ༰ྔ͕ؾʹ ͳΔ •
CIͰ࣮ߦ͢Δ߹ɺࣄલʹϒϥβ͕Πϯετʔϧ͞ΕͨDocker ΠϝʔδΛϗεςΟϯά͓ͯ͘͠ͳͲޮΑ͘͏ͨΊʹҰखؒ ඞཁ
Copyright© M&AΫϥυ Thanks for watching this :)