test: replace puppeteer scripts with playwright e2e suite

Author: pacyfist

.github/workflows/deploy.yml

@@ -34,6 +34,22 @@ jobs:
       - name: Verify the built HTML is scrambled
         run: npm run verify:static
 
+      # Only Chromium — the technique needs the FontFace API and canvas glyph
+      # rasterisation, and these run against the built artifact, not a dev server.
+      - name: Install Playwright browser
+        run: npx playwright install --with-deps chromium
+
+      - name: End-to-end checks against the built site
+        run: npm run e2e
+
+      - name: Upload Playwright report on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
       - name: Add SPA fallback and disable Jekyll
         run: |
           cp dist/demo/browser/index.html dist/demo/browser/404.html

.gitignore

@@ -39,9 +39,11 @@ testem.log
 /typings
 __screenshots__/
 
-# Output of scripts/verify-in-browser.mjs
-/scripts/*.png
-/scripts/.last-verify.json
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
 
 # System files
 .DS_Store

README.md

@@ -45,11 +45,37 @@ stylesheet. daisyUI is a demo-only concern.
 npm run build:lib      # build the library — required before building the demo
 npm start              # dev server for the demo on :4321
 npm test               # unit tests for library + demo
-npm run verify:browser # end-to-end check in real Chrome (dev server must be running)
+npm run build:pages    # prerendered static site in dist/demo/browser
+npm run verify:static  # assert the built HTML is scrambled and subpath-safe
+npm run e2e            # Playwright checks against the built site (run build:pages first)
+npm run e2e:ui         # the same suite in Playwright's watch UI
 ```
 
 `npm start` and `npm test` both depend on the library being built first.
 
+## Testing
+
+Three layers, because no single one can cover this library.
+
+**Unit tests** (`npm test`, Vitest + jsdom) cover the cipher, the font forge and
+the directives. They cannot cover the central claim: jsdom has no `FontFace`, so
+every unit test necessarily runs the fail-open path and never observes a forged
+font at all.
+
+**The build guard** (`npm run verify:static`) inspects bytes that never reach a
+browser — that the prerendered HTML holds no plaintext, that the SSR marker and
+transfer state are present, that no asset path is absolute, and that the demo
+specimen's plaintext stays pinned to a single JS chunk.
+
+**End-to-end** (`npm run e2e`, Playwright + Chromium) runs against the **built
+static site** served under the real `/no-ai/` base path by `e2e/serve-static.mjs`,
+so it exercises the artifact that actually ships. It is the only layer that
+proves the forged font registers, that the painted glyphs differ from the
+fallback, that the clipboard carries ciphertext, and that hydration does not
+scramble the static form twice.
+
+All three run in CI before the site is published.
+
 ## Deployment
 
 The demo publishes on every push to `main` via

e2e/clipboard.spec.ts

@@ -0,0 +1,71 @@
+import { expect, test } from '@playwright/test';
+
+/**
+ * The page claims the clipboard carries the DOM's characters rather than the
+ * glyphs you read. Nothing else verifies that: the unit tests run without a
+ * FontFace, and reading `textContent` is a weaker statement than a real copy.
+ *
+ * This drives a genuine selection, a genuine Ctrl+C and the system clipboard.
+ */
+test.describe('copy-paste', () => {
+  test.beforeEach(async ({ context }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+  });
+
+  test('copying protected text yields ciphertext, not the words on screen', async ({ page }) => {
+    await page.goto('./');
+    const body = page.locator('.protected-body');
+    await expect(body).toBeVisible();
+
+    // Select the paragraph the way a person dragging across it would.
+    await body.evaluate((el) => {
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      const selection = window.getSelection()!;
+      selection.removeAllRanges();
+      selection.addRange(range);
+    });
+
+    await page.keyboard.press('ControlOrMeta+c');
+
+    const clipboard = await page.evaluate(() => navigator.clipboard.readText());
+
+    expect(clipboard.length).toBeGreaterThan(50);
+    expect(clipboard.toLowerCase()).not.toContain('quick brown fox');
+    expect(clipboard.trim()).toBe((await body.textContent())!.trim());
+  });
+
+  test('pasting it back is judged unusable', async ({ page }) => {
+    await page.goto('./');
+    const body = page.locator('.protected-body');
+    await expect(body).toBeVisible();
+
+    await body.evaluate((el) => {
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      const selection = window.getSelection()!;
+      selection.removeAllRanges();
+      selection.addRange(range);
+    });
+    await page.keyboard.press('ControlOrMeta+c');
+
+    const textarea = page.locator('textarea.dom-dump');
+    await textarea.click();
+    await page.keyboard.press('ControlOrMeta+v');
+
+    await expect(textarea).not.toHaveValue(/quick brown fox/i);
+    await expect(page.getByText('scrambled — unusable')).toBeVisible();
+  });
+
+  test('a partial readable paste is not mislabelled as unusable', async ({ page }) => {
+    // Regression: comparing the paste against the whole article labelled every
+    // partial copy "unusable", which is the opposite of the truth.
+    await page.goto('./');
+    await expect(page.locator('.protected-body')).toBeVisible();
+
+    await page.locator('textarea.dom-dump').fill('Pack my box with five dozen liquor jugs');
+
+    await expect(page.getByText('came through readable')).toBeVisible();
+    await expect(page.getByText('scrambled — unusable')).toBeHidden();
+  });
+});

e2e/config-lab.spec.ts

@@ -0,0 +1,88 @@
+import { expect, test } from '@playwright/test';
+
+/**
+ * The lab renders four real child injectors, each with its own service, cipher
+ * and forged font. It sits behind `@defer (on viewport)` because a child
+ * service instantiated during prerender would write to the one shared
+ * TransferState seed key and clobber the shell's cipher.
+ */
+test.describe('the configuration lab', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./');
+    await page.locator('app-config-lab').scrollIntoViewIfNeeded();
+    await expect(page.locator('.config-sample').first()).toBeVisible();
+  });
+
+  test('renders four independent instances', async ({ page }) => {
+    await expect(page.locator('.config-sample')).toHaveCount(4);
+  });
+
+  test('no two forged fonts share a family name', async ({ page }) => {
+    // Regression: familyName derives from the seed alone, so instances without
+    // an explicit seed inherit the page's and register conflicting cmaps under
+    // one family. The browser then paints with whichever face it picked.
+    const forged = await page.evaluate(() =>
+      [...document.fonts].map((f) => f.family).filter((f) => /^(NoAi|Lab)-/.test(f)),
+    );
+
+    expect(forged.length).toBeGreaterThan(1);
+    expect(new Set(forged).size, `duplicate forged families: ${forged.join(', ')}`).toBe(
+      forged.length,
+    );
+  });
+
+  test('the pinned-seed instance uses the seed it was given', async ({ page }) => {
+    const card = page.locator('app-config-lab .card').filter({ hasText: 'Pinned cipher' });
+    const stack = await card
+      .locator('.config-sample')
+      .evaluate((el) => getComputedStyle(el).fontFamily);
+
+    expect(stack).toContain(`NoAi-${(12345).toString(36)}`);
+  });
+
+  test('the kill switch leaves its text readable and forges nothing', async ({ page }) => {
+    const card = page.locator('app-config-lab .card').filter({ hasText: 'Kill switch' });
+    const sample = card.locator('.config-sample');
+
+    await expect(sample).toContainText('Untouched text');
+    expect(await sample.evaluate((el) => getComputedStyle(el).fontFamily)).not.toMatch(/NoAi-/);
+  });
+
+  test('the kill switch does not hide readable text from assistive technology', async ({
+    page,
+  }) => {
+    // aria-hidden belongs on ciphered specimens only. Applying it to text that
+    // is genuinely readable imposes the cost without the protection.
+    const sample = page
+      .locator('app-config-lab .card')
+      .filter({ hasText: 'Kill switch' })
+      .locator('.config-sample');
+
+    await expect(sample).not.toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('the narrow charset ciphers digits and leaves letters alone', async ({ page }) => {
+    const sample = page
+      .locator('app-config-lab .card')
+      .filter({ hasText: 'Narrow charset' })
+      .locator('.config-sample');
+
+    const text = (await sample.textContent())!;
+
+    // Letters are outside the cipher, so they survive verbatim in the DOM.
+    expect(text).toContain('Order');
+    expect(text).toContain('shipped');
+    // The digits do not.
+    expect(text).not.toContain('8391');
+  });
+});
+
+test.describe('prerender safety', () => {
+  test('no lab instance renders during prerender', async ({ request }) => {
+    // A child service running on the server overwrites the shell's seed in
+    // TransferState, and the client then rebuilds the wrong cipher.
+    const html = await (await request.get('./')).text();
+
+    expect(html).not.toContain('config-sample');
+  });
+});

e2e/hydration.spec.ts

@@ -0,0 +1,69 @@
+import { expect, test } from '@playwright/test';
+
+const decode = (s: string) =>
+  s
+    .replaceAll('&lt;', '<')
+    .replaceAll('&gt;', '>')
+    .replaceAll('&quot;', '"')
+    .replaceAll('&#39;', "'")
+    .replaceAll('&amp;', '&');
+
+/**
+ * Guards the bug that shipped once already: `<p noAi>literal</p>` takes the
+ * element's own text as the original, and on a hydrating page that text is
+ * already ciphertext. Scrambling it a second time leaves the reader looking at
+ * the server's output, because the font only ever undoes one layer.
+ *
+ * The site is a static file, so every request carries the same baked seed and
+ * the served text and the hydrated text are directly comparable.
+ */
+test.describe('hydration', () => {
+  test('the static form is not scrambled twice', async ({ page, request }) => {
+    const html = await (await request.get('./')).text();
+    // Not anchored to `<p class=` — Angular emits other attributes first.
+    const served = decode(
+      html.match(/<p[^>]*class="api-demo[^"]*"[^>]*>([\s\S]*?)<\/p>/)?.[1] ?? '',
+    ).trim();
+
+    expect(served, 'no api-demo element found in the served HTML').not.toBe('');
+
+    await page.goto('./');
+    const hydrated = (await page.locator('.api-demo').first().textContent())!.trim();
+
+    expect(hydrated).toBe(served);
+  });
+
+  test('server-scrambled elements are marked so the client can tell', async ({ page, request }) => {
+    const html = await (await request.get('./')).text();
+    expect(html).toContain('data-no-ai-ssr');
+
+    await page.goto('./');
+    await expect(page.locator('.protected-body')).toHaveAttribute('data-no-ai-ssr', '');
+  });
+
+  test('the client rebuilds the exact cipher the server used', async ({ page, request }) => {
+    const html = await (await request.get('./')).text();
+    const seed = html.match(/"noAiSeed":(\d+)/)?.[1];
+    expect(seed, 'no noAiSeed in the transfer state').toBeTruthy();
+
+    await page.goto('./');
+    const family = await page
+      .locator('.protected-body')
+      .evaluate((el) => getComputedStyle(el).fontFamily.split(',')[0].replaceAll('"', '').trim());
+
+    expect(family).toBe(`NoAi-${Number(seed).toString(36)}`);
+  });
+
+  test('all three template APIs render readable text', async ({ page }) => {
+    await page.goto('./');
+    const demos = page.locator('.api-demo');
+    await expect(demos).toHaveCount(3);
+
+    for (let i = 0; i < 3; i++) {
+      const el = demos.nth(i);
+      await expect(el).toBeVisible();
+      const stack = await el.evaluate((e) => getComputedStyle(e).fontFamily);
+      expect(stack, `api-demo ${i} is not using a forged font`).toMatch(/NoAi-/);
+    }
+  });
+});