test: expand exporter/css/a11y/i18n regressions and add e2e skip-link focus check

2025-11-14 20:10:50 +09:00
parent d6510e2b05
commit 602f1eabde
26 changed files with 979 additions and 13 deletions
@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test'
+
+type WindowWithExport = Window & {
+  __exportPreview?: () => { html: string; css: string; js: string }
+}
+
+const builderUrl = '/en/builder'
+
+// This test exports the preview, then loads the exported HTML/CSS in a fresh page
+// and verifies that the skip-link becomes visible on focus.
+test('Exported page skip-link becomes visible on focus', async ({ page, context }) => {
+  await page.goto(builderUrl)
+
+  // Minimal content to allow export to produce sections and styles
+  await page.getByTestId('card-hero').click()
+
+  await page.waitForFunction(() => Boolean((window as unknown as WindowWithExport).__exportPreview), { timeout: 5000 })
+  const exported = await page.evaluate(() => (window as unknown as WindowWithExport).__exportPreview?.() ?? null)
+  expect(exported).not.toBeNull()
+
+  // Open a clean page to render exported HTML/CSS and interact with it
+  const preview = await context.newPage()
+  await preview.setContent(exported!.html)
+
+  // Inject CSS into the same document head if not already present
+  await preview.addStyleTag({ content: exported!.css })
+
+  // Ensure skip-link exists and is initially off-screen
+  const skip = preview.locator('a.skip-link')
+  await expect(skip).toHaveCount(1)
+
+  // Focus the skip-link and assert it moved on-screen (left not -9999px)
+  await skip.focus()
+  const box = await skip.boundingBox()
+  expect(box).not.toBeNull()
+  // left should be >= 0 when focused as per our CSS rule (left:1rem)
+  if (!box) throw new Error('skip-link bounding box was null')
+  expect(box.x).toBeGreaterThanOrEqual(0)
+
+  await preview.close()
+})