bscscore/tests/recordings/README.md

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):

   npm run dev
   

2. Start Playwright codegen:

   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:

npm run test:e2e

Run a specific recording:

npx playwright test tests/recordings/create-game-basic.ts

Run with UI mode (helpful for debugging):

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:

   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:

   npx playwright test tests/recordings/create-game-variant.ts
   

Example Modification

// 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:

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

await page.fill('input[name="fieldName"]', 'value');

Click a button

await page.click('button:has-text("Button Text")');

Wait for element

await page.waitForSelector('text=Expected Text');

Check element is visible

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