# Playwright Recordings

This directory contains recorded browser interaction scripts for BSC Score. Use Playwright's codegen to record interactions once, then replay them anytime.

## Quick Start

### Recording Interactions

1. **Start the dev server** (in a separate terminal):
   ```bash
   npm run dev
   ```

2. **Start Playwright codegen**:
   ```bash
   npm run test:record
   ```
   
   This opens:
   - A browser window (use the app normally)
   - Playwright Inspector (shows generated code in real-time)

3. **Interact with the app**:
   - Click buttons, fill forms, navigate
   - All actions are automatically captured
   - Code appears in the Playwright Inspector window

4. **Save your recording**:
   - Copy the generated code from the Inspector
   - Create a new `.ts` file in this directory
   - Paste the code and save (e.g., `create-game-basic.ts`)

### Running Recordings

Run all recordings:
```bash
npm run test:e2e
```

Run a specific recording:
```bash
npx playwright test tests/recordings/create-game-basic.ts
```

Run with UI mode (helpful for debugging):
```bash
npx playwright test --ui
```

## Naming Conventions

Use descriptive names that indicate the flow:
- `create-game-basic.ts` - Basic game creation flow
- `create-game-3players.ts` - Game creation with 3 players
- `score-update.ts` - Score update flow
- `undo-action.ts` - Undo functionality

## Duplicating & Modifying Scripts

This is the key feature! Copy any script to create a variant:

1. **Copy a script**:
   ```bash
   cp create-game-basic.ts create-game-variant.ts
   ```

2. **Modify the copy**:
   - Change player names
   - Modify game type
   - Change the last step (e.g., click 'a' instead of 'z')
   - Add or remove steps

3. **Run the variant**:
   ```bash
   npx playwright test tests/recordings/create-game-variant.ts
   ```

### Example Modification

```typescript
// Original: create-game-basic.ts
await page.click('button:has-text("Option Z")');

// Modified: create-game-variant.ts  
await page.click('button:has-text("Option A")'); // changed from Z to A
```

## Script Structure

All recordings follow this structure:

```typescript
import { test, expect } from '@playwright/test';

test('description of what this script does', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Your recorded interactions here
  await page.click('text=Neues Spiel');
  await page.fill('input[name="player1"]', 'Alice');
  // ... more steps
});
```

## Tips

- **Use the dev server**: Make sure `npm run dev` is running on port 3000 before recording or running scripts
- **Descriptive test names**: The test name helps identify what the script does
- **Comments**: Add comments in scripts to explain non-obvious steps
- **Wait for navigation**: If something doesn't work, you might need to add `await page.waitForNavigation()` or `await page.waitForSelector()`

## Common Patterns

### Fill a form field
```typescript
await page.fill('input[name="fieldName"]', 'value');
```

### Click a button
```typescript
await page.click('button:has-text("Button Text")');
```

### Wait for element
```typescript
await page.waitForSelector('text=Expected Text');
```

### Check element is visible
```typescript
await expect(page.locator('text=Some Text')).toBeVisible();
```

## Troubleshooting

**Script fails with "element not found"**:
- Add wait statements: `await page.waitForSelector('selector')`
- Check if the selector changed (use Playwright Inspector to find new selectors)

**Browser doesn't open during recording**:
- Make sure dev server is running on port 3000
- Check if port 3000 is available

**Test runs but doesn't do anything**:
- Check that baseURL in `playwright.config.ts` is correct
- Verify the app is accessible at `http://localhost:3000`