claude-code-mastery-project-starter-kit: Command for Claude Code

Create E2E Test

Create a Playwright E2E test for: $ARGUMENTS

ABSOLUTE RULES — Read Before Writing a Single Line

1. Every test MUST have explicit success criteria

"Page loads" is NOT a test. Every test() block MUST assert:

• URL — verify the page navigated to the correct URL
• Visible elements — verify key elements are present and visible
• Correct data — verify the right content is displayed
• Error states — verify error messages show when expected

// CORRECT — explicit success criteria
test('dashboard shows user data after login', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[name="email"]', '[email protected]');
  await page.fill('[name="password"]', 'password123');
  await page.click('button[type="submit"]');

  // ✅ Verify URL changed
  await expect(page).toHaveURL('/dashboard');
  // ✅ Verify key element visible
  await expect(page.locator('h1')).toContainText('Welcome');
  // ✅ Verify correct data displayed
  await expect(page.locator('[data-testid="user-email"]')).toContainText('[email protected]');
  // ✅ Verify sidebar loaded
  await expect(page.locator('nav.sidebar')).toBeVisible();
});

// WRONG — this passes even when completely broken
test('dashboard loads', async ({ page }) => {
  await page.goto('/dashboard');
  // no assertions!
});

2. A test is FINISHED when it has ALL of these

A test is NOT done until it has:

• At least one await expect(page).toHaveURL() assertion
• At least one await expect(locator).toBeVisible() assertion
• At least one content/data verification (toContainText, toHaveValue, etc.)
• Error case coverage (what happens when it fails?)
• No // TODO or placeholder assertions

If you cannot check ALL of these, the test is incomplete. Say so and explain what's missing.

3. Test structure — ALWAYS follow this pattern

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

test.describe('[Feature Name]', () => {
  test.describe('happy path', () => {
    test('should [specific behavior] when [specific condition]', async ({ page }) => {
      // ARRANGE — navigate, set up state
      // ACT — perform the user action
      // ASSERT — verify SPECIFIC outcomes (URL, elements, data)
    });
  });

  test.describe('error handling', () => {
    test('should show error when [invalid input]', async ({ page }) => {
      // Test the failure mode
    });
  });

  test.describe('edge cases', () => {
    test('should handle [empty state / max values / etc]', async ({ page }) => {
      // Test boundaries
    });
  });
});