Test: Run rendered browser behavior in Vitest Browser Mode

[ciampo]

Part of #80855.

What?

Move rendered CSS, browser API, focus, and native interaction coverage from jsdom to 89 colocated Vitest Browser Mode suites.

Why?

jsdom remains useful for DOM semantics and component logic, but it cannot prove browser rendering, layout, focusability, viewport behavior, scrolling, or native input.

How?

Run the migrated suites in a separate Chromium CI job, load the production CSS each assertion needs, and keep non-rendered behavior in jsdom. Remove the synthetic visibility and geometry setup that these browser tests replace.

Migration details

• The complete Browser project now runs 90 files and 1,277 tests.
• Focus navigation, caret geometry, observers, media queries, transitions, scrolling, and native keyboard and pointer behavior run in Browser Mode.
• Broad style snapshots become computed-style or browser-behavior assertions while focused semantic and public class contracts remain.
• Browser React tests use vitest-browser-react; convention checks prevent the Testing Library React renderer from returning.
• Browser artifacts resolve from the repository root, CI uses one unsharded Node 24 Browser job, and failure screenshots remain enabled without trace archives.
• The shared visibility helper, the Jest-wide getClientRects polyfill, and the remaining @ariakit/test dependencies are removed.

Historical local benchmarks

Three consecutive warm full-suite runs on the same machine showed the following medians. The suite grew between measurements, so this is not an identical-test-set benchmark.

Version	Files	Tests	Vitest duration	Wall time
Vitest 4	73	1,167	30.30s	33.43s
Vitest 5	76	1,180	22.95s	25.92s
Change	+3	+13	-24.3%	-22.5%

For 244 exact-name-matched tests across 26 corresponding files, the warm Browser Mode wall-time median was 6.46s compared with 5.06s in jsdom. Both used Vitest 5.0.0 and Node 24.20.0.

Testing Instructions

1. Run npm run test:unit:routing.
2. Run npm run test:unit:conventions.
3. Run npm run test:unit:vitest -- --project=browser.
4. Run npm run test:unit:vitest:shuffled -- --project=browser.

Keyboard coverage

No production UI is added. Browser tests exercise Tab, arrow keys, Enter, Escape, focus movement, caret positioning, and pointer input across the migrated interfaces.

Use of AI Tools

Codex assisted with implementation and verification. The author reviewed the changes and Browser output.

[github-actions]

Size Change: +26 B (0%)

Total Size: 7.71 MB

📦 View Changed

Filename	Size	Change
build/scripts/dom/index.min.js	5.13 kB	+26 B (+0.51%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 827cc90.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31577736315
📝 Reported tests:

As a user I want to be able to create a navigation overlay for a specific navigation block in /test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js, passed after 1 failed attempt.

TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for getByRole('region', { name: /(Editor publish|Save panel)/ }).getByRole('button', { name: 'Save', exact: true })

    at Editor.saveSiteEditorEntities (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/editor/site-editor.ts:42:5)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:90:4

As a user I want to be able to customize the navigation overlay with styled content in /test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js, passed after 2 failed attempts.

Error: apiRequestContext.fetch: socket hang up
Call log:
  - → GET http://localhost:8889/wp-json/wp/v2/templates
    - user-agent: Playwright/1.62.1 (x64; ubuntu 24.04) node/20.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: 76c10818ab
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1786695817%7CvvszvnBvaI77byFokHF6vfK0yWntOMd9r8rH9pNDIxn%7C9c9d557d103999bd22a4d1a928391ef288af06421b67d6dc77c7cf6a96a3a1a9; wp-settings-time-1=1786524029

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.deleteAllTemplates (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/templates.ts:35:31)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:57:22
TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for getByRole('button', { name: 'Create overlay', exact: true })

    at createNavigationOverlay (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:44:28)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:113:4

[ciampo]

The Node 26 failure exposed a test-isolation bug: this test could start a real apiFetch request after jsdom teardown. I fixed it by mocking @wordpress/api-fetch; the exact Node 26 shard now passes.

I will merge once CI checks are green