feat(web): add dark mode and reduced motion emulation

Merged
RE
13d ago
+719-15

Part 1 of #1020.

  • Add web({ colorScheme, reducedMotion }) and browser.emulateMedia() so tests can exercise the app's CSS media rules and matchMedia.
  • Apply settings before navigation and retain test changes through restarts, state resets, and CDP reconnects.
  • Add tests, API documentation, and a minor release changeset.
// Defaults for every test
engine: web({ colorScheme: 'dark', reducedMotion: 'reduce' })

// Change one test before the page opens
await browser.emulateMedia({ reducedMotion: 'reduce' });
await app.open('/');

Verified

Ran it locally: yes

  • Built CLI on the testbed: pnpm --filter @e2e-dev/testbed test. The media test reads the page's own CSS rules, changes preferences on the open page, and checks them after restart.
✓ tests/browser.e2e.ts (7 tests)
Tests 78 passed | 1 skipped (79)
  • Real Chromium integration tests cover configuration defaults, partial updates, first-page load, state resets, CDP reconnects, and invalid values.
  • pnpm check passed. Web engine: 553 tests passed. Web benchmark: 91 tests passed.