test(e2e): playwright web smoke against the production bundle

.github/workflows/deploy.yml

@@ -40,6 +40,17 @@ jobs:
 
       - run: pnpm build
 
+      - uses: actions/cache@v4
+        id: pw-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+      - if: steps.pw-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium
+      # OS deps are not cacheable; the runner image must not be relied on.
+      - run: pnpm exec playwright install-deps chromium
+      - run: pnpm exec playwright test
+
       - uses: actions/upload-pages-artifact@v5.0.0
         with:
           path: dist

.github/workflows/pr.yml

@@ -36,3 +36,14 @@ jobs:
       - run: pnpm test
 
       - run: pnpm build
+
+      - uses: actions/cache@v4
+        id: pw-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+      - if: steps.pw-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium
+      # OS deps are not cacheable; the runner image must not be relied on.
+      - run: pnpm exec playwright install-deps chromium
+      - run: pnpm exec playwright test

.gitignore

@@ -57,3 +57,7 @@ tmp/
 
 CLAUDE.md
 *.tar.gz
+
+# playwright
+test-results/
+playwright-report/

e2e/smoke.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect, type Page } from '@playwright/test';
+
+/** Guards the one otherwise-unwatched class: the production bundle in a real
+ *  browser. DOM-only; canvas interactions are out of scope (brittle). */
+
+// Non-default dimensions (default label is 100x60), so the resize assertion
+// actually proves ^PW/^LL were applied.
+const SAMPLE_ZPL = '^XA\n^PW640\n^LL320\n^FO50,50^A0N,30,0^FDHello World^FS\n^XZ';
+
+const pageErrors: Error[] = [];
+
+test.beforeEach(({ page }) => {
+  pageErrors.length = 0;
+  page.on('pageerror', (e) => pageErrors.push(e));
+});
+
+const openFileMenu = async (page: Page) => {
+  await page.getByRole('button', { name: 'File', exact: true }).click();
+};
+
+test('boots, imports ZPL, adds a page, and regenerates output', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByRole('button', { name: 'File', exact: true })).toBeVisible();
+
+  await openFileMenu(page);
+  await page.getByRole('button', { name: 'Import ZPL' }).click();
+  await page.getByRole('textbox').fill(SAMPLE_ZPL);
+  await page.getByRole('button', { name: 'Import', exact: true }).click();
+  // A clean import closes the dialog; a summary/choice view staying open
+  // would mean the sample produced findings.
+  await expect(page.getByRole('dialog')).toBeHidden();
+  await expect(page.getByText('80 × 40 mm')).toBeVisible();
+
+  // The output panel defaults to collapsed.
+  await page.getByRole('button', { name: 'Expand' }).click();
+  const output = page.locator('pre').first();
+  await expect(output).toContainText('^FDHello World');
+  await expect(output).toContainText('^PW640');
+
+  await openFileMenu(page);
+  await page.getByRole('button', { name: 'Add page' }).click();
+  // Focus moves onto the inserted page (2 / 2) and it starts empty: exactly
+  // two pages, and the imported field exactly once (a duplicated or in-place
+  // mutated page would double it or keep the pager on 1).
+  await expect(page.getByText('2 / 2')).toBeVisible();
+  await expect
+    .poll(async () => {
+      const text = (await page.locator('pre').allInnerTexts()).join('');
+      return {
+        pages: text.split('^XA').length - 1,
+        fields: text.split('^FDHello World').length - 1,
+      };
+    })
+    .toEqual({ pages: 2, fields: 1 });
+
+  expect(pageErrors, pageErrors.map((e) => e.message).join('\n')).toHaveLength(0);
+});

package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && tsc -p tsconfig.test.json --noEmit && tsc -p packages/mcp-server/tsconfig.json --noEmit && vite build",
+    "build": "tsc -b && tsc -p tsconfig.test.json --noEmit && tsc -p tsconfig.e2e.json && tsc -p packages/mcp-server/tsconfig.json --noEmit && vite build",
     "typecheck:test": "tsc -p tsconfig.test.json --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -21,11 +21,11 @@
     "coverage:gen": "node scripts/gen-coverage.mjs",
     "coverage:check": "node scripts/gen-coverage.mjs --check",
     "preview": "vite preview",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "e2e": "pnpm build && playwright test"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
-    "@zplab/core": "workspace:*",
     "@dnd-kit/sortable": "^10.0.0",
     "@fontsource/ibm-plex-mono": "^5.3.0",
     "@fontsource/ibm-plex-sans": "^5.3.0",
@@ -37,6 +37,7 @@
     "@tauri-apps/plugin-opener": "^2.5.4",
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.10.1",
+    "@zplab/core": "workspace:*",
     "bwip-js": "catalog:",
     "fflate": "catalog:",
     "konva": "^10.3.0",
@@ -52,6 +53,7 @@
     "@babel/core": "^8.0.1",
     "@eslint/js": "^10.0.1",
     "@napi-rs/canvas": "^1.0.2",
+    "@playwright/test": "^1.62.0",
     "@rolldown/plugin-babel": "^0.2.3",
     "@tailwindcss/vite": "^4.3.3",
     "@tauri-apps/cli": "^2.11.4",

playwright.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'e2e',
+  timeout: 30_000,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  reporter: process.env.CI ? 'github' : 'list',
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    // The app boots in navigator.language; the spec selects English UI text.
+    locale: 'en-US',
+    trace: 'retain-on-failure',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    command: 'pnpm preview --port 4173 --strictPort --host 127.0.0.1',
+    url: 'http://127.0.0.1:4173',
+    // Never adopt a foreign/stale server; strictPort makes a busy port loud.
+    reuseExistingServer: false,
+  },
+});

tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["e2e", "playwright.config.ts"]
+}