feat: add Playwright E2E tests for critical game functionality

Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>

Author: Copilot

.gitignore

@@ -97,4 +97,7 @@ dev-dist
 *.sln
 *.sw?
 
-### /Vite ###
+### /Vite ###
+# Playwright
+test-results/
+playwright-report/

e2e/game.spec.ts

@@ -0,0 +1,113 @@
+import { test, expect, type Page } from '@playwright/test';
+
+async function waitForBoard(page: Page) {
+  await page.goto('/');
+  await page.locator('#board').waitFor({ state: 'visible' });
+}
+
+test.describe('Game board', () => {
+  test.beforeEach(async ({ page }) => {
+    await waitForBoard(page);
+  });
+
+  test('renders the board with toolbar and dice', async ({ page }) => {
+    await expect(page.locator('#board')).toBeVisible();
+    await expect(page.locator('#toolbar')).toBeVisible();
+    await expect(page.locator('.dice')).toBeVisible();
+  });
+
+  test('displays 24 points, 2 bar areas, and 2 home areas', async ({ page }) => {
+    await expect(page.locator('.point')).toHaveCount(24);
+    await expect(page.locator('.bar')).toHaveCount(2);
+    await expect(page.locator('.home')).toHaveCount(2);
+  });
+
+  test('toolbar shows offline game label when no opponent is loaded', async ({ page }) => {
+    await expect(page.locator('#toolbar h2')).toHaveText('Offline Game');
+  });
+
+  test('pieces are present on the starting board', async ({ page }) => {
+    const pieces = page.locator('.piece:not(.ghost)');
+    await expect(pieces).toHaveCount(30);
+  });
+});
+
+test.describe('Dice', () => {
+  test.beforeEach(async ({ page }) => {
+    await waitForBoard(page);
+  });
+
+  test('dice start in pulsating rolling state', async ({ page }) => {
+    await expect(page.locator('.dice.pulsate')).toBeVisible();
+  });
+
+  test('rolling dice transitions from rolling to moving state', async ({ page }) => {
+    await expect(page.locator('.dice.pulsate')).toBeVisible();
+    await page.locator('.dice').click();
+    await expect(page.locator('.dice')).not.toHaveClass(/pulsate/);
+  });
+
+  test('rolling dice shows two die images', async ({ page }) => {
+    await page.locator('.dice').click();
+    await expect(page.locator('.dice img')).toHaveCount(2);
+  });
+});
+
+test.describe('Piece selection', () => {
+  test.beforeEach(async ({ page }) => {
+    await waitForBoard(page);
+  });
+
+  test('clicking a point selects it in local mode', async ({ page }) => {
+    const point = page.locator('.point').first();
+    await point.click();
+    await expect(point).toHaveClass(/selected/);
+  });
+
+  test('clicking a selected point deselects it', async ({ page }) => {
+    const point = page.locator('.point').first();
+    await point.click();
+    await expect(point).toHaveClass(/selected/);
+    await point.click();
+    await expect(point).not.toHaveClass(/selected/);
+  });
+
+  test('selecting a different point moves the selection', async ({ page }) => {
+    const firstPoint = page.locator('.point').nth(0);
+    const secondPoint = page.locator('.point').nth(11);
+    await firstPoint.click();
+    await expect(firstPoint).toHaveClass(/selected/);
+    await secondPoint.click();
+    await expect(firstPoint).not.toHaveClass(/selected/);
+    await expect(secondPoint).toHaveClass(/selected/);
+  });
+});
+
+test.describe('Login dialog', () => {
+  test.beforeEach(async ({ page }) => {
+    await waitForBoard(page);
+  });
+
+  test('dialog is initially closed', async ({ page }) => {
+    await expect(page.locator('dialog')).not.toBeVisible();
+  });
+
+  test('toolbar click opens the login dialog', async ({ page }) => {
+    await page.locator('#toolbar').click();
+    await expect(page.locator('dialog[open]')).toBeVisible();
+    await expect(page.locator('#login')).toBeVisible();
+  });
+
+  test('login dialog contains a menu button and title', async ({ page }) => {
+    await page.locator('#toolbar').click();
+    await expect(page.locator('#login button[aria-haspopup="menu"]')).toBeVisible();
+    await expect(page.locator('#login h1')).toBeVisible();
+  });
+
+  test('clicking outside the dialog closes it', async ({ page }) => {
+    await page.locator('#toolbar').click();
+    await expect(page.locator('dialog[open]')).toBeVisible();
+    await page.locator('#board').click({ position: { x: 5, y: 5 }, force: true });
+    await expect(page.locator('dialog')).not.toBeVisible();
+  });
+});

package.json

@@ -16,6 +16,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
+    "test:e2e": "playwright test",
     "preview": "vite preview",
     "functions": "yarn workspace functions deploy"
   },
@@ -41,6 +42,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.2.0",
+    "@playwright/test": "1.58.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",

playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30000,
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? 'github' : 'list',
+  use: {
+    baseURL: 'http://localhost:5173',
+    locale: 'en-US',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'yarn start',
+    port: 5173,
+    reuseExistingServer: !process.env.CI,
+    timeout: 60000, // 60 seconds for initial build
+  },
+});

yarn.lock

@@ -3264,6 +3264,13 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
   integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
 
+"@playwright/test@1.58.2":
+  version "1.58.2"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.58.2.tgz#b0ad585d2e950d690ef52424967a42f40c6d2cbd"
+  integrity sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==
+  dependencies:
+    playwright "1.58.2"
+
 "@pnpm/config.env-replace@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz#ab29da53df41e8948a00f2433f085f54de8b3a4c"
@@ -6779,6 +6786,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@^2.3.3, fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -9767,6 +9779,20 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+playwright-core@1.58.2:
+  version "1.58.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.58.2.tgz#ac5f5b4b10d29bcf934415f0b8d133b34b0dcb13"
+  integrity sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==
+
+playwright@1.58.2:
+  version "1.58.2"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.58.2.tgz#afe547164539b0bcfcb79957394a7a3fa8683cfd"
+  integrity sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==
+  dependencies:
+    playwright-core "1.58.2"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 portfinder@^1.0.32:
   version "1.0.38"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.38.tgz#e4fb3a2d888b20d2977da050e48ab5e1f57a185e"