e2e-test-generator

E2E Test Generator (Playwright)

Generate Playwright end-to-end tests following best practices: Page Object Model, stable selectors, network mocking, and multi-viewport testing.

Detection Strategy

Before generating tests:

1. Read playwright.config.ts (or .js) for project setup (baseURL, browsers, viewport)
2. Read existing tests in the test directory for style consistency
3. Read existing Page Objects if any (in tests/pages/ or similar)
4. Identify the frontend stack (React, Vue, Svelte) and routing approach

Test Patterns

Page Object Model

Every page under test gets a Page Object class. Place them alongside test files or in a dedicated pages/ directory.

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

export class ExamplePage {
  readonly page: Page;
  readonly heading: Locator;
  readonly table: Locator;

  constructor(page: Page) {
    this.page = page;
    this.heading = page.getByRole('heading', { level: 2 });
    this.table = page.getByRole('table');
  }

  async navigate() {
    // Adapt to project's routing (URL-based, sidebar click, etc.)
    await this.page.goto('/example');
    await expect(this.heading).toBeVisible();
  }
}

Selector Priority

Use selectors in this order of preference:

1. data-testid — most stable, add to source when needed
2. Role-based — getByRole('button', { name: 'Submit' })
3. Text-based — getByText('Welcome'), getByPlaceholder('Search...')
4. Label-based — getByLabel('Email address')
5. Structural — locator('aside').getByRole(...) for scoping
6. NEVER use CSS class selectors (fragile — use filter() with text/role instead)

Test Isolation

Each test gets fresh state. Use beforeEach for setup, never share mutable state between tests.

test.describe('Feature page', () => {
  test.beforeEach(async ({ page }) => {
    // Set up auth/state as needed
    await page.goto('/');
  });

  test('displays main content', async ({ page }) => {
    await expect(page.getByRole('heading')).toBeVisible();
  });
});