test(e2e): real-browser pass in Playwright Chromium

Three end-to-end scenarios against a static+SSR test server: the zero-build page (import map + native ESM, no bundler), the SSR page (rendered content in the raw response, live after hydration, no mismatch warnings), and adoption (an expando on the server-rendered node survives a real render). Renders are raf-batched so assertions poll. Real Chromium flushed out three fixes happy-dom couldn't see: - nanoraf called an extracted requestAnimationFrame bare — Illegal invocation under strict-mode ESM (sloppy CJS had masked it); wrapped. - the counter example only routed '/', so serving it from any subpath threw; it now has a wildcard fallback. - hydration mismatch detection is now whitespace-insensitive (the parser reparents whitespace, e.g. text after </body>), and page scripts belong in <head> when a view owns <body> — same convention bankai v9 used. CI gets an e2e job with chromium-headless-shell. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
2026-09-08 17:57:27 +02:00
parent 13155a3469
commit 63b56144a5
8 changed files with 230 additions and 7 deletions
@@ -0,0 +1,96 @@
+// Real-browser pass (Playwright Chromium): the zero-build page and the
+// SSR + hydration page, with console output treated as part of the spec —
+// no errors, no hydration warnings.
+//
+// Run with: npm run test:e2e   (needs `npx playwright install chromium-headless-shell`)
+
+import { test, before, after } from 'node:test'
+import assert from 'node:assert'
+import { chromium } from 'playwright'
+
+import { startServer } from './serve.js'
+
+let browser, ctx, srv
+
+before(async () => {
+  srv = await startServer()
+  browser = await chromium.launch()
+  ctx = await browser.newContext()
+})
+
+after(async () => {
+  await browser?.close()
+  await srv?.close()
+})
+
+// renders are raf-batched, so poll instead of reading synchronously
+function waitForCount (page, text) {
+  return page.waitForFunction(
+    (t) => document.querySelector('h1')?.textContent === t,
+    text,
+    { timeout: 5000 }
+  )
+}
+
+async function openPage (path) {
+  const page = await ctx.newPage()
+  const console_ = { errors: [], warnings: [] }
+  page.on('console', (msg) => {
+    if (msg.type() === 'error') console_.errors.push(msg.text())
+    if (msg.type() === 'warning') console_.warnings.push(msg.text())
+  })
+  page.on('pageerror', (err) => console_.errors.push(String(err)))
+  await page.goto(srv.origin + path)
+  return { page, console_ }
+}
+
+test('zero-build page: import map + native ESM, no bundler', async () => {
+  const { page, console_ } = await openPage('/examples/counter/')
+
+  await waitForCount(page, 'count is 0')
+
+  await page.click('button')
+  await waitForCount(page, 'count is 1')
+
+  await page.click('button')
+  await page.click('button')
+  await waitForCount(page, 'count is 3')
+
+  assert.deepStrictEqual(console_.errors, [], 'no console errors')
+  await page.close()
+})
+
+test('SSR page: content before JavaScript, then live after hydration', async () => {
+  // the raw response must already contain the rendered view
+  const res = await fetch(srv.origin + '/ssr')
+  const rawHtml = await res.text()
+  assert.match(rawHtml, /count is 0/, 'server sent rendered markup')
+
+  const { page, console_ } = await openPage('/ssr')
+  await waitForCount(page, 'count is 0')
+
+  // hydrated: the server DOM must now respond to clicks
+  await page.click('button')
+  await waitForCount(page, 'count is 1')
+
+  assert.deepStrictEqual(console_.errors, [], 'no console errors')
+  const mismatches = console_.warnings.filter((w) => w.includes('markup differ'))
+  assert.deepStrictEqual(mismatches, [], 'no hydration mismatch warnings')
+  await page.close()
+})
+
+test('SSR page: server DOM is adopted, not replaced', async () => {
+  const { page } = await openPage('/ssr')
+  await waitForCount(page, 'count is 0')
+
+  // Prove adoption by a surviving expando: mark the node, force a real
+  // render, and confirm the same node object still holds the marker.
+  await page.evaluate(() => {
+    document.querySelector('h1').__marker = 'server-node'
+  })
+  await page.click('button')
+  await waitForCount(page, 'count is 1')
+  const marker = await page.evaluate(() => document.querySelector('h1').__marker)
+  assert.strictEqual(marker, 'server-node', 'h1 survived that render in place')
+  await page.close()
+})