pyrex41/claude_skills/write-e2e

fg-manifold/lib/compose/e2e/
├── playwright.config.ts          # Config (baseURL, projects, timeouts)
├── page-objects/                 # Page Object Model classes
├── tests/
│   ├── auth/auth.setup.ts        # Pre-test auth (saves .auth/user.json)
│   ├── helpers/auth-state.ts     # ensureAuthenticated() and token utils
│   └── <feature>/               # Tests organized by feature area
└── fixtures/                     # Generated test data (gitignored)

import { test, expect } from '@playwright/test';
import { ensureAuthenticated } from '../helpers/auth-state';
test.describe('Feature Name', () => {
  test.describe.configure({ mode: 'serial' });
  test('does the thing', async ({ page }) => {
    await page.goto('/main/some-page', { timeout: 15000 });
    await ensureAuthenticated(page, '/main/some-page');
    // ...assertions — auth is guaranteed valid
  });
});

import { Page, Locator, expect } from '@playwright/test';
export class MyPage {
  readonly page: Page;
  readonly someElement: Locator;
  constructor(page: Page) {
    this.page = page;
    this.someElement = page.locator('.my-selector');
  }
  async goto() {
    await this.page.goto('/main/path/to/page');
    // Use 'domcontentloaded' — 'networkidle' hangs on SPA polling/websockets
    await this.page.waitForLoadState('domcontentloaded', { timeout: 15000 });
  }
}

cd fg-manifold/lib/compose/e2e
npx playwright test                              # Run all
npx playwright test tests/feature/my-test.spec.ts # Run specific file
npx playwright test -g "test name"                # Run by name
npx playwright test --headed                      # Visible browser
tilt ci -- e2e                                    # Via Tilt