Test SvelteKit with Playwright 🧪 LIVE Coding & Chill

Описание: Let’s BDD / e2e test our SvelteKit app with Playwright, and get more confidence against breaking changes!

You may find my video on testing SvelteKit with Vitest helpful, but it’s not required to watch this stream 🙂:    • 🧪 Test SvelteKit with TDD & VITEST 🧪  

Agenda:

✅ What’s Playwright & why use it? https://playwright.dev/
✅ Playwright setup with the SvelteKit wizard
✅ Adding Playwright to an existing app
✅ Recommended settings!
✅ playwright-testing-library vs Playwright selectors? https://playwright.dev/docs/selectors...
✅ Debug mode and recommended workflow with the Playwright VSCode plugin https://github.com/microsoft/playwrig...
❌ BDDing a Svelte component
❌ Playwright Component Testing? https://playwright.dev/docs/test-comp...
❌ Automating Authentication? https://playwright.dev/docs/auth

Click around yourself: https://techy.cat

See the code: https://github.com/jmagrippis/techy-cat

— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Playwright: https://playwright.dev/

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

My own website: https://magrippis.com/

Search for `@jmagrippis` to find me on socials like Discord, Instagram & Twitter!

Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌

--
TIMESTAMPS
--
0:00 - Hello and welcome 👋
1:54 - Agenda: What's Playwright, what will we be doing today?
6:20 - Setup for a brand new app, with the SvelteKit Wizard
13:30 - Context about Techy Cat, the app we made last stream
15:05 - Setup Playwright in an existing app
16:40 - Using VSCode to install Playwright
19:50 - Noting potential conflict with runners like Jest or Vitest
25:00 - Fixing test name conflict by setting up Vite to `include` only `.test.` files
27:10 - Let's run some Playwright tests! Adding a `package.json` script
29:28 - Running tests in VSCode with the Playwright plugin (fave way)
32:00 -`navigation smoke test`: amending the sample test for our use case
34:10 - `baseUrl` and other Playwright config options
36:35 - extra option for capturing video!
41:00 - "Testing Library" overview for meaningful tests
44:30 - "Native" Playwright way to test with Locator, but with Testing Library principles
55:20 - New `package.json` script to run Playwright in the helpful Debug mode
57:45 - Slow-Mo for more "human-like" runs!
1:02:15 - BREAK / chat
1:06:00 - Recap what we've done so far
1:15:35 - Setting up our Github Action
1:19:20 - Pull Request to trigger deployment & Playwright Github Action
1:21:00 - Run failure and debugging! (check the repo for a setup which works 😅)
1:29:08 - Let's talk about Automated Authentication / testing auth states!
1:49:20 - Recap, outro chat & goodbyes!