test(www,e2e): harden E2E selectors and cover the full public IA (#1232, B2.10) (#1306)

* test(www,e2e): harden E2E selectors and cover the full public IA (#1232, B2.10)

M19: replace ad-hoc shadow-piercing and styling-class selectors with
user-visible semantics (roles, accessible names, landmarks, stable routes)
across the www e2e suite; the search island gains real dialog/region/input
ARIA semantics instead of test-only hooks. Structural probes that test the
DSD/shadow contract itself keep structural queries by design.

M20: www/e2e/public-routes.spec.ts derives the full public route list
mechanically from the built sitemap at collection time and smoke-covers
every public route (status, locale lang, main landmark, visible h1, no
uncaught page error) on all three CI engines via the browser-smoke legs; a
fail-closed cross-check requires every content-graph article route (both
locales) to appear in the sitemap. Playwright reporters are CI-visible
(github annotations + html report + failure artifact upload), and the
fullyParallel/workers contradiction in www/e2e is resolved (2 on CI, 50%
locally); the serial fixture/starter configs document their coherence.

* chore(adapter-vite): refresh request-time fixture lockfile to 0.44.0-beta.1 workspace links

The committed lock still referenced 0.43.3 workspace links; the fixture
build rewrites it to the current package line. Committed separately from
the #1232 change set to keep the drift visible.

---------

Co-authored-by: DevBot <devbot@openelement.dev>

Author: SisyphusZheng

.github/workflows/autoflow-ci.yml

@@ -79,6 +79,23 @@ jobs:
         run: ./node_modules/.bin/playwright install --with-deps chromium firefox webkit
       - name: AutoFlow3 CI gate
         run: deno task autoflow:ci
+      # #1232 (B2.10): e2e failures must be inspectable — the 'github'
+      # reporter annotates the run inline, and this step publishes the
+      # Playwright HTML report + per-test traces/screenshots on failure.
+      - name: Upload Playwright failure artifacts
+        if: failure()
+        # v7.0.1
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a
+        with:
+          name: playwright-failure-artifacts-${{ github.run_id }}-${{ github.run_attempt }}
+          path: |
+            www/e2e/test-results
+            www/e2e/playwright-report
+            e2e/starter-smoke/test-results
+            packages/adapter-vite/__fixtures__/request-time/e2e/test-results
+            packages/adapter-vite/__fixtures__/ui-dogfood/e2e/test-results
+          if-no-files-found: ignore
+          retention-days: 14
 
   # Issue #628 (first slice): the generated dist/server artifact must boot
   # under plain Node, not just under the Deno CLI (#969). The runtime floor

deno.json

@@ -112,7 +112,7 @@
     "check:visual-baselines": "deno run --allow-read tools/check-visual-baseline-duplicates.ts",
     "test:e2e:browsers": "deno run -A npm:@playwright/test@1.59.1 test --config www/e2e/playwright.config.ts",
     "test:e2e:install": "deno run -A npm:playwright@1.59.1 install chromium",
-    "test:e2e:browser-smoke": "deno run -A npm:@playwright/test@1.59.1 test --config www/e2e/playwright.config.ts --grep \"DSD Layers|Layout Island Shell|Island Script Loading|Theme Toggle|Theme initialization|data-signal bindings|SSR/hydration mismatch degradation|light-mode in-place activation|router guards on browser history traversal|reflect: true static props\" --project",
+    "test:e2e:browser-smoke": "deno run -A npm:@playwright/test@1.59.1 test --config www/e2e/playwright.config.ts --grep \"DSD Layers|Layout Island Shell|Island Script Loading|Theme Toggle|Theme initialization|data-signal bindings|SSR/hydration mismatch degradation|light-mode in-place activation|router guards on browser history traversal|reflect: true static props|Public IA route coverage\" --project",
     "test:e2e:browsers:install": "deno run -A npm:playwright@1.59.1 install chromium firefox webkit",
     "fixture:request-time:build": "cd packages/adapter-vite/__fixtures__/request-time && deno run --config ../../../../deno.json --allow-read --allow-write --allow-net --allow-env --allow-ffi --allow-sys --allow-run ../../src/cli/build.ts",
     "fixture:static-only:build": "cd packages/adapter-vite/__fixtures__/static-only && rm -rf dist && deno run --config ../../../../deno.json --allow-read --allow-write --allow-net --allow-env --allow-ffi --allow-sys --allow-run ../../src/cli/build.ts",

docs/current/BROWSER_BASELINE.md

@@ -12,7 +12,10 @@ The supported behavior is verified in the Chromium, Firefox, and WebKit
 Playwright projects by `www/e2e/dsd-layers.spec.ts`. CI runs the full E2E suite
 on Chromium and the DSD/island-hydration/theme smoke subset
 (`test:e2e:browser-smoke firefox`, `test:e2e:browser-smoke webkit`) on Firefox
-and WebKit. The
+and WebKit. Since #1232 (B2.10) that smoke subset also includes the full
+public information architecture route coverage
+(`www/e2e/public-routes.spec.ts`, routes enumerated mechanically from the
+built sitemap), so every public page renders on all three gated engines. The
 default build emits no inline DSD fallback, so a strict CSP does not need
 `unsafe-inline` for DSD.
 

e2e/starter-smoke/playwright.config.ts

@@ -24,16 +24,20 @@ export default defineConfig({
   // dev.spec.ts targets the vite dev server (playwright.dev.config.ts), not
   // the production `start` server this config boots.
   testIgnore: 'dev.spec.ts',
+  // Serial by design (#1232): one packed starter serves one app on one port,
+  // so fullyParallel and workers agree on sequential execution.
   fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: 1,
-  reporter: 'list',
+  // CI-visible reporting (#1232): 'github' annotates failures on the run.
+  reporter: process.env.CI ? [['list'], ['github']] : 'list',
   timeout: 60_000,
 
   use: {
     baseURL,
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
   },
 
   webServer: {

packages/adapter-vite/__fixtures__/request-time/deno.lock

@@ -19,16 +19,20 @@ const baseURL = `http://127.0.0.1:${PORT}`;
 export default defineConfig({
   testDir: '.',
   testMatch: '*.spec.ts',
+  // Serial by design (#1232): one fixture server owns one port and delegates
+  // to dist/server, so fullyParallel and workers agree on sequential runs.
   fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: 1,
-  reporter: 'list',
+  // CI-visible reporting (#1232): 'github' annotates failures on the run.
+  reporter: process.env.CI ? [['list'], ['github']] : 'list',
   timeout: 60_000,
 
   use: {
     baseURL,
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
   },
 
   webServer: {

packages/adapter-vite/__fixtures__/request-time/e2e/playwright.config.ts

@@ -20,16 +20,20 @@ const baseURL = `http://127.0.0.1:${PORT}`;
 export default defineConfig({
   testDir: '.',
   testMatch: '*.spec.ts',
+  // Serial by design (#1232): one fixture server owns one port, so
+  // fullyParallel and workers agree on sequential execution.
   fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: 1,
-  reporter: 'list',
+  // CI-visible reporting (#1232): 'github' annotates failures on the run.
+  reporter: process.env.CI ? [['list'], ['github']] : 'list',
   timeout: 60_000,
 
   use: {
     baseURL,
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
   },
 
   webServer: {

packages/adapter-vite/__fixtures__/ui-dogfood/e2e/playwright.config.ts

@@ -66,14 +66,15 @@ export default class OpenSearch extends OpenElement {
         </button>
 
         <div class='overlay' hidden onClick={this.closeSearchOnBackdrop}>
-          <div class='panel'>
+          <div class='panel' role='dialog' aria-modal='true' aria-label='Search'>
             <input
               type='text'
               class='search-input'
+              aria-label='Search documentation'
               placeholder='Search documentation...'
               onInput={this.searchFromInput}
             />
-            <div class='results'>
+            <div class='results' role='region' aria-label='Search results' aria-live='polite'>
               <div class='empty'>Type at least 2 characters to search</div>
             </div>
           </div>

www/app/islands/open-search.tsx

@@ -74,10 +74,11 @@ test.describe('Accessibility', () => {
 
   test('layout footer labels do not create skipped heading levels', async ({ page }) => {
     await page.goto('/');
-    await expect(page.locator('open-layout footer h4')).toHaveCount(0);
-    const footer = page.locator('open-layout footer.app-footer');
+    // The shell footer is a contentinfo landmark; its links and any stray
+    // headings are user-visible semantics, so query by role, not class.
+    const footer = page.getByRole('contentinfo');
     await expect(footer).toHaveCount(1);
-    await expect(footer.locator('h1, h2, h3, h4, h5, h6')).toHaveCount(0);
+    await expect(footer.getByRole('heading')).toHaveCount(0);
     await expect(footer.getByRole('link', { name: 'GitHub' })).toHaveAttribute(
       'href',
       'https://github.com/open-element/openelement',
@@ -128,9 +129,9 @@ test.describe('Accessibility', () => {
       });
       expect(hasDelegatesFocus).toBe(true);
 
-      // Verify the toggle contains a button (focusable target)
-      const hasButton = await page.locator('open-theme-toggle >> button').count();
-      expect(hasButton).toBeGreaterThan(0);
+      // Verify the toggle button is a focusable target with an accessible
+      // name (role locators pierce the component's open shadow root).
+      await expect(page.getByRole('button', { name: 'Toggle theme' })).toBeVisible();
     }
   });
 
@@ -199,8 +200,8 @@ test.describe('Performance', () => {
     await page.waitForFunction(() => {
       const layout = document.querySelector('open-layout');
       // The compiled app shell is a light-root static artifact. It is usable
-      // before upgrade when its provenance marker and rendered body exist.
-      return layout?.hasAttribute('data-oe-light') && !!layout.querySelector('.app-layout');
+      // before upgrade when its provenance marker and main landmark exist.
+      return layout?.hasAttribute('data-oe-light') && !!layout.querySelector('main');
     });
 
     // Filter out known non-critical errors (e.g., analytics, CDN, external CDN integrity mismatch)

www/e2e/accessibility-performance.spec.ts

@@ -14,7 +14,8 @@ test.describe('Cinematic homepage', () => {
 
   test('renders a transparent theme-aware logo linked to the current locale home', async ({ page }) => {
     await page.goto('/zh/guide/getting-started');
-    const logo = page.locator('open-layout').locator('a.logo');
+    // The logo is the site-name link inside the banner landmark.
+    const logo = page.getByRole('banner').getByRole('link', { name: 'openElement' });
     await expect(logo).toBeVisible();
     await expect(logo).toHaveAttribute('href', '/zh');
     await expect.poll(() => logo.evaluate((element) => getComputedStyle(element).backgroundImage))