First attempt at playwright. We need visual e2e tests.

Signed-off-by: Mike Lischke <mike@lischke-online.de>

Author: mike-lischke

.github/workflows/playwright.yml

@@ -0,0 +1,47 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 24
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.x
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browser
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          if-no-files-found: ignore
+
+      - name: Upload Playwright test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-test-results
+          path: test-results/
+          if-no-files-found: ignore

.gitignore

@@ -5,3 +5,6 @@ dist
 .env.local
 .htaccess
 src/generated
+playwright-report
+test-results
+.playwright

build/serve-dist.mjs

@@ -0,0 +1,81 @@
+import { createReadStream, existsSync } from "node:fs";
+import { stat } from "node:fs/promises";
+import { createServer } from "node:http";
+import { extname, join, normalize, resolve } from "node:path";
+
+const port = Number.parseInt(process.env.PORT ?? "4173", 10);
+const host = process.env.HOST ?? "127.0.0.1";
+const distRoot = resolve(process.cwd(), "dist");
+
+const mimeTypes = {
+    ".css": "text/css; charset=utf-8",
+    ".gif": "image/gif",
+    ".html": "text/html; charset=utf-8",
+    ".ico": "image/x-icon",
+    ".jpeg": "image/jpeg",
+    ".jpg": "image/jpeg",
+    ".js": "text/javascript; charset=utf-8",
+    ".json": "application/json; charset=utf-8",
+    ".mp3": "audio/mpeg",
+    ".png": "image/png",
+    ".svg": "image/svg+xml",
+    ".ttf": "font/ttf",
+    ".txt": "text/plain; charset=utf-8",
+    ".wav": "audio/wav",
+    ".webp": "image/webp",
+    ".woff": "font/woff",
+    ".woff2": "font/woff2",
+};
+
+const sendFile = async (filePath, response) => {
+    const fileInfo = await stat(filePath);
+    const extension = extname(filePath).toLowerCase();
+
+    response.writeHead(200, {
+        "Content-Length": fileInfo.size,
+        "Content-Type": mimeTypes[extension] ?? "application/octet-stream",
+        "Cache-Control": "no-store",
+    });
+
+    createReadStream(filePath).pipe(response);
+};
+
+const server = createServer(async (request, response) => {
+    const method = request.method ?? "GET";
+    if (!["GET", "HEAD"].includes(method)) {
+        response.writeHead(405, { "Content-Type": "text/plain; charset=utf-8" });
+        response.end("Method Not Allowed");
+
+        return;
+    }
+
+    const requestUrl = new URL(request.url ?? "/", `http://${host}:${port}`);
+    const requestPath = decodeURIComponent(requestUrl.pathname === "/" ? "/index.html" : requestUrl.pathname);
+    const candidatePath = normalize(join(distRoot, requestPath));
+    const safePath = candidatePath.startsWith(distRoot) ? candidatePath : join(distRoot, "index.html");
+    const filePath = existsSync(safePath) ? safePath : join(distRoot, "index.html");
+
+    try {
+        if (method === "HEAD") {
+            const fileInfo = await stat(filePath);
+            const extension = extname(filePath).toLowerCase();
+            response.writeHead(200, {
+                "Content-Length": fileInfo.size,
+                "Content-Type": mimeTypes[extension] ?? "application/octet-stream",
+                "Cache-Control": "no-store",
+            });
+            response.end();
+
+            return;
+        }
+
+        await sendFile(filePath, response);
+    } catch {
+        response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+        response.end("Not Found");
+    }
+});
+
+server.listen(port, host, () => {
+    console.log(`Serving dist at http://${host}:${port}`);
+});

package-lock.json

@@ -12,7 +12,12 @@
     "scripts": {
         "dev": "vite --host",
         "build": "npm run generate-themes && vite build",
+        "serve:e2e": "node build/serve-dist.mjs",
         "test": "vitest --no-watch",
+        "test:e2e": "playwright test",
+        "test:e2e:headed": "playwright test --headed",
+        "test:e2e:ui": "playwright test --ui",
+        "playwright:install": "playwright install chromium",
         "lint": "eslint 'src/**/*.{ts,tsx}'",
         "watch": "tsc --noEmit --watch",
         "generate-themes": "tsx build/generate-daisyui-themes.ts"
@@ -30,6 +35,7 @@
     },
     "devDependencies": {
         "@eslint/js": "9.39.4",
+        "@playwright/test": "^1.59.1",
         "@preact/preset-vite": "2.10.3",
         "@stylistic/eslint-plugin": "5.10.0",
         "@stylistic/eslint-plugin-ts": "4.4.1",

package.json

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+    testDir: "./tests/e2e",
+    timeout: 30_000,
+    expect: {
+        timeout: 10_000,
+    },
+    fullyParallel: true,
+    retries: process.env.CI ? 1 : 0,
+    reporter: [["list"], ["html", { open: "never" }]],
+    use: {
+        baseURL: "http://127.0.0.1:4173",
+        trace: "on-first-retry",
+        screenshot: "only-on-failure",
+        video: "retain-on-failure",
+    },
+    webServer: {
+        command: "npm run build && npm run serve:e2e",
+        url: "http://127.0.0.1:4173",
+        reuseExistingServer: true,
+        timeout: 120_000,
+    },
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+    ],
+});

playwright.config.ts

@@ -0,0 +1,88 @@
+import { expect, test, type Page } from "@playwright/test";
+
+const routeApi = async (page: Page): Promise<void> => {
+    await page.route("**/api.php**", async (route) => {
+        const url = new URL(route.request().url());
+        const action = url.searchParams.get("action");
+
+        if (action === "listSoundLib") {
+            await route.fulfill({
+                status: 200,
+                contentType: "application/json",
+                body: JSON.stringify([]),
+            });
+
+            return;
+        }
+
+        if (action === "listScoreFolderContent") {
+            await route.fulfill({
+                status: 200,
+                contentType: "application/json",
+                body: JSON.stringify({ folders: [], scores: [] }),
+            });
+
+            return;
+        }
+
+        await route.fulfill({
+            status: 200,
+            contentType: "application/json",
+            body: JSON.stringify({ success: true, id: 1 }),
+        });
+    });
+};
+
+test.beforeEach(async ({ page }) => {
+    await routeApi(page);
+});
+
+test("renders arrangement UI and note grid", async ({ page }) => {
+    await page.goto("/");
+
+    await expect(page.locator("#appRoot")).toBeVisible();
+    await expect(page.locator("#trackViewerHost")).toBeVisible();
+    await expect(page.locator(".bar-track-row .note-viewer").first()).toBeVisible();
+});
+
+test("playback button starts and stops playback", async ({ page }) => {
+    await page.goto("/");
+
+    const playbackToggle = page.locator("#playbackButton");
+    await expect(playbackToggle).toBeVisible();
+
+    await playbackToggle.check({ force: true });
+    await expect(playbackToggle).toBeChecked();
+
+    await playbackToggle.uncheck({ force: true });
+    await expect(playbackToggle).not.toBeChecked();
+});
+
+test("play beam moves while playback is running", async ({ page }) => {
+    await page.goto("/");
+
+    const playbackToggle = page.locator("#playbackButton");
+    const playBeam = page.locator("#playBeam");
+
+    await expect(playbackToggle).toBeVisible();
+    await expect(playBeam).toBeVisible();
+
+    const initialLeft = await playBeam.evaluate((element) => {
+        const left = (element as HTMLElement).style.left;
+        return Number.parseFloat(left || "0");
+    });
+
+    await playbackToggle.check({ force: true });
+    await expect(playbackToggle).toBeChecked();
+
+    await expect.poll(async () => {
+        const left = await playBeam.evaluate((element) => {
+            return Number.parseFloat((element as HTMLElement).style.left || "0");
+        });
+
+        return left !== initialLeft;
+    }).toBeTruthy();
+
+    await playbackToggle.uncheck({ force: true });
+    await expect(playbackToggle).not.toBeChecked();
+});