PixelPilot ai-test-generation.instructions.md

AI Test Generation 2026

User story → test scenarios → Playwright / Cypress implementation → CI integration. Generates behaviour-focused tests that catch real regressions, not just implementation details.

---

TESTING PHILOSOPHY

Write tests that resemble how users interact with your application.
— Kent C. Dodds

Tests should catch real regressions, not break on refactors.
Good test: "user can complete checkout" — survives CSS class rename
Bad test:  "button has class 'btn-primary'" — breaks on any rename

Rule: Test outcomes, not implementation.

---

STEP 1 — EXTRACT TEST SCENARIOS FROM USER STORIES

Input format — User Story

As a [role], I want to [action] so that [outcome].

Acceptance criteria:
- [criterion 1]
- [criterion 2]
- [criterion 3]

Process: Story → Scenarios

For each user story, generate test scenarios covering:

## Test Scenarios for: {Story Title}

### Happy Path
1. {Normal, expected flow from start to success}

### Alternate Paths
2. {Alternative but valid path}
3. {Optional step skipped}

### Error Paths
4. {Required field missing}
5. {Invalid input format}
6. {Network/server error during submission}
7. {Session expires mid-flow}

### Edge Cases
8. {Minimum valid input}
9. {Maximum length input}
10. {Special characters in input}

### Accessibility
11. {Complete flow using keyboard only}
12. {Complete flow with screen reader announced states}

---

STEP 2 — PLAYWRIGHT E2E TESTS

File structure

tests/
├── e2e/
│   ├── auth/
│   │   ├── login.spec.ts
│   │   └── registration.spec.ts
│   ├── checkout/
│   │   ├── checkout-happy-path.spec.ts
│   │   └── checkout-errors.spec.ts
│   └── fixtures/
│       ├── users.ts
│       └── products.ts
├── integration/
│   ├── api/
│   │   └── orders.test.ts
│   └── components/
│       └── CheckoutForm.test.tsx
└── playwright.config.ts

Playwright config

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [['html'], ['github']],

  use: {
    baseURL:     process.env.BASE_URL ?? 'http://localhost:3000',
    trace:       'on-first-retry',
    screenshot:  'only-on-failure',
    video:       'retain-on-failure',
  },

  projects: [
    // Setup — create auth state once
    { name: 'setup', testMatch: /.*\.setup\.ts/ },

    // Browsers
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
      dependencies: ['setup'],
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 14'] },
      dependencies: ['setup'],
    },
  ],

  webServer: {
    command: 'npm run build && npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});