feat: tablet-first UX overhaul with wizard improvements
- Tablet-first responsive scoreboard: whole player card is tap target - Per-step wizard backgrounds and live summary panel - Larger touch targets, safe-area handling, reduced-motion support - German UI error strings in App.tsx - Updated SOUL.md and README.md for current architecture - Cleanup: removed legacy components, .cursor/, UI_IMPROVEMENTS.md - Renamed package to bscscore, fixed TOTAL_WIZARD_STEPS
This commit is contained in:
Frank Schwenk
@@ -0,0 +1,47 @@
|
||||
import type { Page } from '@playwright/test';
|
||||
import { expect } from '@playwright/test';
|
||||
|
||||
const PLAYER_INPUT_IDS: Record<string, string> = {
|
||||
'Spieler 1': 'player1-input',
|
||||
'Spieler 2': 'player2-input',
|
||||
'Spieler 3 (optional)': 'player3-input',
|
||||
};
|
||||
|
||||
/** Open name modal, fill input, confirm — advances wizard step. */
|
||||
export async function enterPlayerName(
|
||||
page: Page,
|
||||
label: string,
|
||||
placeholder: string,
|
||||
name: string,
|
||||
) {
|
||||
const inputId = PLAYER_INPUT_IDS[label];
|
||||
await page.getByRole('button', { name: `Name für ${label} eingeben` }).click();
|
||||
const dialog = page.getByRole('dialog');
|
||||
await expect(dialog).toBeVisible();
|
||||
const input = inputId ? page.locator(`#${inputId}`) : dialog.getByRole('textbox');
|
||||
await expect(input).toBeFocused();
|
||||
await input.fill(name);
|
||||
await dialog.getByRole('button', { name: 'Übernehmen' }).click();
|
||||
await expect(dialog).toBeHidden();
|
||||
}
|
||||
|
||||
export async function skipPlayer3(page: Page) {
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
}
|
||||
|
||||
export async function addPoint(page: Page, playerName: string, currentScore: number) {
|
||||
await page
|
||||
.getByRole('button', { name: `Punkt für ${playerName}. Aktueller Stand: ${currentScore}` })
|
||||
.click();
|
||||
}
|
||||
|
||||
export async function addPoints(
|
||||
page: Page,
|
||||
playerName: string,
|
||||
count: number,
|
||||
startScore = 0,
|
||||
) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await addPoint(page, playerName, startScore + i);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* Capture wow-brief verification screenshots across 4 viewports.
|
||||
* Usage: PW_EXECUTABLE=... node tests/helpers/wow-screenshots.mjs
|
||||
*/
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const BASE_URL = process.env.BASE_URL ?? 'http://localhost:3000';
|
||||
const executablePath = process.env.PW_EXECUTABLE;
|
||||
|
||||
const viewports = [
|
||||
{ name: '1280x800', width: 1280, height: 800 },
|
||||
{ name: '1024x768', width: 1024, height: 768 },
|
||||
{ name: '844x390', width: 844, height: 390 },
|
||||
{ name: '390x844', width: 390, height: 844 },
|
||||
];
|
||||
|
||||
async function dismissDevToolbar(page) {
|
||||
await page.evaluate(() => {
|
||||
document.querySelector('astro-dev-toolbar')?.remove();
|
||||
});
|
||||
}
|
||||
|
||||
async function clickButton(page, name) {
|
||||
await dismissDevToolbar(page);
|
||||
await page.getByRole('button', { name }).click({ force: true });
|
||||
}
|
||||
|
||||
async function capture(page, path) {
|
||||
await dismissDevToolbar(page);
|
||||
await page.screenshot({ path, fullPage: false });
|
||||
console.log(`saved ${path}`);
|
||||
}
|
||||
|
||||
async function enterPlayerName(page, label, name, inputId) {
|
||||
await clickButton(page, `Name für ${label} eingeben`);
|
||||
const dialog = page.getByRole('dialog');
|
||||
const input = dialog.locator(`#${inputId}`);
|
||||
await input.waitFor({ state: 'visible' });
|
||||
await input.click();
|
||||
await input.pressSequentially(name, { delay: 15 });
|
||||
await dialog.getByRole('button', { name: 'Übernehmen' }).click({ force: true });
|
||||
await dialog.waitFor({ state: 'hidden', timeout: 10000 });
|
||||
}
|
||||
|
||||
async function freshPage(page, vp) {
|
||||
await page.setViewportSize({ width: vp.width, height: vp.height });
|
||||
await page.goto(`${BASE_URL}/?t=${Date.now()}`, { waitUntil: 'domcontentloaded' });
|
||||
await dismissDevToolbar(page);
|
||||
await page.waitForTimeout(400);
|
||||
}
|
||||
|
||||
async function runWizardToScoreboard(page) {
|
||||
await clickButton(page, 'Neues Spiel starten');
|
||||
await enterPlayerName(page, 'Spieler 1', 'Alice', 'player1-input');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Bob', 'player2-input');
|
||||
await clickButton(page, 'Überspringen');
|
||||
await clickButton(page, '9-Ball');
|
||||
await clickButton(page, '3');
|
||||
await clickButton(page, 'Break-Regel wählen: Winnerbreak');
|
||||
await clickButton(page, 'Zuerst: Alice');
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const browser = await chromium.launch({
|
||||
headless: true,
|
||||
...(executablePath ? { executablePath } : {}),
|
||||
});
|
||||
|
||||
const page = await browser.newPage();
|
||||
|
||||
for (const vp of viewports) {
|
||||
await freshPage(page, vp);
|
||||
await capture(page, `/tmp/wow-list-${vp.name}.png`);
|
||||
|
||||
await clickButton(page, 'Neues Spiel starten');
|
||||
await page.waitForTimeout(400);
|
||||
await capture(page, `/tmp/wow-wizard-${vp.name}.png`);
|
||||
|
||||
await freshPage(page, vp);
|
||||
await runWizardToScoreboard(page);
|
||||
await page.waitForTimeout(400);
|
||||
await capture(page, `/tmp/wow-scoreboard-${vp.name}.png`);
|
||||
|
||||
for (let score = 0; score < 3; score++) {
|
||||
await clickButton(page, `Punkt für Alice. Aktueller Stand: ${score}`);
|
||||
await page.waitForTimeout(150);
|
||||
}
|
||||
await page.waitForTimeout(600);
|
||||
await capture(page, `/tmp/wow-victory-${vp.name}.png`);
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
console.log('Done — screenshots in /tmp/wow-*.png');
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,26 +1,22 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Kim');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Leo');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Kim');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Leo');
|
||||
await skipPlayer3(page);
|
||||
await page.getByRole('button', { name: '10-Ball' }).click();
|
||||
await page.getByRole('button', { name: 'Endlos' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Leo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
|
||||
await addPoint(page, 'Leo', 0);
|
||||
await addPoint(page, 'Kim', 0);
|
||||
await addPoint(page, 'Leo', 1);
|
||||
await addPoint(page, 'Kim', 1);
|
||||
await addPoint(page, 'Leo', 2);
|
||||
await addPoint(page, 'Kim', 2);
|
||||
await page.getByRole('button', { name: 'Spiel beenden' }).click();
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,24 +1,20 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Charlie');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Diana');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Charlie');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Diana');
|
||||
await skipPlayer3(page);
|
||||
await page.getByRole('button', { name: '10-Ball' }).click();
|
||||
await page.getByRole('button', { name: '3' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Diana' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Charlie' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
|
||||
await addPoint(page, 'Diana', 0);
|
||||
await addPoint(page, 'Charlie', 0);
|
||||
await addPoint(page, 'Diana', 1);
|
||||
await addPoint(page, 'Diana', 2);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Wendy');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Xavier');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Wendy');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Xavier');
|
||||
await skipPlayer3(page);
|
||||
await page.getByRole('button', { name: '8-Ball' }).click();
|
||||
await page.getByRole('button', { name: '5' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Xavier' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
|
||||
await addPoint(page, 'Xavier', 0);
|
||||
await addPoint(page, 'Wendy', 0);
|
||||
await addPoint(page, 'Xavier', 1);
|
||||
await addPoint(page, 'Wendy', 1);
|
||||
await addPoint(page, 'Xavier', 2);
|
||||
await addPoint(page, 'Wendy', 2);
|
||||
await addPoint(page, 'Xavier', 3);
|
||||
await addPoint(page, 'Wendy', 3);
|
||||
await addPoint(page, 'Xavier', 4);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,31 +1,27 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Mia');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Noah');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Mia');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Noah');
|
||||
await skipPlayer3(page);
|
||||
await page.getByRole('button', { name: '8-Ball' }).click();
|
||||
await page.getByRole('button', { name: '9' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Noah' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Noah' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
|
||||
await addPoint(page, 'Mia', 0);
|
||||
await addPoint(page, 'Noah', 0);
|
||||
await addPoint(page, 'Mia', 1);
|
||||
await addPoint(page, 'Mia', 2);
|
||||
await addPoint(page, 'Noah', 1);
|
||||
await addPoint(page, 'Mia', 3);
|
||||
await addPoint(page, 'Mia', 4);
|
||||
await addPoint(page, 'Mia', 5);
|
||||
await addPoint(page, 'Mia', 6);
|
||||
await addPoint(page, 'Mia', 7);
|
||||
await addPoint(page, 'Mia', 8);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,26 +1,23 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Foo');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bar');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Foo');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Bar');
|
||||
await skipPlayer3(page);
|
||||
await page.getByRole('button', { name: '8-Ball' }).click();
|
||||
await page.getByRole('button', { name: 'Endlos' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await addPoint(page, 'Foo', 0);
|
||||
await addPoint(page, 'Bar', 0);
|
||||
await addPoint(page, 'Foo', 1);
|
||||
await addPoint(page, 'Bar', 1);
|
||||
await addPoint(page, 'Foo', 2);
|
||||
await addPoint(page, 'Foo', 3);
|
||||
await addPoint(page, 'Foo', 4);
|
||||
await page.getByRole('button', { name: 'Spiel beenden' }).click();
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,21 +1,17 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Rita');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Sam');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Rita');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Sam');
|
||||
await skipPlayer3(page);
|
||||
await page.getByRole('button', { name: '9-Ball' }).click();
|
||||
await page.getByRole('button', { name: '1' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Sam' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Sam' }).click();
|
||||
await addPoint(page, 'Sam', 0);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,26 +1,22 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Alice');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bob');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Alice');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Bob');
|
||||
await skipPlayer3(page);
|
||||
await page.getByRole('button', { name: '9-Ball' }).click();
|
||||
await page.getByRole('button', { name: '5' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Alice' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Bob' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
|
||||
await addPoint(page, 'Alice', 0);
|
||||
await addPoint(page, 'Bob', 0);
|
||||
await addPoint(page, 'Alice', 1);
|
||||
await addPoint(page, 'Alice', 2);
|
||||
await addPoint(page, 'Alice', 3);
|
||||
await addPoint(page, 'Alice', 4);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,29 +1,23 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Oscar');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Paula');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Quinn');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Oscar');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Paula');
|
||||
await enterPlayerName(page, 'Spieler 3 (optional)', 'Name Spieler 3 (optional)', 'Quinn');
|
||||
await page.getByRole('button', { name: '10-Ball' }).click();
|
||||
await page.getByRole('button', { name: '5' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Quinn' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Oscar' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Paula' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
|
||||
await addPoint(page, 'Quinn', 0);
|
||||
await addPoint(page, 'Oscar', 0);
|
||||
await addPoint(page, 'Paula', 0);
|
||||
await addPoint(page, 'Quinn', 1);
|
||||
await addPoint(page, 'Quinn', 2);
|
||||
await addPoint(page, 'Quinn', 3);
|
||||
await addPoint(page, 'Quinn', 4);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,29 +1,23 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Eva');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Frank');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Grace');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Eva');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Frank');
|
||||
await enterPlayerName(page, 'Spieler 3 (optional)', 'Name Spieler 3 (optional)', 'Grace');
|
||||
await page.getByRole('button', { name: '8-Ball' }).click();
|
||||
await page.getByRole('button', { name: 'Endlos' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Eva' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Frank' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Grace' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Frank' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Grace' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
|
||||
await addPoint(page, 'Eva', 0);
|
||||
await addPoint(page, 'Frank', 0);
|
||||
await addPoint(page, 'Grace', 0);
|
||||
await addPoint(page, 'Eva', 1);
|
||||
await addPoint(page, 'Frank', 1);
|
||||
await addPoint(page, 'Grace', 1);
|
||||
await addPoint(page, 'Eva', 2);
|
||||
await page.getByRole('button', { name: 'Spiel beenden' }).click();
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,28 +1,22 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Tom');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Uma');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Victor');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Tom');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Uma');
|
||||
await enterPlayerName(page, 'Spieler 3 (optional)', 'Name Spieler 3 (optional)', 'Victor');
|
||||
await page.getByRole('button', { name: '8-Ball' }).click();
|
||||
await page.getByRole('button', { name: '3' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Tom' }).click();
|
||||
await page.getByRole('button', { name: 'Zweites Break: Uma' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Uma' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Victor' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
|
||||
await addPoint(page, 'Tom', 0);
|
||||
await addPoint(page, 'Uma', 0);
|
||||
await addPoint(page, 'Victor', 0);
|
||||
await addPoint(page, 'Tom', 1);
|
||||
await addPoint(page, 'Tom', 2);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,33 +1,27 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Henry');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Iris');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Jack');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Henry');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Iris');
|
||||
await enterPlayerName(page, 'Spieler 3 (optional)', 'Name Spieler 3 (optional)', 'Jack');
|
||||
await page.getByRole('button', { name: '9-Ball' }).click();
|
||||
await page.getByRole('button', { name: '7' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Iris' }).click();
|
||||
await page.getByRole('button', { name: 'Zweites Break: Jack' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Henry' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Jack' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Henry' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
|
||||
await addPoint(page, 'Iris', 0);
|
||||
await addPoint(page, 'Henry', 0);
|
||||
await addPoint(page, 'Jack', 0);
|
||||
await addPoint(page, 'Iris', 1);
|
||||
await addPoint(page, 'Henry', 1);
|
||||
await addPoint(page, 'Iris', 2);
|
||||
await addPoint(page, 'Iris', 3);
|
||||
await addPoint(page, 'Iris', 4);
|
||||
await addPoint(page, 'Iris', 5);
|
||||
await addPoint(page, 'Iris', 6);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,26 +1,23 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { test } from '@playwright/test';
|
||||
import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/');
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Foo');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).click();
|
||||
await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bar');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Foo');
|
||||
await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Bar');
|
||||
await skipPlayer3(page);
|
||||
await page.getByRole('button', { name: '8-Ball' }).click();
|
||||
await page.getByRole('button', { name: '6' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
|
||||
await addPoint(page, 'Foo', 0);
|
||||
await addPoint(page, 'Bar', 0);
|
||||
await addPoint(page, 'Foo', 1);
|
||||
await addPoint(page, 'Foo', 2);
|
||||
await addPoint(page, 'Foo', 3);
|
||||
await addPoint(page, 'Foo', 4);
|
||||
await addPoint(page, 'Foo', 5);
|
||||
await page.getByRole('button', { name: 'Bestätigen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { skipPlayer3 } from '../helpers/wizard';
|
||||
|
||||
const LANDSCAPE_VIEWPORTS = [
|
||||
{ name: 'small-landscape', width: 1024, height: 600 },
|
||||
@@ -13,36 +14,42 @@ for (const viewport of LANDSCAPE_VIEWPORTS) {
|
||||
|
||||
await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
|
||||
|
||||
// Step 1: ensure keyboard-sized viewport still keeps controls usable.
|
||||
await page.getByLabel('Name Spieler 1').fill('Alpha');
|
||||
await page.getByRole('button', { name: 'Name für Spieler 1 eingeben' }).click();
|
||||
await page.setViewportSize({
|
||||
width: viewport.width,
|
||||
height: Math.max(360, viewport.height - Math.floor(viewport.height * 0.35)),
|
||||
});
|
||||
const nextButton = page.getByRole('button', { name: 'Weiter' });
|
||||
await nextButton.scrollIntoViewIfNeeded();
|
||||
await expect(nextButton).toBeVisible();
|
||||
await nextButton.click();
|
||||
const player1Dialog = page.getByRole('dialog');
|
||||
const player1Input = page.locator('#player1-input');
|
||||
await expect(player1Input).toBeFocused();
|
||||
await player1Input.fill('Alpha');
|
||||
const confirmButton = player1Dialog.getByRole('button', { name: 'Übernehmen' });
|
||||
await confirmButton.scrollIntoViewIfNeeded();
|
||||
await expect(confirmButton).toBeVisible();
|
||||
await confirmButton.click();
|
||||
await expect(player1Dialog).toBeHidden();
|
||||
|
||||
// Step 2: keep reduced height and verify progression still works.
|
||||
await page.getByLabel('Name Spieler 2').fill('Beta');
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await page.getByRole('button', { name: 'Name für Spieler 2 eingeben' }).click();
|
||||
const player2Dialog = page.getByRole('dialog');
|
||||
const player2Input = page.locator('#player2-input');
|
||||
await expect(player2Input).toBeFocused();
|
||||
await player2Input.fill('Beta');
|
||||
await player2Dialog.getByRole('button', { name: 'Übernehmen' }).click();
|
||||
await expect(player2Dialog).toBeHidden();
|
||||
await skipPlayer3(page);
|
||||
|
||||
// Restore full landscape viewport for remaining wizard steps.
|
||||
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
||||
|
||||
await page.getByRole('button', { name: '8-Ball' }).click();
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: '5' }).click();
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
await page.getByRole('button', { name: 'Zuerst: Alpha' }).click();
|
||||
await page.getByRole('button', { name: 'Weiter' }).click();
|
||||
|
||||
await expect(page.getByRole('button', { name: /Aktueller Punktestand für Alpha/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /Aktueller Punktestand für Beta/i })).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole('button', { name: 'Punkt für Alpha. Aktueller Stand: 0' }),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole('button', { name: 'Punkt für Beta. Aktueller Stand: 0' }),
|
||||
).toBeVisible();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user