From 49b03b246df948793fc28a7dd834cad7df316e55 Mon Sep 17 00:00:00 2001 From: giles Date: Mon, 23 Mar 2026 20:12:17 +0000 Subject: [PATCH] Stricter isomorphic test: exact DOM structure + text comparison Test 2 now compares JSON.stringify of the full DOM tree structure (tags, ids, classes, island markers, lake markers) and exact text content between JS-disabled and JS-enabled renders. Co-Authored-By: Claude Opus 4.6 (1M context) --- tests/playwright/isomorphic.spec.js | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/tests/playwright/isomorphic.spec.js b/tests/playwright/isomorphic.spec.js index 11042f5..52a274c 100644 --- a/tests/playwright/isomorphic.spec.js +++ b/tests/playwright/isomorphic.spec.js @@ -85,37 +85,29 @@ test.describe('Isomorphic SSR', () => { await context.close(); }); - test('page renders with JavaScript and matches SSR structure', async ({ browser }) => { - // First: get SSR content (no JS) + test('JS and no-JS render the same DOM structure and styles', async ({ browser }) => { + // Get SSR DOM (no JS) const noJsContext = await browser.newContext({ javaScriptEnabled: false }); const noJsPage = await noJsContext.newPage(); await noJsPage.goto(BASE_URL + TEST_PAGE, { waitUntil: 'domcontentloaded' }); - const ssrText = await getSxRootText(noJsPage); const ssrStructure = await getSxRootStructure(noJsPage); + const ssrText = await getSxRootText(noJsPage); await noJsContext.close(); - // Then: get client-rendered content (with JS) + // Get client DOM (with JS) const jsContext = await browser.newContext({ javaScriptEnabled: true }); const jsPage = await jsContext.newPage(); await jsPage.goto(BASE_URL + TEST_PAGE, { waitUntil: 'networkidle' }); - // Wait for islands to hydrate - await jsPage.waitForSelector('[data-sx-island].sx-processed', { timeout: 10000 }).catch(() => {}); - await jsPage.waitForTimeout(500); // settle - + await jsPage.waitForTimeout(2000); // wait for hydration + const clientStructure = await getSxRootStructure(jsPage); const clientText = await getSxRootText(jsPage); await jsContext.close(); - // Text content should be the same (article text, headings, etc) - expect(ssrText.length).toBeGreaterThan(100); - expect(clientText.length).toBeGreaterThan(100); + // Text content must match + expect(ssrText).toBe(clientText); - // The core content should match — both should have the article headings - expect(clientText).toContain('Language games'); - expect(clientText).toContain('The limits of my language'); - - // SSR should also have these - expect(ssrText).toContain('Language games'); - expect(ssrText).toContain('The limits of my language'); + // Structure must match — same tags, ids, classes + expect(JSON.stringify(ssrStructure)).toBe(JSON.stringify(clientStructure)); }); test('header island has CSSX styling without JavaScript', async ({ browser }) => {