Initial commit

commands/create-page-object.md

@@ -0,0 +1,72 @@
+# Create Page Object Command
+
+## Description
+
+Create a Page Object Model (POM) for a specific page or component. Generates a TypeScript class with locators and methods following the Page Object pattern with data-testid locators.
+
+## Usage
+
+```
+/create-page-object [page-name]
+```
+
+## Parameters
+
+- `page-name` - Name of the page or component (required)
+
+## Examples
+
+```
+/create-page-object LoginPage
+```
+
+```
+/create-page-object ProductDetailsPage
+```
+
+```
+/create-page-object CheckoutForm
+```
+
+## Instructions for Claude
+
+When this command is invoked:
+
+1. **Invoke the page-object-builder skill** to handle the Page Object creation
+
+2. **Gather information**:
+   - Page name and URL
+   - Key elements on the page
+   - Common user actions
+   - data-testid values for elements
+
+3. **Generate Page Object class**:
+   - TypeScript class with proper types
+   - Readonly locators using data-testid
+   - Constructor accepting Page object
+   - goto() method for navigation
+   - Action methods (async)
+   - Getter methods for assertions
+
+4. **Provide usage example**:
+   - Show how to use the Page Object in tests
+   - Demonstrate common actions
+   - Show assertion patterns
+
+5. **List required data-testid values**:
+   - Document all testid values needed in the UI
+   - Provide semantic naming suggestions
+
+## Error Handling
+
+- If page name is missing, prompt for it
+- If insufficient information, ask for page details
+- Suggest data-testid names if not provided
+- Warn if Page Object seems too large (consider splitting)
+
+## Notes
+
+- All locators must use data-testid
+- Page Objects should not contain assertions
+- Use getters for elements that need assertions
+- Keep Page Objects focused on a single page/component

commands/debug-test.md

@@ -0,0 +1,80 @@
+# Debug Test Command
+
+## Description
+
+Debug a failing Playwright test by analyzing error messages, screenshots, and traces. Provides actionable solutions for common test failures including timeouts, selector issues, and race conditions.
+
+## Usage
+
+```
+/debug-test [test-name-or-error]
+```
+
+## Parameters
+
+- `test-name-or-error` - Test name, file path, or error message (optional)
+
+## Examples
+
+```
+/debug-test login.spec.ts
+```
+
+```
+/debug-test TimeoutError: waiting for selector
+```
+
+```
+/debug-test Test "user dashboard loads" is flaky
+```
+
+## Instructions for Claude
+
+When this command is invoked:
+
+1. **Invoke the test-debugger skill** to handle debugging
+
+2. **Gather failure information**:
+   - Error message and stack trace
+   - Test file location
+   - Expected vs actual behavior
+   - Screenshots/traces if available
+   - Failure frequency (always or intermittent)
+
+3. **Analyze the error**:
+   - Identify error type (timeout, selector, assertion, etc.)
+   - Determine root cause
+   - Check for common issues (missing waits, wrong testid, race conditions)
+
+4. **Optionally use Playwright MCP**:
+   - Navigate to the page if needed
+   - Inspect element state
+   - Test locator strategies
+   - Verify data-testid values
+
+5. **Provide solution**:
+   - Explain what's wrong
+   - Show the fix with code examples
+   - Explain how to prevent in future
+   - Provide verification steps
+
+6. **Apply the fix if requested**:
+   - Update the test code
+   - Add missing waits
+   - Fix locators
+   - Improve test stability
+
+## Error Handling
+
+- If insufficient information, ask for error details
+- If test file not found, ask for correct path
+- If error is unclear, use MCP to investigate
+- If multiple issues, prioritize and fix one at a time
+
+## Notes
+
+- Most test failures are timing-related
+- Always verify data-testid values are correct
+- Use explicit waits, not hardcoded timeouts
+- Check test isolation if flaky
+- Run tests multiple times to verify fix

commands/fix-flaky.md

@@ -0,0 +1,88 @@
+# Fix Flaky Test Command
+
+## Description
+
+Analyze and fix flaky (intermittently failing) Playwright tests. Identifies race conditions, improves waiting strategies, and ensures test stability.
+
+## Usage
+
+```
+/fix-flaky [test-name]
+```
+
+## Parameters
+
+- `test-name` - Name or path of the flaky test (required)
+
+## Examples
+
+```
+/fix-flaky dashboard.spec.ts
+```
+
+```
+/fix-flaky "should load user profile"
+```
+
+```
+/fix-flaky tests/checkout.spec.ts:42
+```
+
+## Instructions for Claude
+
+When this command is invoked:
+
+1. **Invoke the test-debugger and test-maintainer skills** for analysis
+
+2. **Gather information**:
+   - Test file and name
+   - Failure pattern (how often it fails)
+   - Error messages when it fails
+   - Environment (local vs CI)
+   - Which step usually fails
+
+3. **Identify flakiness causes**:
+   - Race conditions
+   - Missing waits
+   - Hardcoded timeouts
+   - Network dependencies
+   - Test isolation issues
+   - Environment differences
+
+4. **Common fixes**:
+   - Add explicit waits before interactions
+   - Replace waitForTimeout() with proper waits
+   - Wait for network to settle
+   - Wait for specific API responses
+   - Increase timeouts for slow operations
+   - Improve test isolation
+   - Add retry configuration
+
+5. **Apply improvements**:
+   - Update test code
+   - Add proper waits
+   - Fix race conditions
+   - Ensure test isolation
+   - Configure retries if needed
+
+6. **Verify stability**:
+   - Run test multiple times (10+ times)
+   - Test in different environments
+   - Check in CI environment
+   - Monitor for continued flakiness
+
+## Error Handling
+
+- If test not found, ask for correct path
+- If can't reproduce failure, ask for more details
+- If multiple issues, fix most impactful first
+- Warn if test design is fundamentally flaky
+
+## Notes
+
+- Flakiness is usually caused by timing issues
+- Never use waitForTimeout() - use explicit waits
+- Wait for network/animations to complete
+- Ensure tests are isolated and don't share state
+- Run tests 10+ times to verify fix
+- Consider enabling retries for legitimately slow operations

commands/generate-test.md

@@ -0,0 +1,81 @@
+# Generate Test Command
+
+## Description
+
+Generate a production-ready Playwright E2E test from a natural language description. Creates TypeScript test files following best practices including data-testid locators, AAA pattern, and proper async/await usage.
+
+## Usage
+
+```
+/generate-test [description]
+```
+
+## Parameters
+
+- `description` - Natural language description of the test scenario (required)
+
+## Examples
+
+```
+/generate-test Login flow with valid credentials
+```
+
+```
+/generate-test Add item to cart and complete checkout
+```
+
+```
+/generate-test Form validation for empty email field
+```
+
+## Instructions for Claude
+
+When this command is invoked:
+
+1. **Invoke the test-generator skill** to handle the test generation
+2. **Gather requirements** from the user:
+   - Feature/functionality to test
+   - User flow or scenario
+   - Expected outcomes
+   - Page URLs involved
+   - data-testid values (or suggest them)
+
+3. **Generate the test file** following these requirements:
+   - TypeScript file with `.spec.ts` extension
+   - Use only data-testid locators
+   - Follow AAA pattern (Arrange-Act-Assert)
+   - Include proper async/await
+   - Add explicit waits (no hardcoded timeouts)
+   - Include meaningful assertions
+   - Add comments for clarity
+
+4. **Create supporting files if needed**:
+   - `playwright.config.ts` if first test
+   - Custom fixtures if needed
+   - Utility functions if reusable
+
+5. **Provide usage instructions**:
+   - How to run the test
+   - What data-testid values need to be added to UI
+   - How to debug if it fails
+
+6. **Validate the generated test**:
+   - Ensure only data-testid locators
+   - Check for proper waits
+   - Verify AAA structure
+   - Confirm TypeScript types
+
+## Error Handling
+
+- If description is too vague, ask clarifying questions
+- If missing required information (URLs, element names), prompt user
+- If data-testid values aren't provided, suggest semantic names
+- Warn if the test scenario seems too complex for a single test
+
+## Notes
+
+- Tests should be focused and test one specific behavior
+- Always use data-testid for locators (MANDATORY)
+- Include explicit waits, never use waitForTimeout()
+- Follow Playwright and TypeScript best practices
+- Ensure tests are maintainable and readable