// Create Playwright E2E tests using Page Object Model pattern with database isolation
| name | E2E Test Builder |
| description | Create Playwright E2E tests using Page Object Model pattern with database isolation |
Use this skill when creating Playwright end-to-end tests for this project.
Each test file gets its own isolated database copy:
setupDatabaseIsolation(page) in beforeEachAll tests use POMs to encapsulate page interactions:
tests/pages/BasePage for common functionalitydata-testid attributes for element selectionThree users with different permission levels:
admin - Full access (use for admin tests)contributor - Moderator role (can moderate content)viewer - Member role (read-only access)import { test, expect } from '@playwright/test'
import { HomePage, ContentListPage } from '../../pages'
import { setupDatabaseIsolation } from '../../helpers/database-isolation'
import { loginAs } from '../../helpers/auth'
test.describe('My Feature', () => {
test.beforeEach(async ({ page }) => {
await setupDatabaseIsolation(page)
await loginAs(page, 'admin') // if auth needed
})
test('can do something', async ({ page }) => {
const homePage = new HomePage(page)
await homePage.goto()
// ... test logic
})
})
bun run test:integration # Run all tests
bun run test:integration:ui # Interactive UI mode
bun run test:integration:headed # See browser
bun test:integration tests/e2e/path # Run specific file
tests/
├── e2e/ # Test suites by category
│ ├── public/ # Public user flows
│ ├── auth/ # Authentication flows
│ ├── content/ # Content submission
│ └── admin/ # Admin workflows
├── pages/ # Page Object Models
├── helpers/ # Auth, database isolation
├── fixtures/ # Test data definitions
└── setup/ # Global setup/teardown
Patterns for building list and detail pages with forms, filters, and data fetching
Create SvelteKit components using Remote Functions for type-safe client-server communication. Use when building components that need to fetch data, submit forms, or execute server commands. Remote Functions work at the component level, not page level.
Create admin dashboard pages with tables, forms, and actions
Create UI components using tailwind-variants for type-safe styling. Use when creating or editing components in src/lib/ui/.
Demonstrates progressive disclosure by linking to reference files. Use this pattern when your skill has detailed content that should load on-demand.
A minimal example skill demonstrating the required structure. Use this as a template when creating new skills.