feat(webview): support page.emulateMedia

packages/playwright-core/src/server/webkit/webview/wvPage.ts

@@ -108,8 +108,39 @@
     throw new Error('Method not implemented.');
   }
 
-  updateEmulateMedia(): Promise<void> {
-    throw new Error('Method not implemented.');
+  private static async _setEmulateMedia(session: WVSession, mediaType: types.MediaType, colorScheme: types.ColorScheme, reducedMotion: types.ReducedMotion, contrast: types.Contrast): Promise<void> {
+    const promises = [];
+    promises.push(session.send('Page.setEmulatedMedia', { media: mediaType === 'no-override' ? '' : mediaType }));
+    let appearance: any = undefined;
+    switch (colorScheme) {
+      case 'light': appearance = 'Light'; break;
+      case 'dark': appearance = 'Dark'; break;
+      case 'no-override': appearance = undefined; break;
+    }
+    promises.push(session.send('Page.overrideUserPreference', { name: 'PrefersColorScheme', value: appearance }));
+    let reducedMotionWk: any = undefined;
+    switch (reducedMotion) {
+      case 'reduce': reducedMotionWk = 'Reduce'; break;
+      case 'no-preference': reducedMotionWk = 'NoPreference'; break;
+      case 'no-override': reducedMotionWk = undefined; break;
+    }
+    promises.push(session.send('Page.overrideUserPreference', { name: 'PrefersReducedMotion', value: reducedMotionWk }));
+    let contrastWk: any = undefined;
+    switch (contrast) {
+      case 'more': contrastWk = 'More'; break;
+      case 'no-preference': contrastWk = 'NoPreference'; break;
+      case 'no-override': contrastWk = undefined; break;
+    }
+    promises.push(session.send('Page.overrideUserPreference', { name: 'PrefersContrast', value: contrastWk }));
+    await Promise.all(promises);
+  }
+
+  async updateEmulateMedia(): Promise<void> {
+    const emulatedMedia = this._page.emulatedMedia();
+    const colorScheme = emulatedMedia.colorScheme;
+    const reducedMotion = emulatedMedia.reducedMotion;
+    const contrast = emulatedMedia.contrast;
+    await this._forAllSessions(session => WVPage._setEmulateMedia(session, emulatedMedia.media, colorScheme, reducedMotion, contrast));
   }
 
   goBack(): Promise<boolean> {
@@ -183,6 +214,9 @@
       session.sendMayFail('Page.setBootstrapScript', { source: this._calculateBootstrapScript() }),
       session.sendMayFail('Runtime.evaluate', { expression: saveGlobalsSnapshotSource, returnByValue: true } as any),
     ]);
+    const emulatedMedia = this._page.emulatedMedia();
+    if (emulatedMedia.media || emulatedMedia.colorScheme || emulatedMedia.reducedMotion || emulatedMedia.contrast)
+      promises.push(WKPage._setEmulateMedia(session, emulatedMedia.media, emulatedMedia.colorScheme, emulatedMedia.reducedMotion, emulatedMedia.contrast));
     if (this._page.needsRequestInterception()) {
       await Promise.all([
         session.sendMayFail('Network.setInterceptionEnabled', { enabled: true }),

packages/playwright-core/src/server/webkit/wkPage.ts

@@ -205,7 +205,6 @@ export class WKPage implements PageDelegate {
         height: emulatedSize.screen.height,
       }));
     }
-    promises.push(this.updateEmulateMedia());
     promises.push(session.send('Network.setExtraHTTPHeaders', { headers: headersArrayToObject(this._calculateExtraHTTPHeaders(), false /* lowerCase */) }));
     if (contextOptions.offline)
       promises.push(session.send('Network.setEmulateOfflineState', { offline: true }));

tests/webview/expectations/webkit-webview-page.txt

@@ -255,7 +255,6 @@ page/page-drag.spec.ts › Drag and drop › should work if the drag event is ca
 page/page-drag.spec.ts › Drag and drop › should work with locators [fail]
 page/page-drag.spec.ts › Drag and drop › should work with the helper method [fail]
 page/page-drag.spec.ts › should handle custom dataTransfer [fail]
-page/page-emulate-media.spec.ts › should emulate reduced motion [fail]
 page/page-emulate-media.spec.ts › should keep reduced motion and color emulation after reload [fail]
 page/page-expose-function.spec.ts › should fail with busted Array.prototype.toJSON [fail]
 page/page-fill.spec.ts › input event.composed should be true and cross shadow dom boundary - date [fail]
@@ -475,13 +474,7 @@ page/page-aria-snapshot-ai.spec.ts › should list iframes [fail]
 page/page-aria-snapshot-ai.spec.ts › should persist iframe references [fail]
 page/page-aria-snapshot-ai.spec.ts › should produce incremental snapshot for iframes [fail]
 page/page-aria-snapshot-ai.spec.ts › should stitch all frame snapshots [fail]
-page/page-emulate-media.spec.ts › should change the actual colors in css [fail]
-page/page-emulate-media.spec.ts › should default to light [fail]
-page/page-emulate-media.spec.ts › should emulate colorScheme should work @smoke [fail]
-page/page-emulate-media.spec.ts › should emulate contrast [fail]
 page/page-emulate-media.spec.ts › should emulate forcedColors [fail]
-page/page-emulate-media.spec.ts › should emulate type @smoke [fail]
-page/page-emulate-media.spec.ts › should work during navigation [fail]
 page/page-request-gc.spec.ts › should work [fail]
 page/page-request-intercept.spec.ts › should fulfill intercepted response using alias [fail]
 page/page-request-intercept.spec.ts › should intercept with url override [fail]