---
description: Frontend testing standards using Playwright for end-to-end testing
globs: **/*.{ts,js,svelte}
---
<rule>
When working on frontend features:

1. Test Coverage Requirements:
   - All new features must have e2e tests
   - Critical user flows must be tested
   - Test both success and error paths
   - Test responsive behavior for mobile/desktop
   - Test accessibility where applicable

2. Test Structure:
   - Use descriptive test names
   - Group related tests in describe blocks
   - Use beforeEach for common setup
   - Clean up test data after each test
   - Keep tests focused and atomic

3. Testing Best Practices:
   - Test user interactions, not implementation
   - Use data-testid for test-specific selectors
   - Test across different viewport sizes
   - Test across multiple browsers
   - Verify visual and functional aspects

4. Required Test Cases:
   - Navigation flows
   - Form submissions
   - Error handling
   - Loading states
   - Responsive behavior
   - Cross-browser compatibility

5. Running Tests:
   - Run tests before committing: `bun test`
   - Debug tests with UI: `bun test:ui`
   - Debug specific test: `bun test:debug`
   - Install browsers: `bun test:install`

6. CI Integration:
   - Tests must pass in CI
   - Screenshots on failure
   - HTML test reports
   - Retry failed tests
   - Parallel execution where possible

metadata:
  priority: high
  version: 1.0
</rule>

examples:
  - input: |
      # Bad: No tests for new feature
      git commit -m "feat: add note search"
    output: |
      # Good: Feature with tests
      bun test
      git commit -m "feat: add note search with e2e tests
      
      Tests added:
      - Search functionality
      - Empty results handling
      - Error states
      - Mobile layout"

  - input: |
      # Bad: Testing implementation details
      test('internal state is correct', () => {
        expect(component.state.value).toBe(true)
      })
    output: |
      # Good: Testing user interaction
      test('user can toggle feature', async ({ page }) => {
        await page.click('[data-testid=toggle]')
        await expect(page.locator('.status')).toHaveText('Enabled')
      })