e2e

# E2E Test Generator Skill

This skill generates E2E tests using **playwright-cli** commands for browser automation. It uses the **Page Object Model** pattern and supports **visual regression testing** with the `@visual` tag in test titles.

## When to Use

Use this skill when:
- The user provides a URL to explore and create tests for
- You need to create new E2E tests for a web application
- You want to generate Page Object classes for a website
- Visual regression tests are needed (integrated with integration tests using `@visual` tag)

## Prerequisites

- **playwright-cli** installed globally (`npm install -g @playwright/cli@latest`)
- Target URL must be accessible
- Project should have Playwright configured

---

## Workflow Overview

```
1. EXPLORE → Navigate to URL, take snapshot, understand the page structure
2. PLAN → Identify testable features and create test plan
3. GENERATE PAGES → Create Page Object classes
4. GENERATE TESTS → Create test specs (add @visual tag for visual checks)
5. VALIDATE → Run tests to ensure they pass
```

---

## References

For detailed exploration techniques and CLI commands, see:
- **[references/component-exploration.md](references/component-exploration.md)** - How to explore UI components, CLI browser commands, locator strategies
- **[references/api-mocking.md](references/api-mocking.md)** - How to mock API responses using `mockApi` utility for deterministic tests

## Examples

For code templates and patterns, see:
- **[examples/page-object-model.md](examples/page-object-model.md)** - Page Object class templates and helper patterns
- **[examples/e2e-tests.md](examples/e2e-tests.md)** - Integration test templates with `@visual` tag for visual testing

---

## Quick Start Workflow

### Phase 1: URL Exploration

1. **Open URL**
   ```bash
   playwright-cli open https://example.com
   ```

2. **Take Page Snapshot**
   ```bash
   playwright-cli snapshot
   ```

3. **Identify Interactive Elements** from snapshot output:
   - Buttons,