Merge pull request #2366 from tmsns/fix/headless-workaround

fix: add workaround for headless issue

Author: koddsson

.changeset/itchy-socks-rule.md

@@ -0,0 +1,7 @@
+---
+'@web/test-runner-chrome': patch
+---
+
+fix: add workaround for headless issue
+
+This will patch `window.requestAnimationFrame` and `window.requestIdleCallback` and make sure that the tab running the test code is brought back to the front.

packages/test-runner-chrome/src/ChromeLauncherPage.ts

@@ -3,12 +3,19 @@ import { TestRunnerCoreConfig } from '@web/test-runner-core';
 import { v8ToIstanbul } from '@web/test-runner-coverage-v8';
 import { SessionResult } from '@web/test-runner-core';
 
+declare global {
+  interface Window {
+    __bringTabToFront: () => void;
+  }
+}
+
 export class ChromeLauncherPage {
   private config: TestRunnerCoreConfig;
   private testFiles: string[];
   private product: string;
   public puppeteerPage: Page;
   private nativeInstrumentationEnabledOnPage = false;
+  private patchAdded = false;
 
   constructor(
     config: TestRunnerCoreConfig,
@@ -37,6 +44,29 @@ export class ChromeLauncherPage {
       });
     }
 
+    // Patching the browser page to workaround an issue in the new headless mode of Chrome where some functions
+    // with callbacks (requestAnimationFrame and requestIdleCallback) are not executing their callbacks.
+    // https://github.com/puppeteer/puppeteer/issues/10350
+    if (!this.patchAdded) {
+      await this.puppeteerPage.exposeFunction('__bringTabToFront', () =>
+        this.puppeteerPage.bringToFront(),
+      );
+      await this.puppeteerPage.evaluateOnNewDocument(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        function patchFunction(name: string, fn: Function) {
+          (window as any)[name] = (...args: unknown[]) => {
+            fn.call(window, ...args);
+            // Make sure that the tab running the test code is brought back to the front.
+            window.__bringTabToFront();
+          };
+        }
+
+        patchFunction('requestAnimationFrame', window.requestAnimationFrame);
+        patchFunction('requestIdleCallback', window.requestIdleCallback);
+      });
+      this.patchAdded = true;
+    }
+
     await this.puppeteerPage.setViewport({ height: 600, width: 800 });
     await this.puppeteerPage.goto(url);
   }

packages/test-runner-chrome/test/chromeLauncher.test.ts

@@ -13,10 +13,7 @@ describe('test-runner-chrome', function testRunnerChrome() {
   runIntegrationTests(createConfig, {
     basic: true,
     many: true,
-    // Focus tests are failing because of a puppeteer/chrome bug.
-    // See https://github.com/puppeteer/puppeteer/issues/10350 and
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1454012
-    focus: false,
+    focus: true,
     groups: true,
     parallel: true,
     testFailure: true,

packages/test-runner-puppeteer/test/puppeteerLauncher.test.ts

@@ -13,10 +13,7 @@ describe('test-runner-puppeteer', function testRunnerPuppeteer() {
   runIntegrationTests(createConfig, {
     basic: true,
     many: true,
-    // Focus tests are failing because of a puppeteer/chrome bug.
-    // See https://github.com/puppeteer/puppeteer/issues/10350 and
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1454012
-    focus: false,
+    focus: true,
     groups: true,
     parallel: true,
     testFailure: true,