@e2e-dev/web 0.14.1-nightly-20261013094930 → 0.15.0

package/README.md

@@ -42,7 +42,9 @@ target, so a test can `requires: ['browser']`. Browser options:
 `getByTestId` and a node's `testId` read; default `data-testid`), `userAgent`
 (the `User-Agent` every attempt sends and `navigator.userAgent` reports),
 `locale` and `timezoneId` (the language and time zone every attempt runs in,
-such as `de-DE` and `Europe/Berlin`), `initScripts` (scripts every document
+such as `de-DE` and `Europe/Berlin`), `colorScheme` and `reducedMotion` (the
+`prefers-color-scheme` and `prefers-reduced-motion` every page reports, from
+first paint; `browser.emulateMedia` changes them in a test), `initScripts` (scripts every document
 runs before the page's own), and
 `connect` — attach to a remote browser over CDP instead of launching a local
 one.

package/dist/.build.json

@@ -1 +1 @@
-{"version":"0.14.1-nightly-20261013094930"}
+{"version":"0.15.0"}

package/dist/attempt-session.d.ts

@@ -5,6 +5,7 @@ import { type CdpEndpointResolver, type SessionBinding } from './cdp-recovery.ts
 import { type OperationBound } from './operation-budget.ts';
 import { RefRegistry } from './refs.ts';
 import type { LeaseRecording } from './provider.ts';
+import type { WebMedia } from './media.ts';
 import type { WebScreencastOptions } from './surface.ts';
 export type StorageState = Exclude<NonNullable<BrowserContextOptions['storageState']>, string>;
 interface SessionOptions {
@@ -13,6 +14,8 @@ interface SessionOptions {
     readonly viewport: ViewportSize | null;
     /** How the engine's own screencast records, when the provider does not record. */
     readonly screencast: WebScreencastOptions;
+    /** The media features every page the attempt opens emulates, until `emulateMedia` changes them. */
+    readonly media: WebMedia;
     readonly contextOptions: BrowserContextOptions;
     readonly acquire: (signal: AbortSignal) => Promise<Browser>;
     readonly configure: (context: BrowserContext) => Promise<void>;
@@ -41,6 +44,9 @@ export declare class AttemptSession {
     /** Until the attempt's first page opens: a persistent browser's own first tab can serve as that page. */
     private firstPage;
     private requestedViewport;
+    private media;
+    /** The emulation each page got as it appeared, so the attempt's own page is ready before it shows. */
+    private readonly emulated;
     constructor(options: SessionOptions);
     /** Captures an immutable connection generation for publication after asynchronous reads. */
     token(): object;
@@ -76,6 +82,28 @@ export declare class AttemptSession {
         readonly width: number;
         readonly height: number;
     }): Promise<void>;
+    /**
+     * Emulates media features on every open tab and every tab opened after
+     * them, the app's own included; a feature `media` leaves out keeps its value.
+     */
+    emulateMedia(media: WebMedia): Promise<void>;
+    /**
+     * Runs `emulate` on every open tab but the attempt's own. A tab the app
+     * closes meanwhile fails its own call only; an error on a tab still open
+     * propagates.
+     */
+    private emulateOnOthers;
+    /** Sets the attempt's media features on a page before it shows anything; a page with none set keeps the browser's own. */
+    private applyMedia;
+    /**
+     * Emulates the attempt's media on each tab as it appears, so a tab the app
+     * opens itself follows a test's change too, on a persistent context as
+     * well, where the engine sets no context options. It paints with the
+     * context's configured values first: Playwright emulates per page, so a
+     * test's change reaches it once it exists. A tab the attempt opens awaits
+     * the same work in `ensurePage`; a tab the app opens is not awaited.
+     */
+    private watchPages;
     /** Restarts the document while retaining this context's storage. */
     restart(): Promise<void>;
     /** Replaces an ordinary context; persistent recovery never advertises this capability. */

package/dist/attempt-session.js

@@ -16,8 +16,12 @@ export class AttemptSession {
     /** Until the attempt's first page opens: a persistent browser's own first tab can serve as that page. */
     firstPage = true;
     requestedViewport;
+    media;
+    /** The emulation each page got as it appeared, so the attempt's own page is ready before it shows. */
+    emulated = new WeakMap();
     constructor(options) {
         this.options = options;
+        this.media = options.media;
         this.video = options.record === undefined
             ? new VideoRecorder(options.artifactsDir, options.screencast)
             : new ProviderVideo(options.record, options.artifactsDir);
@@ -121,10 +125,14 @@ export class AttemptSession {
                 if (budget.signal.aborted)
                     throw connectionAbort(budget.signal, 'connection');
                 await this.options.configure(candidate.context);
+                this.watchPages(candidate.context);
                 if (recover && candidate.page !== null) {
                     const size = previous?.page?.viewportSize() ?? this.requestedViewport ?? this.options.viewport;
                     if (size !== null)
                         await candidate.page.setViewportSize(size);
+                    // Emulation belongs to the CDP session that set it, so the new transport sets it again, on the app's own tabs too.
+                    await this.applyMedia(candidate.page);
+                    await this.emulateOnOthers(candidate.context, candidate.page, (page) => this.applyMedia(page));
                     await this.video.pageOpened(candidate.page);
                 }
                 if (budget.signal.aborted)
@@ -164,6 +172,7 @@ export class AttemptSession {
             const size = this.requestedViewport ?? (identity === undefined ? null : this.options.viewport);
             if (size !== null)
                 await page.setViewportSize(size);
+            await (this.emulated.get(page) ?? this.applyMedia(page));
             if (identity !== undefined)
                 identity = { ...identity, target: await targetIdentity(page) };
             this.check(token);
@@ -208,6 +217,55 @@ export class AttemptSession {
             await page.setViewportSize({ width, height });
         this.requestedViewport = { width, height };
     }
+    /**
+     * Emulates media features on every open tab and every tab opened after
+     * them, the app's own included; a feature `media` leaves out keeps its value.
+     */
+    async emulateMedia(media) {
+        // Merged before the await, so a second call made meanwhile builds on this one instead of the old value.
+        this.media = { ...this.media, ...media };
+        const { context, page } = this.current();
+        if (page !== null && !page.isClosed())
+            await page.emulateMedia(this.media);
+        await this.emulateOnOthers(context, page, (other) => other.emulateMedia(this.media));
+    }
+    /**
+     * Runs `emulate` on every open tab but the attempt's own. A tab the app
+     * closes meanwhile fails its own call only; an error on a tab still open
+     * propagates.
+     */
+    async emulateOnOthers(context, own, emulate) {
+        const others = context.pages().filter((page) => page !== own && !page.isClosed());
+        await Promise.all(others.map(async (page) => {
+            try {
+                await emulate(page);
+            }
+            catch (cause) {
+                if (!page.isClosed())
+                    throw cause;
+            }
+        }));
+    }
+    /** Sets the attempt's media features on a page before it shows anything; a page with none set keeps the browser's own. */
+    async applyMedia(page) {
+        if (Object.keys(this.media).length > 0)
+            await page.emulateMedia(this.media);
+    }
+    /**
+     * Emulates the attempt's media on each tab as it appears, so a tab the app
+     * opens itself follows a test's change too, on a persistent context as
+     * well, where the engine sets no context options. It paints with the
+     * context's configured values first: Playwright emulates per page, so a
+     * test's change reaches it once it exists. A tab the attempt opens awaits
+     * the same work in `ensurePage`; a tab the app opens is not awaited.
+     */
+    watchPages(context) {
+        context.on('page', (page) => {
+            const applied = this.applyMedia(page);
+            this.emulated.set(page, applied);
+            applied.catch(() => undefined);
+        });
+    }
     /** Restarts the document while retaining this context's storage. */
     async restart() {
         const binding = this.current();

package/dist/browser.d.ts

@@ -14,6 +14,7 @@
 import type { ActionOptions, Expectable, JsonValue, Locator, Screen, TextMatch } from 'e2e';
 import { type EngineFixtureContext } from 'e2e/engine';
 import type { DialogHandler } from './dialogs.ts';
+import { type WebMedia } from './media.ts';
 import type { PlaywrightSurface } from './surface.ts';
 /**
  * One of `json`, `body`, or `path`, or none for an empty body. `path` names a
@@ -200,6 +201,14 @@ export interface Browser extends Expectable<BrowserExpectation> {
         width: number;
         height: number;
     }): Promise<void>;
+    /**
+     * Emulates CSS media features on every open tab and every tab opened after
+     * them, the app's own included, for the rest of the attempt, as Playwright's
+     * `page.emulateMedia` does: the page's `@media` rules and `matchMedia` both
+     * read them. A feature left out keeps its value. Works before the first
+     * navigation, so the page loads with them.
+     */
+    emulateMedia(media: WebMedia): Promise<void>;
     /** Registers an attempt-scoped dialog handler and returns an unsubscribe function. */
     onDialog(handler: DialogHandler): Promise<() => Promise<void>>;
     /** Runs a trigger and waits for its download. */
@@ -207,6 +216,7 @@ export interface Browser extends Expectable<BrowserExpectation> {
         timeout?: number;
     }): Promise<{
         path: string;
+        absolutePath: string;
         suggestedFilename: string;
     }>;
     /** Viewport-level keyboard, for whatever has focus. */

package/dist/browser.js

@@ -11,12 +11,13 @@
  * never re-implemented here: `context.app.resolveUrl` is the one place that
  * says which URLs a test may open.
  */
-import { ConfigurationError, Deadline, describePattern, EngineError, matchesText, pollCondition, raceAbort, rejectUnknownOptions, TestError, toTextPattern, urlMatches, validateJsonValue, withTimeout, } from 'e2e/engine';
+import { ConfigurationError, Deadline, describePattern, EngineError, matchesText, obj, pollCondition, raceAbort, rejectUnknownOptions, TestError, toTextPattern, urlMatches, validateJsonValue, withTimeout, } from 'e2e/engine';
 import { classifyInputError } from './actions.js';
 import { saveDownloadsTo, saveFromBrowser, saveLocally } from './downloads.js';
 import { isTestErrorCode, message as causeMessage, translatePwError } from './support.js';
 import { compileEvaluation, pageFunctionSource } from './evaluation.js';
 import { initScriptLabel, testInitScriptSource } from './init-scripts.js';
+import { MEDIA_KEYS, mediaLabel, mediaProblem } from './media.js';
 import { lowercaseNames } from './protected-app.js';
 import { parseContinue, parseFulfill, requireNoArguments } from './route-options.js';
 import { routePatternMatches, routePatternsEqual } from './route-pattern.js';
@@ -286,6 +287,20 @@ export function createBrowserFixture(surface, context) {
             await surface.setViewport(size);
             context.attachViewport({ width: size.width, height: size.height, scale: 1 });
         }),
+        async emulateMedia(media) {
+            if (typeof media !== 'object' || media === null) {
+                throw new TestError('INVALID_ARGUMENT', 'browser.emulateMedia takes { colorScheme?, reducedMotion? }');
+            }
+            rejectUnknownOptions('browser.emulateMedia', media, MEDIA_KEYS);
+            for (const key of MEDIA_KEYS) {
+                const problem = mediaProblem((name) => `browser.emulateMedia({ ${name} })`, key, media[key]);
+                if (problem !== undefined)
+                    throw new TestError('INVALID_ARGUMENT', problem);
+            }
+            // Read once, so a test that changes its object later changes nothing here.
+            const requested = obj({ colorScheme: media.colorScheme, reducedMotion: media.reducedMotion });
+            await surface.guard(context.operation(), 'emulateMedia', () => surface.emulateMedia(requested));
+        },
         // Async so the harness records the registration as a `browser.onDialog` step.
         async onDialog(handler) {
             const unsubscribe = surface.dialogs.add(handler);
@@ -321,7 +336,7 @@ export function createBrowserFixture(surface, context) {
                 else
                     await saveFromBrowser(download, remote, absolute, currentOperation.signal);
                 context.attachArtifact('download', relative);
-                return { path: relative, suggestedFilename };
+                return { path: relative, absolutePath: absolute, suggestedFilename };
             }, (cause, label) => {
                 // The trigger is test code, so its errors keep their original classification.
                 if (triggerFailure !== undefined && Object.is(cause, triggerFailure.cause))
@@ -369,6 +384,7 @@ export function createBrowserFixture(surface, context) {
         cookies: action,
         setCookies: action,
         setViewport: action,
+        emulateMedia: { ...action, label: (media) => mediaLabel(media) },
         onDialog: action,
         waitForDownload: { ...action, timeout: (_trigger, options) => options?.timeout },
         keyboard: { press: { ...action, label: (key) => key }, type: { ...action, label: (text) => `${text.length} chars` } },
@@ -430,13 +446,15 @@ function createBrowserExpectation(deps, negated = false) {
                 let value;
                 try {
                     // A locator read takes the action timeout; the poll's deadline is the tighter bound.
-                    value = await withTimeout(target.getAttribute('class'), deadline.remaining(), () => new EngineError('OPERATION_TIMEOUT', 'class read timed out', { retryable: false }));
+                    value = await withTimeout(readClass(target), deadline.remaining(), () => new EngineError('OPERATION_TIMEOUT', 'class read timed out', { retryable: false }));
                 }
                 catch (error) {
                     if (isTestErrorCode(error, 'LOCATOR_NOT_FOUND'))
                         return { matches: undefined, observed: 'no node' };
                     throw error;
                 }
+                if (value === undefined)
+                    return { matches: undefined, observed: 'no node' };
                 if (value === null)
                     return { matches: false, observed: 'no class attribute' };
                 return {
@@ -447,6 +465,16 @@ function createBrowserExpectation(deps, negated = false) {
         },
     };
 }
+/**
+ * The class attribute of one match, `undefined` while nothing matches. A
+ * read waits for its match until the action timeout, so the poll samples
+ * absence first: a node that never arrives stays an assertion failure.
+ */
+async function readClass(target) {
+    if ((await target.count()) === 0)
+        return undefined;
+    return target.getAttribute('class');
+}
 function requireSelector(method, selector) {
     if (typeof selector !== 'string' || selector.length === 0) {
         throw new TestError('INVALID_LOCATOR', `${method}() requires a nonempty selector`);

package/dist/cdp-selectors.d.ts

@@ -2,7 +2,7 @@
 import type { BrowserContext, Page } from 'playwright-core';
 import { type ConnectionBudget } from './operation-budget.ts';
 /**
- * Playwright 1.63 seeds custom selectors only in newly created contexts, not
+ * Playwright 1.64 seeds custom selectors only in newly created contexts, not
  * the persistent context returned by connectOverCDP. Its public register API
  * rejects an already registered name before reaching that context. Use the
  * same context channel as selectors.register, without allocating global names

package/dist/cdp-selectors.js

@@ -4,7 +4,7 @@ import { connectionAbort } from './operation-budget.js';
 import { CLOSED_SHADOW_ROOTS_KEY } from './closed-shadow.js';
 import { SELECTOR_ENGINES } from './selector-engines.js';
 /**
- * Playwright 1.63 seeds custom selectors only in newly created contexts, not
+ * Playwright 1.64 seeds custom selectors only in newly created contexts, not
  * the persistent context returned by connectOverCDP. Its public register API
  * rejects an already registered name before reaching that context. Use the
  * same context channel as selectors.register, without allocating global names

package/dist/engine.js

@@ -11,6 +11,7 @@ import { asBrowserProvider } from './provider.js';
 import { PlaywrightSurface } from './surface.js';
 import { createBrowserFixture } from './browser.js';
 import { validateInitScripts } from './init-scripts.js';
+import { MEDIA_KEYS, mediaProblem } from './media.js';
 import { FIELD_VALUE_CONTROL, headerProblem } from './protected-app.js';
 /** App fields only a device target reads. */
 const NATIVE_APP_KEYS = ['bundleId', 'appPath', 'launchArguments', 'permissions'];
@@ -52,6 +53,7 @@ export function web(options = {}) {
         validateLocale(options.locale, options.headers);
     if (options.timezoneId !== undefined)
         validateTimezoneId(options.timezoneId);
+    validateMedia(options);
     if (options.initScripts !== undefined)
         validateInitScripts(options.initScripts);
     if (options.screencast !== undefined)
@@ -134,6 +136,8 @@ const WEB_OPTION_KEYS = Object.keys({
     userAgent: true,
     locale: true,
     timezoneId: true,
+    colorScheme: true,
+    reducedMotion: true,
     initScripts: true,
 });
 /** The options applied when the engine creates a browser context, which a persistent context never is. */
@@ -238,6 +242,18 @@ function validateTimezoneId(timezoneId) {
         throw new ConfigurationError('INVALID_CONFIG', `web({ timezoneId }) must be an IANA time zone such as "Europe/Berlin", got ${JSON.stringify(timezoneId)}`);
     }
 }
+/**
+ * Refuses a media feature value the browser does not emulate, at config load
+ * rather than at the first page. A persistent context takes these too: they
+ * are set on each page, not only on a context the engine creates.
+ */
+function validateMedia(options) {
+    for (const key of MEDIA_KEYS) {
+        const problem = mediaProblem((name) => `web({ ${name} })`, key, options[key]);
+        if (problem !== undefined)
+            throw new ConfigurationError('INVALID_CONFIG', problem);
+    }
+}
 /**
  * True when `timeZone` is an IANA name `Intl` resolves, spelled with its own
  * case. Node also takes an offset (`+01:00`) and any casing (`europe/berlin`),

package/dist/in-page/read-semantics.js

@@ -38,6 +38,9 @@ export const readSemanticsFunction = (element, options) => {
         'frameset',
         'object',
         'embed',
+        // Next.js App Router's route announcer echoes the title on a hydration
+        // schedule of its own, which an observation must not read as an alert.
+        'next-route-announcer',
     ];
     const OPAQUE_TAGS = ['svg', 'math', 'canvas', 'video', 'audio'];
     /**

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { web, surfaceOf } from './engine.ts';
 export type { PlaywrightLiveSurface } from './engine.ts';
 export type { WebBasicAuth, WebConnectOptions, WebOptions, WebScreencastOptions } from './surface.ts';
 export type { WebInitScript } from './init-scripts.ts';
+export type { WebMedia } from './media.ts';
 export type { BrowserDownloadContext, BrowserLease, BrowserProvider, BrowserProviderDownloads, BrowserProviderScope, BrowserReleaseContext, BrowserRequest, } from './provider.ts';
 export type { BrowserName } from './browser-connection.ts';
 export type { Dialog, DialogHandler } from './dialogs.ts';

package/dist/media.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The CSS media features the engine emulates: one set of values from
+ * `web({ colorScheme, reducedMotion })` for every attempt, and the same names
+ * on `browser.emulateMedia()` for the rest of one.
+ */
+/** User preferences a page reads through `@media` rules and `matchMedia`, as Playwright's `emulateMedia` sets them. */
+export interface WebMedia {
+    /** `prefers-color-scheme`: `'light'`, `'dark'`, or `'no-preference'`. */
+    readonly colorScheme?: 'light' | 'dark' | 'no-preference';
+    /** `prefers-reduced-motion`: `'reduce'` or `'no-preference'`. */
+    readonly reducedMotion?: 'reduce' | 'no-preference';
+}
+/** The feature names `WebMedia` takes, for unknown-key checks. */
+export declare const MEDIA_KEYS: readonly (keyof WebMedia)[];
+/**
+ * Why one feature's value is refused, naming it the way `where` does; undefined
+ * for a value the browser emulates, and for an unset one. Config and tests run
+ * as JavaScript, so the types alone are no guard.
+ */
+export declare function mediaProblem(where: (key: keyof WebMedia) => string, key: keyof WebMedia, value: unknown): string | undefined;
+/** The step label of a `browser.emulateMedia` call: the features it sets, read defensively since the label runs before validation. */
+export declare function mediaLabel(media: unknown): string;

package/dist/media.js

@@ -0,0 +1,45 @@
+/**
+ * The CSS media features the engine emulates: one set of values from
+ * `web({ colorScheme, reducedMotion })` for every attempt, and the same names
+ * on `browser.emulateMedia()` for the rest of one.
+ */
+/** Every emulated feature and the values it takes, kept equal to `WebMedia` by the compiler. */
+const MEDIA_VALUES = {
+    colorScheme: ['light', 'dark', 'no-preference'],
+    reducedMotion: ['reduce', 'no-preference'],
+};
+/** The feature names `WebMedia` takes, for unknown-key checks. */
+export const MEDIA_KEYS = Object.keys(MEDIA_VALUES);
+/**
+ * Why one feature's value is refused, naming it the way `where` does; undefined
+ * for a value the browser emulates, and for an unset one. Config and tests run
+ * as JavaScript, so the types alone are no guard.
+ */
+export function mediaProblem(where, key, value) {
+    if (value === undefined)
+        return undefined;
+    const allowed = MEDIA_VALUES[key];
+    if (typeof value === 'string' && allowed.includes(value))
+        return undefined;
+    const names = allowed.map((name) => JSON.stringify(name));
+    return `${where(key)} must be ${names.slice(0, -1).join(', ')}${names.length > 2 ? ',' : ''} or ${names.at(-1)}, got ${describe(value)}`;
+}
+/** The step label of a `browser.emulateMedia` call: the features it sets, read defensively since the label runs before validation. */
+export function mediaLabel(media) {
+    if (typeof media !== 'object' || media === null)
+        return '';
+    return MEDIA_KEYS.flatMap((key) => {
+        const value = Reflect.get(media, key);
+        return typeof value === 'string' && mediaProblem(String, key, value) === undefined ? [`${key}: ${value}`] : [];
+    }).join(', ');
+}
+/** A refused value as a message shows it: a string quoted, another primitive as written, anything else by its kind, never serialized. */
+function describe(value) {
+    if (typeof value === 'string')
+        return JSON.stringify(value);
+    if (value === null || typeof value === 'number' || typeof value === 'boolean')
+        return String(value);
+    if (Array.isArray(value))
+        return 'an array';
+    return typeof value === 'object' ? 'an object' : typeof value;
+}

package/dist/surface.d.ts

@@ -13,6 +13,7 @@ import { type BrowserProvider, type LeaseDownloads } from './provider.ts';
 import { DialogRouter } from './dialogs.ts';
 import { type OperationBound } from './operation-budget.ts';
 import { type WebInitScript } from './init-scripts.ts';
+import type { WebMedia } from './media.ts';
 import { ErrorLatch } from './support.ts';
 type RoutePredicate = (url: URL) => boolean;
 type RouteHandler = (route: Route) => Promise<void>;
@@ -149,6 +150,21 @@ export interface WebOptions {
      * provider with `scope: 'attempt'`) is `INVALID_CONFIG`.
      */
     readonly timezoneId?: string;
+    /**
+     * The `prefers-color-scheme` every page reports from its first paint, to
+     * its `@media` rules and to `matchMedia`, as Playwright's own
+     * `colorScheme` context option sets it. Defaults to the browser's own.
+     * `browser.emulateMedia` changes it for the rest of one attempt.
+     */
+    readonly colorScheme?: WebMedia['colorScheme'];
+    /**
+     * The `prefers-reduced-motion` every page reports from its first paint, as
+     * Playwright's own `reducedMotion` context option sets it: `'reduce'`
+     * lets an app's own rule turn its animations off, so none races an
+     * assertion. Defaults to the browser's own. `browser.emulateMedia`
+     * changes it for the rest of one attempt.
+     */
+    readonly reducedMotion?: WebMedia['reducedMotion'];
     /**
      * Scripts every document runs before the page's own, in every tab and
      * frame: JavaScript source, a `{ path }` relative to the project root, or a
@@ -179,6 +195,8 @@ export declare class PlaywrightSurface {
     private readonly userAgent;
     private readonly locale;
     private readonly timezoneId;
+    /** The configured media features, which every attempt starts from. */
+    private readonly media;
     private readonly configuredInitScripts;
     /** The attempt's init scripts, configured then added, applied to each context the attempt opens. */
     private initScripts;
@@ -303,6 +321,8 @@ export declare class PlaywrightSurface {
         readonly width: number;
         readonly height: number;
     }): Promise<void>;
+    /** Emulates media features on the open page, or the one the next navigation opens, for the rest of the attempt. */
+    emulateMedia(media: WebMedia): Promise<void>;
     /**
      * The single entry of every operation: rethrows an error latched on an
      * unawaited path, refuses a cancelled operation, races `fn` against the

package/dist/surface.js

@@ -8,7 +8,7 @@
  */
 import { mkdirSync } from 'node:fs';
 import path from 'node:path';
-import { EngineError, raceAbort, TestError, withinCleanupBudget, } from 'e2e/engine';
+import { EngineError, obj, raceAbort, TestError, withinCleanupBudget, } from 'e2e/engine';
 import { matchesText } from 'e2e/engine';
 import { classifyActionError, classifyInputError, dispatchLocatorAction, dispatchPointerAction } from './actions.js';
 import { BrowserConnection, connectCdp } from './browser-connection.js';
@@ -67,6 +67,8 @@ export class PlaywrightSurface {
     userAgent;
     locale;
     timezoneId;
+    /** The configured media features, which every attempt starts from. */
+    media;
     configuredInitScripts;
     /** The attempt's init scripts, configured then added, applied to each context the attempt opens. */
     initScripts = [];
@@ -98,6 +100,7 @@ export class PlaywrightSurface {
         this.userAgent = options.userAgent;
         this.locale = options.locale;
         this.timezoneId = options.timezoneId;
+        this.media = obj({ colorScheme: options.colorScheme, reducedMotion: options.reducedMotion });
         this.configuredInitScripts = new ConfiguredInitScripts(options.initScripts ?? []);
     }
     // --- lifecycle ---
@@ -253,6 +256,7 @@ export class PlaywrightSurface {
             artifactsDir: context.artifactsDir,
             viewport: this.viewport,
             screencast: this.screencast,
+            media: this.media,
             acquire: (signal) => this.acquireBrowser(signal),
             contextOptions: {
                 viewport: this.viewport,
@@ -261,6 +265,8 @@ export class PlaywrightSurface {
                 ...(this.userAgent === undefined ? {} : { userAgent: this.userAgent }),
                 ...(this.locale === undefined ? {} : { locale: this.locale }),
                 ...(this.timezoneId === undefined ? {} : { timezoneId: this.timezoneId }),
+                // On the context too, so a tab the app opens itself paints with the configured values before the session reaches it.
+                ...this.media,
                 ...(this.headers === undefined ? {} : { serviceWorkers: 'block' }),
             },
             configure: async (target) => {
@@ -417,6 +423,10 @@ export class PlaywrightSurface {
     setViewport(size) {
         return this.requireSession().setViewport(size);
     }
+    /** Emulates media features on the open page, or the one the next navigation opens, for the rest of the attempt. */
+    emulateMedia(media) {
+        return this.requireSession().emulateMedia(media);
+    }
     /**
      * The single entry of every operation: rethrows an error latched on an
      * unawaited path, refuses a cancelled operation, races `fn` against the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@e2e-dev/web",
-  "version": "0.14.1-nightly-20261013094930",
+  "version": "0.15.0",
   "description": "Web engine for e2e agentic end-to-end testing, built on Playwright",
   "keywords": [
     "e2e",
@@ -47,14 +47,14 @@
     "NOTICE"
   ],
   "dependencies": {
-    "playwright-core": "1.63.0"
+    "playwright-core": "1.64.0"
   },
   "peerDependencies": {
-    "e2e": "0.21.0-nightly-20261013094930"
+    "e2e": ">=0.18.0 <1"
   },
   "devDependencies": {
     "@types/node": "26.6.2",
-    "e2e": "0.21.0-nightly-20261013094930",
+    "e2e": "0.21.0",
     "@types/pngjs": "6.0.5",
     "pngjs": "7.0.0",
     "typescript": "7.0.2",