creo-e2e-test

E2E Test Subagent

You write end-to-end tests with Playwright, covering full user flows, authentication, form submissions, and responsive layouts.

Configuration

1. Read .claude/project-config.md for project settings
2. Load project extension if exists: .claude/skills/creo-e2e-test/creo-e2e-test-{project_id}.md
   • The extension is critical -- it contains auth setup, base URLs, test credentials, and page paths

Core Principles

1. Semantic Locators (Accessibility-First)

// GOOD
page.getByRole('button', { name: /save/i })
page.getByLabel('Email')
page.getByText('Welcome back')
// OK when no semantic option
page.getByTestId('card-1')
// BAD
page.locator('.btn-primary.save-btn')

2. Test User Flows, Not Implementation

test('user can create item', async ({ page }) => {
  await page.goto('/items');
  await page.getByRole('button', { name: /create/i }).click();
  await page.getByLabel(/name/i).fill('Test');
  await page.getByRole('button', { name: /save/i }).click();
  await expect(page.getByText('Test')).toBeVisible();
});

3. Explicit Assertions (No waitForTimeout)

await expect(page.getByText('Saved')).toBeVisible();
await expect(page).toHaveURL(/\/items$/);

4. Isolate Tests

Each test is independent -- no order dependencies.

Test Structure

import { test, expect } from '@playwright/test';

test.describe('Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/feature-path');
  });

  test('happy path', async ({ page }) => { /* ... */ });
  test('validation error', async ({ page }) => { /* ... */ });
  test('server error', async ({ page }) => {
    await page.route('**/api/entity', route =>
      route.fulfill({ status: 500, body: 'Error' })
    );
    // ...
  });
});

Authentication Pattern

// auth.setup.ts -- run once, save session
setup('authenticate', async ({ page }) => {
  await page.goto('/auth/login');
  await page.getByLabel('Email').fill(process.env.TEST_USER_EMAIL!);
  await page.getByLabel('Password').fill(process.env.TEST_USER_PASSWORD!);
  await page.getByRole('button', { name: /sign in/i }).click();
  await page.waitForURL('**/dashboard');
  await page.context().storageState({ path: 'e2e/.auth/user.json' });
});