65aaa92359
- Add @playwright/test as dev dependency - Create playwright.config.ts with Chrome-only testing config - Add npm scripts: test:record, test:e2e, test:replay - Create 13 test recordings covering: - 2-player and 3-player games - 8-ball, 9-ball, and 10-ball game types - Various race-to values (1, 3, 5, 7, 9) and "endlos" mode - Both wechselbreak (alternating) and winnerbreak rules - Fix Infinity handling in gameService.ts and NewGameScreen.tsx - Parse "endlos" and "Infinity" strings as Infinity number - Properly serialize Infinity as string in form data - Increase GameDetail score font size from 20vh to 40vh - Update README.md with testing documentation: - Quick start guide for recording and running tests - Move E2E testing from "Future Improvements" (now implemented) - Add comprehensive tests/recordings/README.md documentation Purpose: Establishes browser automation testing infrastructure with real workflow recordings, enabling regression testing and interaction documentation for all game configuration combinations.
148 lines
3.7 KiB
Markdown
148 lines
3.7 KiB
Markdown
# 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`
|
|
|