playwright-flow-recorder

# Playwright Flow Recorder

Generate Playwright test scripts from natural language scenario descriptions.

## Overview

To create E2E tests from user flow descriptions, this skill translates natural language scenarios into executable Playwright test code with proper assertions, error handling, and best practices.

## When to Use

Use this skill when:
- Converting user stories to E2E tests
- Generating tests from acceptance criteria
- Creating test scripts from flow descriptions
- Translating business requirements into tests
- Documenting user journeys as executable tests
- Building test coverage for critical user paths

## Flow Description Format

### Simple Flow

```
User signs up with email and password
```

### Detailed Flow

```
1. User navigates to signup page
2. User fills in email field
3. User fills in password field
4. User clicks signup button
5. User sees success message
6. User is redirected to dashboard
```

### Acceptance Criteria Format

```
Given: User is on the homepage
When: User clicks "Get Started"
And: User fills in registration form
And: User submits the form
Then: User sees "Welcome" message
And: User is on the dashboard page
```

## Generation Process

### 1. Parse Flow Description

To analyze the scenario, use `scripts/parse_flow.py`:

```bash
python scripts/parse_flow.py --input "user creates entity and adds relationships"
```

The script identifies:
- Actions (navigate, click, fill, select, etc.)
- Elements (buttons, inputs, links, etc.)
- Assertions (sees, redirected, displays, etc.)
- Data inputs (form values, selections, etc.)

### 2. Map to Playwright Actions

To convert parsed steps to Playwright code, use the action mapping:

**Navigation:**
- "navigates to X" → `await page.goto('/x')`
- "clicks X" → `await page.getByRole('button', { name: /x/i }).click()`
- "selects X from Y" → `await page.getByLabel(/y/i).selectOption('x')`

**Form Input:**
- "fills X with Y" → `await page.getByLabel(/x/i).fill('y')`
- "enters X" → `await page.getB