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
4.2k
PlaywrightによるSvelteコンポーネントテスト
Nextbeat Tech Bar:SvelteKit導入企業2社による本音LT会
kubotak
October 27, 2022
Tweet
Share
More Decks by kubotak
See All by kubotak
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
490
情報漏洩させないための設計
kubotak
7
2.3k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
160
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
570
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
950
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.3k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
830
Felteで作る簡単フォームバリデーション
kubotak
1
1.7k
Other Decks in Programming
See All in Programming
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
500
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
アセットのコンパイルについて
ojun9
0
120
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
590
はじめてのMaterial3 Expressive
ym223
2
260
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
1から理解するWeb Push
dora1998
7
1.9k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.1k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
310
Featured
See All Featured
Navigating Team Friction
lara
189
15k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
What's in a price? How to price your products and services
michaelherold
246
12k
How GitHub (no longer) Works
holman
315
140k
Six Lessons from altMBA
skipperchong
28
4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
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 :)