@icarusmx/creta 1.5.12 → 1.5.13

package/lib/exercises/08-playwright-svelte-guide.md

@@ -0,0 +1,1384 @@
+# Learn Playwright with Svelte: The Gradual Guide
+
+<!-- vim: set foldmethod=marker foldlevel=0: -->
+
+## 📖 LazyVim Reading Guide {{{
+
+**Start with:** `zM` (close all folds) → Navigate with `za` (toggle fold under cursor)
+
+This document uses fold markers `{{{` and `}}}` for organized reading.
+
+}}}
+
+> **Target audience**: Developers who know Svelte and Tailwind but are new to E2E testing
+> **The confusion we'll solve**: "Wait, `input[name="email"]` looks like CSS... but I use Tailwind classes?"
+> **Time to complete**: 2-3 hours (with breaks)
+
+---
+
+## Table of Contents {{{
+
+1. [The Core Confusion (Let's Fix This First)](#the-core-confusion)
+2. [Exercise 0: HTML Attributes vs CSS Classes](#exercise-0-html-attributes-vs-css-classes)
+3. [Exercise 1: Install Playwright](#exercise-1-install-playwright)
+4. [Exercise 2: Your First Test (No Code Changes Needed)](#exercise-2-your-first-test)
+5. [Exercise 3: Understanding Selectors](#exercise-3-understanding-selectors)
+6. [Exercise 4: Testing a Svelte Component](#exercise-4-testing-a-svelte-component)
+7. [Exercise 5: Testing Svelte Runes ($state, $derived)](#exercise-5-testing-svelte-runes)
+8. [Exercise 6: Real-World Login Flow](#exercise-6-real-world-login-flow)
+9. [Exercise 7: Testing User Interactions](#exercise-7-testing-user-interactions)
+10. [Common Pitfalls & Solutions](#common-pitfalls)
+11. [Quick Reference Cheat Sheet](#cheat-sheet)
+
+}}}
+
+## The Core Confusion {{{
+
+### What You're Probably Thinking
+
+> "I saw `input[name="email"]` in the test and got anxious. I use Tailwind 4 for CSS. How does this work? Are we selecting by class names? Won't this break when I change my Tailwind classes?"
+
+**Good news**: `input[name="email"]` has **NOTHING to do with CSS or Tailwind**.
+
+Let me show you exactly what's happening.
+
+}}}
+
+## Exercise 0: HTML Attributes vs CSS Classes {{{
+
+**Goal**: Understand the difference once and for all.
+
+### Step 1: Look at a Real HTML Element
+
+Open ANY HTML file with an input. Here's an example:
+
+```html
+<input
+    name="email"
+    id="email-input"
+    type="email"
+    placeholder="Enter your email"
+    class="rounded-lg px-4 py-2 border border-gray-300 focus:ring-2"
+/>
+```
+
+### Step 2: Identify the Parts
+
+Let me color-code this for you:
+
+```html
+<input
+    name="email"           🟦 HTML Attribute (semantic identity)
+    id="email-input"       🟦 HTML Attribute (unique identifier)
+    type="email"           🟦 HTML Attribute (input behavior)
+    placeholder="..."      🟦 HTML Attribute (hint text)
+
+    class="rounded-lg px-4 py-2 border..."  🟨 CSS Classes (visual styling ONLY)
+/>
+```
+
+### Step 3: Understand What Each Does
+
+| Part | What It Is | Purpose | Can Change? |
+|------|------------|---------|-------------|
+| **`name="email"`** | HTML attribute | Form submission, identifies this field | ❌ Rarely changes |
+| **`id="email-input"`** | HTML attribute | Unique page identifier, label association | ❌ Rarely changes |
+| **`type="email"`** | HTML attribute | Browser validation behavior | ❌ Rarely changes |
+| **`class="..."`** | CSS classes | Visual appearance (Tailwind lives here) | ✅ Changes all the time |
+
+### Step 4: The Key Insight
+
+**HTML attributes** are like a person's name and ID number.
+**CSS classes** are like their clothes.
+
+```
+Person: John Smith (ID: 12345)
+Clothes today: blue shirt, jeans
+Clothes tomorrow: red shirt, shorts
+```
+
+John is still John even when clothes change.
+
+**Same with HTML:**
+
+```html
+<!-- Monday (casual styling) -->
+<input name="email" class="rounded-lg px-4 py-2" />
+
+<!-- Tuesday (redesign to minimal) -->
+<input name="email" class="rounded-xl p-2" />
+
+<!-- Wednesday (complete rebrand) -->
+<input name="email" class="glass-accent border-gold" />
+```
+
+The `name="email"` **never changed**. Only the clothes (classes) changed.
+
+### Step 5: Why This Matters for Testing
+
+When you write a Playwright test:
+
+```javascript
+await page.fill('input[name="email"]', 'test@example.com');
+```
+
+You're saying: **"Find the input element whose NAME is 'email'"**
+
+You're NOT saying: **"Find the input with these specific Tailwind classes"**
+
+This means:
+- ✅ Tests don't break when you change Tailwind classes
+- ✅ Tests don't break when you redesign your UI
+- ✅ Tests only break when you fundamentally change the HTML structure
+
+---
+
+### Quick Self-Check
+
+**Question**: If I change this line in my Svelte component:
+
+```html
+<!-- Before -->
+<input name="username" class="rounded-lg px-4 py-2" />
+
+<!-- After -->
+<input name="username" class="glass-accent p-8 border-2" />
+```
+
+Will this Playwright test still work?
+
+```javascript
+await page.fill('input[name="username"]', 'john');
+```
+
+**Answer**: <details><summary>Click to reveal</summary>YES! The `name="username"` attribute didn't change. Only the CSS classes changed. Playwright doesn't care about CSS classes when you use attribute selectors.</details>
+
+}}}
+
+## Exercise 1: Install Playwright {{{
+
+**Goal**: Get Playwright running in your SvelteKit project.
+
+### Step 1: Install Dependencies
+
+```bash
+cd your-sveltekit-project
+npm install -D @playwright/test
+```
+
+### Step 2: Install Browser
+
+```bash
+# For fast CI/CD (just Chromium)
+npx playwright install chromium
+
+# For thorough testing (all browsers)
+npx playwright install
+```
+
+### Step 3: Create Configuration
+
+Create `playwright.config.js` in your project root:
+
+```javascript
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+	// Where test files live
+	testDir: './tests/e2e',
+
+	// Run tests in parallel
+	fullyParallel: true,
+
+	// Retry failed tests (useful for flaky network issues)
+	retries: process.env.CI ? 2 : 0,
+
+	// Reporter (HTML report for debugging)
+	reporter: 'html',
+
+	use: {
+		// Base URL for page.goto('/path')
+		baseURL: 'http://localhost:5173',
+
+		// Capture trace on first retry (helps debug failures)
+		trace: 'on-first-retry',
+
+		// Screenshots and videos on failure
+		screenshot: 'only-on-failure',
+		video: 'retain-on-failure'
+	},
+
+	// Test on desktop Chrome
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] }
+		}
+	],
+
+	// Start dev server before tests
+	webServer: {
+		command: 'npm run dev',
+		url: 'http://localhost:5173',
+		reuseExistingServer: !process.env.CI,
+		timeout: 120000
+	}
+});
+```
+
+### Step 4: Add Test Scripts to package.json
+
+```json
+{
+	"scripts": {
+		"test:e2e": "playwright test",
+		"test:e2e:ui": "playwright test --ui",
+		"test:e2e:headed": "playwright test --headed"
+	}
+}
+```
+
+### Step 5: Create Test Directory
+
+```bash
+mkdir -p tests/e2e
+```
+
+### Verify Installation
+
+```bash
+npx playwright --version
+```
+
+You should see something like: `Version 1.48.0`
+
+}}}
+
+## Exercise 2: Your First Test (No Code Changes Needed) {{{
+
+**Goal**: Write a test that visits your homepage without modifying any code.
+
+### Step 1: Create Your First Test File
+
+Create `tests/e2e/homepage.e2e.js`:
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test('homepage should load', async ({ page }) => {
+	// Visit the homepage
+	await page.goto('/');
+
+	// Check that SOMETHING loaded (page title exists)
+	await expect(page).toHaveTitle(/.+/);
+
+	console.log('✅ Homepage loaded successfully!');
+});
+```
+
+### Step 2: Run the Test
+
+```bash
+npm run test:e2e
+```
+
+**What happens:**
+1. Playwright starts your dev server (`npm run dev`)
+2. Opens a browser in the background
+3. Visits `http://localhost:5173/`
+4. Checks if the page has a title
+5. Closes the browser
+6. Shows results
+
+### Step 3: Run in Visual Mode (Watch the Browser)
+
+```bash
+npm run test:e2e:headed
+```
+
+Now you'll SEE the browser open, visit your page, and close. Magic! 🪄
+
+### Step 4: Understanding What Just Happened
+
+Let's break down the test line by line:
+
+```javascript
+import { test, expect } from '@playwright/test';
+// Import testing utilities from Playwright
+
+test('homepage should load', async ({ page }) => {
+    // test() creates a test case
+    // 'homepage should load' = test name (descriptive!)
+    // async = test has asynchronous operations
+    // { page } = Playwright gives you a browser page object
+
+	await page.goto('/');
+	// goto() navigates to a URL
+	// '/' = homepage (uses baseURL from config)
+	// await = wait for navigation to complete
+
+	await expect(page).toHaveTitle(/.+/);
+	// expect() = assertion (checking if something is true)
+	// toHaveTitle() = checks the <title> tag
+	// /.+/ = regex meaning "at least one character"
+	// This passes as long as page has SOME title
+});
+```
+
+### Your Turn
+
+**Challenge**: Modify the test to check for a specific element on your homepage.
+
+Example:
+```javascript
+test('homepage has navigation', async ({ page }) => {
+	await page.goto('/');
+
+	// Check if there's a <nav> element
+	await expect(page.locator('nav')).toBeVisible();
+});
+```
+
+}}}
+
+## Exercise 3: Understanding Selectors {{{
+
+**Goal**: Master the different ways to find elements.
+
+### The Selector Hierarchy (Best → Worst)
+
+```
+1. 🥇 Accessible role + name (most stable, best for a11y)
+2. 🥈 Test IDs (data-testid, designed for testing)
+3. 🥉 Semantic HTML attributes (name, type, id)
+4. 🏅 Text content (good for unique text)
+5. ⚠️  CSS classes (fragile, avoid)
+```
+
+### Method 1: Accessible Roles (BEST)
+
+Playwright can find elements the same way screen readers do.
+
+**Your Svelte component:**
+```svelte
+<button>Login</button>
+```
+
+**Playwright test:**
+```javascript
+await page.getByRole('button', { name: 'Login' }).click();
+```
+
+**Why this is great:**
+- ✅ Doesn't rely on classes
+- ✅ Tests accessibility at the same time
+- ✅ Works if you change styling completely
+
+### Method 2: Test IDs (STABLE)
+
+Add a special attribute ONLY for testing.
+
+**Your Svelte component:**
+```svelte
+<input
+	name="email"
+	type="email"
+	data-testid="email-input"
+	class="rounded-lg px-4 py-2"
+/>
+```
+
+**Playwright test:**
+```javascript
+await page.getByTestId('email-input').fill('test@example.com');
+```
+
+**Why this is good:**
+- ✅ Super stable (only changes if you delete the attribute)
+- ✅ Clear intent (this element is meant to be tested)
+- ✅ Doesn't depend on text content
+
+### Method 3: HTML Attributes (GOOD)
+
+Use semantic HTML attributes like `name`, `type`, `id`.
+
+**Your Svelte component:**
+```svelte
+<input name="username" type="text" />
+```
+
+**Playwright test:**
+```javascript
+// CSS attribute selector syntax
+await page.locator('input[name="username"]').fill('john');
+await page.locator('input[type="password"]').fill('secret123');
+await page.locator('#username').fill('john'); // if it has id="username"
+```
+
+**Breaking down the syntax:**
+
+```
+'input[name="username"]'
+  ↑     ↑     ↑
+  |     |     └─ Value to match
+  |     └─────── Attribute name
+  └───────────── Element type (optional)
+```
+
+More examples:
+```javascript
+'[name="username"]'        // Any element with name="username"
+'input[type="email"]'      // Input elements with type="email"
+'button[type="submit"]'    // Submit buttons
+'[data-testid="search"]'   // Any element with data-testid="search"
+```
+
+### Method 4: Text Content (OK for Unique Text)
+
+**Your Svelte component:**
+```svelte
+<button>Delete Account</button>
+```
+
+**Playwright test:**
+```javascript
+await page.getByText('Delete Account').click();
+```
+
+**Warning**: Breaks if you change the text (e.g., translation, rewording).
+
+### Method 5: CSS Classes (AVOID)
+
+**❌ Don't do this:**
+```javascript
+await page.locator('.rounded-lg.px-4.py-2.border').fill('test');
+```
+
+**Why it's bad:**
+- Breaks when you change Tailwind classes
+- Breaks during UI redesigns
+- Not semantic (doesn't describe what the element IS)
+
+### Visual Comparison
+
+Let's say you have this input:
+
+```svelte
+<input
+	id="email"
+	name="email"
+	type="email"
+	data-testid="email-input"
+	class="rounded-lg px-4 py-2 border border-gray-300"
+	placeholder="Enter email"
+/>
+```
+
+**All these selectors find the SAME element:**
+
+```javascript
+// 🥇 Best: Accessible label (if you have <label for="email">)
+await page.getByLabel('Email').fill('test@example.com');
+
+// 🥈 Great: Test ID
+await page.getByTestId('email-input').fill('test@example.com');
+
+// 🥉 Good: Attribute selectors
+await page.locator('input[name="email"]').fill('test@example.com');
+await page.locator('input[type="email"]').fill('test@example.com');
+await page.locator('#email').fill('test@example.com');
+
+// 🏅 OK: Placeholder text
+await page.getByPlaceholder('Enter email').fill('test@example.com');
+
+// ⚠️ Fragile: CSS classes (don't do this!)
+await page.locator('.rounded-lg.px-4').fill('test@example.com');
+```
+
+### Your Turn
+
+Given this Svelte component:
+
+```svelte
+<form>
+	<label for="username">Username</label>
+	<input
+		id="username"
+		name="username"
+		type="text"
+		class="glass-accent rounded-xl p-4"
+	/>
+
+	<button type="submit">Submit</button>
+</form>
+```
+
+**Challenge**: Write three different selectors to find the username input (use Methods 1, 2, and 3).
+
+<details>
+<summary>Solution</summary>
+
+```javascript
+// Method 1: Accessible label
+await page.getByLabel('Username').fill('john');
+
+// Method 2: Would need to add data-testid first
+// <input data-testid="username-input" ... />
+await page.getByTestId('username-input').fill('john');
+
+// Method 3: HTML attributes
+await page.locator('input[name="username"]').fill('john');
+await page.locator('#username').fill('john');
+await page.locator('input[type="text"]').fill('john');
+```
+
+</details>
+
+}}}
+
+## Exercise 4: Testing a Svelte Component {{{
+
+**Goal**: Write a complete test for a real Svelte component with Tailwind styling.
+
+### Step 1: Create a Simple Counter Component
+
+`src/lib/components/Counter.svelte`:
+
+```svelte
+<script>
+	let count = $state(0);
+
+	function increment() {
+		count += 1;
+	}
+
+	function decrement() {
+		count -= 1;
+	}
+</script>
+
+<div class="flex flex-col items-center gap-4 rounded-lg bg-white p-8 shadow-lg">
+	<h2 class="text-2xl font-bold text-gray-800">Counter</h2>
+
+	<div class="flex items-center gap-4">
+		<button
+			onclick={decrement}
+			class="rounded-lg bg-red-500 px-4 py-2 text-white hover:bg-red-600"
+			data-testid="decrement"
+		>
+			-
+		</button>
+
+		<span
+			class="text-4xl font-bold text-gray-900"
+			data-testid="count"
+		>
+			{count}
+		</span>
+
+		<button
+			onclick={increment}
+			class="rounded-lg bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+			data-testid="increment"
+		>
+			+
+		</button>
+	</div>
+</div>
+```
+
+### Step 2: Create a Page That Uses It
+
+`src/routes/counter/+page.svelte`:
+
+```svelte
+<script>
+	import Counter from '$lib/components/Counter.svelte';
+</script>
+
+<div class="flex min-h-screen items-center justify-center bg-gray-100">
+	<Counter />
+</div>
+```
+
+### Step 3: Write the E2E Test
+
+`tests/e2e/counter.e2e.js`:
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test.describe('Counter Component', () => {
+	test('should start at 0', async ({ page }) => {
+		await page.goto('/counter');
+
+		// Find the count display
+		const count = page.getByTestId('count');
+
+		// Check initial value
+		await expect(count).toHaveText('0');
+	});
+
+	test('should increment when + button is clicked', async ({ page }) => {
+		await page.goto('/counter');
+
+		// Click the increment button
+		await page.getByTestId('increment').click();
+
+		// Check count increased
+		await expect(page.getByTestId('count')).toHaveText('1');
+
+		// Click again
+		await page.getByTestId('increment').click();
+
+		// Should be 2 now
+		await expect(page.getByTestId('count')).toHaveText('2');
+	});
+
+	test('should decrement when - button is clicked', async ({ page }) => {
+		await page.goto('/counter');
+
+		// Start by incrementing to 3
+		await page.getByTestId('increment').click();
+		await page.getByTestId('increment').click();
+		await page.getByTestId('increment').click();
+		await expect(page.getByTestId('count')).toHaveText('3');
+
+		// Now decrement
+		await page.getByTestId('decrement').click();
+		await expect(page.getByTestId('count')).toHaveText('2');
+	});
+});
+```
+
+### Step 4: Run the Test
+
+```bash
+npm run test:e2e:headed
+```
+
+Watch the browser:
+1. Navigate to /counter
+2. Click the + button
+3. Check the count
+4. Click the - button
+5. All tests pass! ✅
+
+### Step 5: Understanding What Just Happened
+
+**Key insights:**
+
+1. **data-testid is your friend** - Notice we added `data-testid="count"` to the span. This makes testing super stable.
+
+2. **Tailwind classes are invisible** - We have `class="text-4xl font-bold text-gray-900"` on the count, but the test doesn't care. It only looks for `data-testid="count"`.
+
+3. **Tests survive redesigns** - If you change the Tailwind classes to `class="text-6xl text-blue-500"`, the test still works!
+
+### Your Turn
+
+**Challenge**: Modify the Counter component to:
+1. Prevent going below 0
+2. Add a "Reset" button
+3. Write tests for both new features
+
+<details>
+<summary>Solution</summary>
+
+**Updated Counter.svelte:**
+```svelte
+<script>
+	let count = $state(0);
+
+	function increment() {
+		count += 1;
+	}
+
+	function decrement() {
+		if (count > 0) {
+			count -= 1;
+		}
+	}
+
+	function reset() {
+		count = 0;
+	}
+</script>
+
+<div class="flex flex-col items-center gap-4 rounded-lg bg-white p-8 shadow-lg">
+	<h2 class="text-2xl font-bold text-gray-800">Counter</h2>
+
+	<div class="flex items-center gap-4">
+		<button
+			onclick={decrement}
+			disabled={count === 0}
+			class="rounded-lg bg-red-500 px-4 py-2 text-white hover:bg-red-600 disabled:opacity-50"
+			data-testid="decrement"
+		>
+			-
+		</button>
+
+		<span class="text-4xl font-bold text-gray-900" data-testid="count">
+			{count}
+		</span>
+
+		<button
+			onclick={increment}
+			class="rounded-lg bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+			data-testid="increment"
+		>
+			+
+		</button>
+	</div>
+
+	<button
+		onclick={reset}
+		class="rounded bg-gray-500 px-4 py-2 text-white hover:bg-gray-600"
+		data-testid="reset"
+	>
+		Reset
+	</button>
+</div>
+```
+
+**New tests:**
+```javascript
+test('should not go below 0', async ({ page }) => {
+	await page.goto('/counter');
+
+	// Try to decrement from 0
+	await page.getByTestId('decrement').click();
+
+	// Should still be 0
+	await expect(page.getByTestId('count')).toHaveText('0');
+
+	// Decrement button should be disabled
+	await expect(page.getByTestId('decrement')).toBeDisabled();
+});
+
+test('should reset to 0', async ({ page }) => {
+	await page.goto('/counter');
+
+	// Increment to 5
+	for (let i = 0; i < 5; i++) {
+		await page.getByTestId('increment').click();
+	}
+	await expect(page.getByTestId('count')).toHaveText('5');
+
+	// Reset
+	await page.getByTestId('reset').click();
+
+	// Should be 0
+	await expect(page.getByTestId('count')).toHaveText('0');
+});
+```
+
+</details>
+
+}}}
+
+## Exercise 5: Testing Svelte Runes ($state, $derived) {{{
+
+**Goal**: Understand how Playwright tests Svelte 5's reactivity.
+
+### The Key Insight
+
+**Playwright doesn't "see" JavaScript state. It sees the DOM.**
+
+```svelte
+<script>
+	let count = $state(0);  // ← Playwright can't see this
+</script>
+
+<span data-testid="count">{count}</span>  // ← Playwright sees this!
+```
+
+When `count` changes, Svelte updates the DOM. Playwright waits for the DOM update.
+
+### Example: Testing $derived
+
+`src/lib/components/TemperatureConverter.svelte`:
+
+```svelte
+<script>
+	let celsius = $state(0);
+
+	// $derived auto-calculates fahrenheit
+	let fahrenheit = $derived(celsius * 9/5 + 32);
+	let status = $derived(
+		celsius < 0 ? 'Freezing' :
+		celsius < 20 ? 'Cold' :
+		celsius < 30 ? 'Warm' :
+		'Hot'
+	);
+</script>
+
+<div class="rounded-lg bg-white p-6 shadow-lg">
+	<h2 class="mb-4 text-xl font-bold">Temperature Converter</h2>
+
+	<div class="mb-4">
+		<label for="celsius" class="block text-sm font-medium">
+			Celsius
+		</label>
+		<input
+			id="celsius"
+			type="number"
+			bind:value={celsius}
+			data-testid="celsius-input"
+			class="w-full rounded border px-3 py-2"
+		/>
+	</div>
+
+	<div class="space-y-2">
+		<p data-testid="fahrenheit">
+			Fahrenheit: <strong>{fahrenheit.toFixed(1)}°F</strong>
+		</p>
+		<p data-testid="status" class="text-lg font-semibold">
+			Status: {status}
+		</p>
+	</div>
+</div>
+```
+
+**The E2E Test:**
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test.describe('Temperature Converter', () => {
+	test('should convert celsius to fahrenheit', async ({ page }) => {
+		await page.goto('/temperature');
+
+		// Type 0°C
+		await page.getByTestId('celsius-input').fill('0');
+
+		// Should show 32°F (freezing point of water)
+		await expect(page.getByTestId('fahrenheit')).toContainText('32.0°F');
+	});
+
+	test('should update derived status', async ({ page }) => {
+		await page.goto('/temperature');
+
+		// Test freezing
+		await page.getByTestId('celsius-input').fill('-10');
+		await expect(page.getByTestId('status')).toContainText('Freezing');
+
+		// Test cold
+		await page.getByTestId('celsius-input').fill('15');
+		await expect(page.getByTestId('status')).toContainText('Cold');
+
+		// Test warm
+		await page.getByTestId('celsius-input').fill('25');
+		await expect(page.getByTestId('status')).toContainText('Warm');
+
+		// Test hot
+		await page.getByTestId('celsius-input').fill('35');
+		await expect(page.getByTestId('status')).toContainText('Hot');
+	});
+
+	test('should handle decimal inputs', async ({ page }) => {
+		await page.goto('/temperature');
+
+		// Type 37.5°C (normal body temperature)
+		await page.getByTestId('celsius-input').fill('37.5');
+
+		// Should show 99.5°F
+		await expect(page.getByTestId('fahrenheit')).toContainText('99.5°F');
+	});
+});
+```
+
+**What's happening:**
+1. We type into the input (changes `celsius`)
+2. Svelte's `$derived` automatically updates `fahrenheit` and `status`
+3. Svelte updates the DOM
+4. Playwright sees the DOM change and assertions pass
+
+**We're testing Svelte's reactivity without thinking about it!**
+
+}}}
+
+## Exercise 6: Real-World Login Flow {{{
+
+**Goal**: Test a complete authentication flow with error handling.
+
+### Your Login Component
+
+Let's use a realistic login form with Tailwind:
+
+`src/lib/components/LoginForm.svelte`:
+
+```svelte
+<script>
+	let email = $state('');
+	let password = $state('');
+	let loading = $state(false);
+	let error = $state('');
+
+	async function handleLogin(event) {
+		event.preventDefault();
+		loading = true;
+		error = '';
+
+		// Simulate API call
+		await new Promise(resolve => setTimeout(resolve, 1000));
+
+		if (email === 'admin@test.com' && password === 'password123') {
+			window.location.href = '/dashboard';
+		} else {
+			error = 'Invalid email or password';
+			loading = false;
+		}
+	}
+</script>
+
+<form
+	onsubmit={handleLogin}
+	class="glass-accent w-full max-w-md rounded-xl p-8"
+>
+	<h2 class="mb-6 text-2xl font-bold text-white">Login</h2>
+
+	<div class="mb-4">
+		<label for="email" class="sr-only">Email</label>
+		<input
+			id="email"
+			name="email"
+			type="email"
+			bind:value={email}
+			data-testid="email-input"
+			placeholder="Email"
+			required
+			class="w-full rounded-lg bg-white/20 px-4 py-3 text-white placeholder-white/60"
+		/>
+	</div>
+
+	<div class="mb-4">
+		<label for="password" class="sr-only">Password</label>
+		<input
+			id="password"
+			name="password"
+			type="password"
+			bind:value={password}
+			data-testid="password-input"
+			placeholder="Password"
+			required
+			class="w-full rounded-lg bg-white/20 px-4 py-3 text-white placeholder-white/60"
+		/>
+	</div>
+
+	{#if error}
+		<div
+			class="mb-4 rounded-lg bg-red-500/20 p-3"
+			data-testid="error-message"
+		>
+			<p class="text-sm text-red-200">{error}</p>
+		</div>
+	{/if}
+
+	<button
+		type="submit"
+		disabled={loading}
+		data-testid="login-button"
+		class="w-full rounded-lg bg-white px-4 py-3 font-semibold text-gray-900 hover:bg-gray-100 disabled:opacity-50"
+	>
+		{loading ? 'Logging in...' : 'Login'}
+	</button>
+</form>
+```
+
+### The Complete E2E Test
+
+`tests/e2e/login.e2e.js`:
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test.describe('Login Flow', () => {
+	test('should show login form', async ({ page }) => {
+		await page.goto('/login');
+
+		// Check all form elements are visible
+		await expect(page.getByTestId('email-input')).toBeVisible();
+		await expect(page.getByTestId('password-input')).toBeVisible();
+		await expect(page.getByTestId('login-button')).toBeVisible();
+	});
+
+	test('should login with valid credentials', async ({ page }) => {
+		await page.goto('/login');
+
+		// Fill form using data-testid (stable!)
+		await page.getByTestId('email-input').fill('admin@test.com');
+		await page.getByTestId('password-input').fill('password123');
+
+		// Click login
+		await page.getByTestId('login-button').click();
+
+		// Should redirect to dashboard
+		await expect(page).toHaveURL('/dashboard');
+	});
+
+	test('should show error with invalid credentials', async ({ page }) => {
+		await page.goto('/login');
+
+		// Fill with wrong credentials
+		await page.getByTestId('email-input').fill('wrong@test.com');
+		await page.getByTestId('password-input').fill('wrongpassword');
+
+		// Submit
+		await page.getByTestId('login-button').click();
+
+		// Should show error message
+		await expect(page.getByTestId('error-message')).toBeVisible();
+		await expect(page.getByTestId('error-message')).toContainText('Invalid email or password');
+
+		// Should stay on login page
+		await expect(page).toHaveURL('/login');
+	});
+
+	test('should show loading state during login', async ({ page }) => {
+		await page.goto('/login');
+
+		await page.getByTestId('email-input').fill('admin@test.com');
+		await page.getByTestId('password-input').fill('password123');
+
+		// Click submit
+		await page.getByTestId('login-button').click();
+
+		// Button should show "Logging in..." immediately
+		await expect(page.getByTestId('login-button')).toContainText('Logging in...');
+
+		// Button should be disabled
+		await expect(page.getByTestId('login-button')).toBeDisabled();
+	});
+
+	test('should validate required fields', async ({ page }) => {
+		await page.goto('/login');
+
+		// Try to submit empty form
+		await page.getByTestId('login-button').click();
+
+		// Browser's built-in validation should prevent submission
+		// (won't navigate away)
+		await expect(page).toHaveURL('/login');
+	});
+});
+```
+
+### Key Observations
+
+**Notice what we're NOT doing:**
+- ❌ Not testing Tailwind classes
+- ❌ Not checking specific CSS values
+- ❌ Not testing colors or font sizes
+
+**What we ARE testing:**
+- ✅ Functional behavior (does login work?)
+- ✅ Error handling (does error show?)
+- ✅ Loading states (does button disable?)
+- ✅ Navigation (does redirect happen?)
+
+**The Tailwind classes could completely change** and these tests would still pass!
+
+}}}
+
+## Exercise 7: Testing User Interactions {{{
+
+**Goal**: Test complex interactions like keyboard navigation, form validation, and multi-step flows.
+
+### Example: Search with Debounce
+
+`src/lib/components/SearchBar.svelte`:
+
+```svelte
+<script>
+	import { debounce } from '$lib/utils/debounce.js';
+
+	let query = $state('');
+	let results = $state([]);
+	let loading = $state(false);
+
+	const search = debounce(async (searchQuery) => {
+		if (!searchQuery.trim()) {
+			results = [];
+			return;
+		}
+
+		loading = true;
+
+		// Simulate API call
+		await new Promise(resolve => setTimeout(resolve, 500));
+
+		// Mock results
+		results = [
+			`Result 1 for "${searchQuery}"`,
+			`Result 2 for "${searchQuery}"`,
+			`Result 3 for "${searchQuery}"`
+		];
+
+		loading = false;
+	}, 300);
+
+	$effect(() => {
+		search(query);
+	});
+</script>
+
+<div class="w-full max-w-md">
+	<input
+		type="search"
+		bind:value={query}
+		placeholder="Search..."
+		data-testid="search-input"
+		class="w-full rounded-lg border px-4 py-2"
+	/>
+
+	{#if loading}
+		<div data-testid="loading" class="mt-2 text-gray-500">
+			Searching...
+		</div>
+	{/if}
+
+	{#if results.length > 0}
+		<ul data-testid="results-list" class="mt-2 space-y-2">
+			{#each results as result}
+				<li class="rounded bg-gray-100 p-2" data-testid="result-item">
+					{result}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+```
+
+### The Test
+
+```javascript
+import { test, expect } from '@playwright/test';
+
+test.describe('Search Bar', () => {
+	test('should show results after typing', async ({ page }) => {
+		await page.goto('/search');
+
+		// Type into search
+		await page.getByTestId('search-input').fill('svelte');
+
+		// Wait for debounce + API call
+		await page.waitForTimeout(1000);
+
+		// Should show results
+		await expect(page.getByTestId('results-list')).toBeVisible();
+
+		// Should have 3 results
+		const results = page.getByTestId('result-item');
+		await expect(results).toHaveCount(3);
+	});
+
+	test('should show loading state', async ({ page }) => {
+		await page.goto('/search');
+
+		await page.getByTestId('search-input').fill('test');
+
+		// Loading should appear
+		await expect(page.getByTestId('loading')).toBeVisible();
+
+		// Wait for results to load
+		await page.waitForTimeout(1000);
+
+		// Loading should disappear
+		await expect(page.getByTestId('loading')).not.toBeVisible();
+	});
+
+	test('should clear results when input is cleared', async ({ page }) => {
+		await page.goto('/search');
+
+		// Type and get results
+		await page.getByTestId('search-input').fill('svelte');
+		await page.waitForTimeout(1000);
+		await expect(page.getByTestId('results-list')).toBeVisible();
+
+		// Clear input
+		await page.getByTestId('search-input').clear();
+		await page.waitForTimeout(500);
+
+		// Results should be gone
+		await expect(page.getByTestId('results-list')).not.toBeVisible();
+	});
+});
+```
+
+}}}
+
+## Common Pitfalls {{{
+
+### Pitfall 1: Forgetting to Wait
+
+**❌ Wrong:**
+```javascript
+await page.getByTestId('button').click();
+expect(page.getByTestId('result')).toBeVisible(); // Missing await!
+```
+
+**✅ Correct:**
+```javascript
+await page.getByTestId('button').click();
+await expect(page.getByTestId('result')).toBeVisible();
+```
+
+### Pitfall 2: Testing Implementation Details
+
+**❌ Wrong:**
+```javascript
+// Testing that component has a specific variable
+const component = await page.evaluate(() => {
+	return window.myComponent.count;
+});
+expect(component).toBe(5);
+```
+
+**✅ Correct:**
+```javascript
+// Test what the USER sees
+await expect(page.getByTestId('count')).toHaveText('5');
+```
+
+### Pitfall 3: Brittle Selectors
+
+**❌ Wrong:**
+```javascript
+await page.locator('.rounded-lg.px-4.py-2.bg-blue-500').click();
+```
+
+**✅ Correct:**
+```javascript
+await page.getByTestId('submit-button').click();
+// or
+await page.getByRole('button', { name: 'Submit' }).click();
+```
+
+### Pitfall 4: Not Handling Async Operations
+
+**❌ Wrong:**
+```javascript
+await page.getByTestId('search').fill('test');
+// Immediately check for results (but API hasn't finished!)
+await expect(page.getByTestId('results')).toBeVisible(); // Fails!
+```
+
+**✅ Correct:**
+```javascript
+await page.getByTestId('search').fill('test');
+// Wait for the loading indicator to disappear
+await expect(page.getByTestId('loading')).not.toBeVisible();
+// Now check for results
+await expect(page.getByTestId('results')).toBeVisible();
+```
+
+}}}
+
+## Cheat Sheet {{{
+
+### Essential Commands
+
+```javascript
+// Navigation
+await page.goto('/path');
+await page.goBack();
+await page.reload();
+
+// Finding elements (best to worst)
+page.getByRole('button', { name: 'Submit' })  // 🥇 Best
+page.getByTestId('submit-btn')                 // 🥈 Great
+page.getByLabel('Email')                       // 🥉 Good
+page.locator('input[name="email"]')            // 🏅 OK
+page.locator('.btn-primary')                   // ⚠️ Avoid
+
+// Interactions
+await element.click();
+await element.fill('text');
+await element.clear();
+await element.selectOption('value');
+await element.check(); // checkbox
+await element.uncheck();
+
+// Assertions
+await expect(element).toBeVisible();
+await expect(element).toBeHidden();
+await expect(element).toBeEnabled();
+await expect(element).toBeDisabled();
+await expect(element).toHaveText('exact text');
+await expect(element).toContainText('partial');
+await expect(element).toHaveValue('input value');
+await expect(page).toHaveURL('/expected-path');
+await expect(page).toHaveTitle('Page Title');
+
+// Waiting
+await page.waitForTimeout(1000);              // Wait 1 second
+await page.waitForLoadState('networkidle');   // Wait for network
+await element.waitFor({ state: 'visible' });  // Wait for element
+```
+
+### HTML Attribute Selector Syntax
+
+```javascript
+// Pattern: element[attribute="value"]
+
+'input[name="email"]'        // Input with name="email"
+'button[type="submit"]'      // Button with type="submit"
+'[data-testid="search"]'     // Any element with data-testid="search"
+'input[type="password"]'     // Password input
+'a[href="/about"]'           // Link to /about
+'img[alt="Logo"]'            // Image with alt="Logo"
+
+// You can omit the element type
+'[name="email"]'             // Any element with name="email"
+
+// You can combine multiple attributes
+'input[name="email"][type="email"]'  // Input with both attributes
+```
+
+### When to Use Which Selector
+
+| Situation | Use This | Example |
+|-----------|----------|---------|
+| Button with text | `getByRole` | `page.getByRole('button', { name: 'Submit' })` |
+| Input with label | `getByLabel` | `page.getByLabel('Email')` |
+| Element with test ID | `getByTestId` | `page.getByTestId('search-input')` |
+| Form input | `locator` with name | `page.locator('input[name="email"]')` |
+| Unique text | `getByText` | `page.getByText('Welcome back')` |
+| CSS classes | **DON'T** | Use one of the above instead |
+
+}}}
+
+## Summary {{{
+
+**What you learned:**
+
+1. ✅ **HTML attributes ≠ CSS classes** - Playwright selectors use HTML attributes, not Tailwind classes
+2. ✅ **data-testid is your friend** - Add it to components for stable, semantic selectors
+3. ✅ **Tests survive redesigns** - Change Tailwind classes all you want, tests still pass
+4. ✅ **Test user behavior** - Click buttons, fill forms, check what users see
+5. ✅ **Svelte Runes work seamlessly** - $state and $derived updates show in the DOM automatically
+
+**Your anxiety about `input[name="email"]` is now gone** because you understand:
+- It's an HTML attribute selector
+- Has nothing to do with CSS or Tailwind
+- Looks for the semantic identity of the element
+- Is stable and won't break when you restyle
+
+**Next steps:**
+1. Add data-testid to your critical UI elements
+2. Write your first E2E test for your app
+3. Run it in headed mode to see the magic happen
+4. Gradually add more tests for critical user flows
+
+}}}
+
+## Resources {{{
+
+- **Playwright Docs**: https://playwright.dev
+- **Playwright Best Practices**: https://playwright.dev/docs/best-practices
+- **Playwright vs Selenium**: Playwright is faster, more reliable, better API
+- **This guide**: Keep it handy for reference!
+
+}}}
+
+**You've got this.** 🚀