taskplaner/.planning/phases/09-ci-pipeline/09-03-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	must_haves
09-ci-pipeline	03	execute	2	09-01	playwright.config.ts tests/e2e/fixtures/db.ts tests/e2e/user-journeys.spec.ts tests/e2e/index.ts	true	truths artifacts key_links E2E tests run against the application with seeded test data User journeys cover create, edit, search, organize, and delete workflows Tests run on both desktop and mobile viewports Screenshots are captured on test failure path provides contains playwright.config.ts E2E configuration with multi-viewport and screenshot settings screenshot: 'only-on-failure' path provides contains tests/e2e/fixtures/db.ts Database seeding fixture using drizzle-seed drizzle-seed path provides min_lines tests/e2e/user-journeys.spec.ts Core user journey E2E tests 100 path provides contains tests/e2e/index.ts Custom test function with fixtures base.extend from to via pattern tests/e2e/user-journeys.spec.ts tests/e2e/fixtures/db.ts test import with seededDb fixture import.*test.*from.*fixtures

Create comprehensive E2E test suite with database fixtures and multi-viewport testing.

Purpose: Establish E2E tests that verify full user journeys work correctly. These tests catch integration issues that unit tests miss and provide confidence that the deployed application works as expected.

Output: E2E test suite covering core user workflows, database seeding fixture for consistent test data, multi-viewport testing for desktop and mobile.

<execution_context> @/home/tho/.claude/get-shit-done/workflows/execute-plan.md @/home/tho/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/phases/09-ci-pipeline/09-RESEARCH.md @.planning/phases/09-ci-pipeline/09-01-SUMMARY.md

@playwright.config.ts @tests/docker-deployment.spec.ts @src/lib/server/db/schema.ts @src/routes/+page.svelte

Task 1: Update Playwright configuration for E2E requirements playwright.config.ts Update playwright.config.ts with E2E requirements from user decisions:

1. Set testDir: './tests/e2e' (separate from existing docker test)

2. Set fullyParallel: false (shared database)

3. Set workers: 1 (avoid database race conditions)

4. Configure reporter:

   • ['html', { open: 'never' }]
   • ['github'] for CI annotations

5. Configure use:

   • baseURL: process.env.BASE_URL || 'http://localhost:5173'
   • trace: 'on-first-retry'
   • screenshot: 'only-on-failure' (per user decision: screenshots, no video)
   • video: 'off'

6. Add two projects:

   • chromium-desktop: using devices['Desktop Chrome']
   • chromium-mobile: using devices['Pixel 5']

7. Configure webServer:

   • command: 'npm run build && npm run preview'
   • port: 4173
   • reuseExistingServer: !process.env.CI

Move existing docker-deployment.spec.ts to tests/e2e/ or keep in tests/ with separate config. Run npx playwright test --list - shows test files found Configuration is valid (no syntax errors) Playwright configured for E2E with desktop/mobile viewports, screenshots on failure, single worker for database safety.

Task 2: Create database seeding fixture tests/e2e/fixtures/db.ts, tests/e2e/index.ts First, install drizzle-seed: ```bash npm install -D drizzle-seed ```

Create tests/e2e/fixtures/db.ts:

1. Import test base from @playwright/test
2. Import db from src/lib/server/db
3. Import schema from src/lib/server/db/schema
4. Import seed and reset from drizzle-seed

Create a fixture that:

• Seeds database with known test data before test
• Provides seeded entries (tasks, thoughts) with predictable IDs and content
• Cleans up after test using reset()

Create tests/e2e/index.ts:

• Re-export extended test with seededDb fixture
• Re-export expect from @playwright/test

Test data should include:

• At least 5 entries with various states (tasks vs thoughts, completed vs pending)
• Entries with tags for testing filter/search
• Entries with images (if applicable to schema)
• Entries with different dates for sorting tests

Note: Read the actual schema.ts to understand the exact model structure before writing seed logic. TypeScript compiles without errors Fixture can be imported in test file Database fixture created. Tests can import { test, expect } from './fixtures' to get seeded database.

Task 3: Write E2E tests for core user journeys tests/e2e/user-journeys.spec.ts Create tests/e2e/user-journeys.spec.ts using the custom test with fixtures:

import { test, expect } from './index';

Write tests for each user journey (per CONTEXT.md decisions):

Create workflow:

• Navigate to home page
• Use quick capture to create a new entry
• Verify entry appears in list
• Verify entry persists after page reload

Edit workflow:

• Find an existing entry (from seeded data)
• Click to open/edit
• Modify content
• Save changes
• Verify changes persisted

Search workflow:

• Use search bar to find entry by text
• Verify matching entries shown
• Verify non-matching entries hidden
• Test search with tags filter

Organize workflow:

• Add tag to entry
• Filter by tag
• Verify filtered results
• Pin an entry (if applicable)
• Verify pinned entry appears first

Delete workflow:

• Select an entry
• Delete it
• Verify entry removed from list
• Verify entry not found after reload

Use test.describe() to group related tests. Each test should use seededDb fixture for consistent starting state. Use page object pattern if tests get complex (optional - can keep simple for now). Run npm run test:e2e with app running locally (or let webServer start it) All E2E tests pass Screenshots are generated in test-results/ for any failures E2E test suite covers all core user journeys. Tests run on both desktop and mobile viewports.

1. `npm run test:e2e` executes E2E tests 2. Tests run on both chromium-desktop and chromium-mobile projects 3. Database is seeded with test data before each test 4. All 5 user journeys (create, edit, search, organize, delete) have tests 5. Screenshots captured on failure (can test by making a test fail temporarily) 6. Tests pass consistently (no flaky tests)

<success_criteria>

• CI-04 requirement satisfied: E2E tests ready for pipeline
• User journeys cover create/edit/search/organize/delete as specified in CONTEXT.md
• Multi-viewport testing (desktop + mobile) per CONTEXT.md decision
• Database fixtures provide consistent, isolated test data
• Screenshot on failure configured (no video per CONTEXT.md decision) </success_criteria>

After completion, create `.planning/phases/09-ci-pipeline/09-03-SUMMARY.md`