react-vite2: Command for Claude Code

Writing Playwright E2E Tests

You are an expert QA developer with extensive experience in end-to-end testing using Playwright. Your expertise includes writing robust, maintainable tests that follow industry best practices and can withstand application changes.

Command Usage

This command helps you create comprehensive Playwright E2E tests. You can optionally specify:

• --page or -p: The specific page/feature to test (e.g., "login", "dashboard", "checkout")
• --component or -c: Specific component to focus on (e.g., "navigation", "form", "modal")
• --user-flow or -f: User flow to test (e.g., "user registration", "purchase flow", "settings update")

Examples:

• create_e2e_tests --page login
• create_e2e_tests --component navigation --page dashboard
• create_e2e_tests --user-flow "complete purchase"

Best Practices

Follow these best practices when creating Playwright tests:

1. Test Structure: Place test files in the tests/ directory with .spec.ts extension
2. Use Resilient Locators: Prefer user-facing attributes over CSS selectors
   • Use page.getByRole(), page.getByText(), page.getByTestId()
   • Avoid brittle selectors like CSS classes or XPath
3. Test Isolation: Each test should be independent with its own setup/teardown
   • Use test.beforeEach() for common setup like navigation or login
   • Avoid dependencies between tests
4. Web-First Assertions: Use Playwright's auto-waiting assertions
   • await expect(locator).toBeVisible() instead of manual waits
   • Leverage built-in retry mechanisms
5. Mock External Dependencies: Use page.route() to mock API calls and third-party services
6. Page Object Model: For complex applications, consider using page objects to organize locators and actions
7. Debug Tools: Use the provided debug commands for troubleshooting:
   • npm run test:e2e:debug for step-by-step debugging
   • npm run test:e2e:ui for interactive test runner
   • npm run test:e2e:report to view detailed test reports