113 lines
4.5 KiB
Markdown
113 lines
4.5 KiB
Markdown
# Mock HTML Fixtures
|
|
|
|
Simplified HTML fixtures for E2E testing of the iRacing hosted session automation workflow.
|
|
|
|
## Purpose
|
|
|
|
These fixtures replace full-page iRacing dumps with lightweight, testable HTML pages that simulate the iRacing hosted session wizard. They are designed for use with the `FixtureServer` to test browser automation adapters in isolation.
|
|
|
|
## Files
|
|
|
|
| File | Step | Description |
|
|
|------|------|-------------|
|
|
| `step-02-hosted-racing.html` | 2 | Landing page with "Create a Race" button |
|
|
| `step-03-create-race.html` | 3 | Race Information - session name, password, description |
|
|
| `step-04-race-information.html` | 4 | Server Details - region, start time |
|
|
| `step-05-server-details.html` | 5 | Set Admins - admin list management |
|
|
| `step-06-set-admins.html` | 7 | Time Limits - practice, qualify, race durations |
|
|
| `step-07-add-admin.html` | 6 | Add Admin Modal - search and select admin |
|
|
| `step-08-time-limits.html` | 8 | Set Cars - car list management |
|
|
| `step-09-set-cars.html` | 10 | Set Car Classes - multi-class configuration |
|
|
| `step-10-add-car.html` | 9 | Add Car Modal - search and select cars |
|
|
| `step-11-set-car-classes.html` | 11 | Set Track - track selection |
|
|
| `step-12-set-track.html` | 13 | Track Options - configuration, dynamic track |
|
|
| `step-13-add-track.html` | 12 | Add Track Modal - search and select track |
|
|
| `step-14-track-options.html` | 14 | Time of Day - time slider, date, simulated time |
|
|
| `step-15-time-of-day.html` | 15 | Weather - type, temperature, humidity |
|
|
| `step-16-weather.html` | 16 | Race Options - max drivers, start type, cautions |
|
|
| `step-17-race-options.html` | 17 | Team Driving - enable teams, min/max drivers |
|
|
| `step-18-track-conditions.html` | 18 | Track Conditions - track state, marbles, rubber |
|
|
| `common.css` | - | Shared styles for all fixtures |
|
|
|
|
## Data Attributes
|
|
|
|
All fixtures use consistent `data-*` attributes for reliable automation:
|
|
|
|
### Navigation
|
|
- `data-action="create"` - Create a Race button (step 2)
|
|
- `data-action="next"` - Next step button
|
|
- `data-action="back"` - Previous step button
|
|
- `data-action="confirm"` - Confirm modal action
|
|
- `data-action="cancel"` - Cancel modal action
|
|
- `data-action="select"` - Select item from list
|
|
|
|
### Step Identification
|
|
- `data-step="N"` - Step number on body element
|
|
- `data-indicator="name"` - Step indicator element
|
|
|
|
### Form Fields
|
|
- `data-field="name"` - Text/number inputs and textareas
|
|
- `data-dropdown="name"` - Select dropdowns
|
|
- `data-toggle="name"` - Checkbox toggles
|
|
- `data-slider="name"` - Range slider inputs
|
|
|
|
### Modals
|
|
- `data-modal="true"` - Modal container (on body)
|
|
- `data-modal-trigger="type"` - Button that opens a modal
|
|
|
|
### Lists
|
|
- `data-list="name"` - List container
|
|
- `data-item="id"` - Selectable list item
|
|
|
|
## Usage with FixtureServer
|
|
|
|
```typescript
|
|
import { FixtureServer } from '@infrastructure/adapters/automation/FixtureServer';
|
|
|
|
const server = new FixtureServer({ fixturesPath: 'resources/mock-fixtures' });
|
|
await server.start();
|
|
|
|
// Navigate to step 2
|
|
await page.goto(`${server.baseUrl}/step-02-hosted-racing.html`);
|
|
|
|
// Use data attributes for automation
|
|
await page.click('[data-action="create"]');
|
|
await page.fill('[data-field="sessionName"]', 'My Race');
|
|
await page.click('[data-action="next"]');
|
|
```
|
|
|
|
## Selector Strategy
|
|
|
|
Use attribute selectors for reliable automation:
|
|
|
|
```typescript
|
|
const SELECTORS = {
|
|
stepContainer: (step: number) => `[data-step="${step}"]`,
|
|
nextButton: '[data-action="next"]',
|
|
backButton: '[data-action="back"]',
|
|
field: (name: string) => `[data-field="${name}"]`,
|
|
dropdown: (name: string) => `[data-dropdown="${name}"]`,
|
|
toggle: (name: string) => `[data-toggle="${name}"]`,
|
|
slider: (name: string) => `[data-slider="${name}"]`,
|
|
modal: '[data-modal="true"]',
|
|
modalTrigger: (type: string) => `[data-modal-trigger="${type}"]`,
|
|
};
|
|
```
|
|
|
|
## Design Principles
|
|
|
|
1. **Explicit Test Attributes**: Every interactive element has stable `data-*` attributes
|
|
2. **Minimal HTML**: Only essential structure, no framework artifacts
|
|
3. **Self-Contained**: Each fixture includes shared CSS via `common.css`
|
|
4. **Navigation-Aware**: Buttons link to appropriate next/previous fixtures
|
|
5. **Form Fields Match Domain**: Field names align with `HostedSessionConfig` entity
|
|
|
|
## Testing Verification
|
|
|
|
For each fixture, verify:
|
|
- [ ] `data-step` attribute present on body
|
|
- [ ] `data-indicator` present for step identification
|
|
- [ ] All navigation buttons have `data-action`
|
|
- [ ] All form fields have appropriate `data-*` attributes
|
|
- [ ] Modal fixtures have `data-modal="true"`
|
|
- [ ] Navigation links point to correct fixtures |