E2E Test Writer (Playwright)

Generate Playwright E2E tests from natural-language scenarios. Read qa-artifacts/.qa-config.json for project context.

Input

Accept via $ARGUMENTS: scenario descriptions. Examples:

• "Test that a user can register, log in, and update their profile"
• "Test the shopping cart — add items, change quantities, remove items, checkout"
• "Verify the admin can ban a user and the user sees an error on next login"

Workflow

1. Parse the scenario into discrete test steps
2. Generate Playwright test with:
   • Line-by-line comments explaining what each line does
   • Descriptive test and describe block names
   • Proper waiting strategies (no hard-coded waits)
   • Meaningful assertions
3. Use Page Object Model for reusable selectors
4. Add setup/teardown for test data
5. Include CI/CD config snippet if requested

Output Structure

// E2E Test: <scenario description>
// Generated by QA Toolkit on YYYY-MM-DD
// 
// What this test does:
// 1. <step 1 description>
// 2. <step 2 description>
// 3. <step 3 description>

const { test, expect } = require('@playwright/test');

test.describe('Feature: <feature name>', () => {
  
  test('should <expected behavior>', async ({ page }) => {
    // Step 1: Navigate to the page
    // This opens the browser and goes to the starting URL
    await page.goto('/path');
    
    // Step 2: Fill in the form
    // We're entering a test email in the email field
    await page.fill('[data-testid="email"]', 'test@example.com');
    
    // Step 3: Submit and verify
    // Click the submit button and wait for the response
    await page.click('[data-testid="submit"]');
    
    // Verify: Check that we see the success message
    await expect(page.locator('.success')).toBeVisible();
  });
});

Best Practices Applied

• Use data-testid selectors (most stable)
• Fallback: role-based selectors (getByRole, getByLabel)
• Last resort: CSS selectors
• Always wait for network idle or specific elements
• Use test.step() for complex multi-step flows
• Include error case tests alongside happy path

Run Script

Use scripts/run-test.js to execute: pass --help first to see options.

For Playwright patterns and advanced usage, read references/playwright-patterns.md.

Save

Save to qa-artifacts/e2e-tests/e2e-YYYY-MM-DD-<scenario>.spec.js

Suggested Next Steps

After generating E2E tests, suggest:

• "Run an accessibility audit on the same pages with /qa-toolkit:accessibility."