fix: add workaround for headless issue

Author: tmsns

.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

@@ -9,6 +9,7 @@ export class ChromeLauncherPage {
   private product: string;
   public puppeteerPage: Page;
   private nativeInstrumentationEnabledOnPage = false;
+  private patchAdded = false;
 
   constructor(
     config: TestRunnerCoreConfig,
@@ -37,6 +38,31 @@ 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(() => {
+        // @ts-ignore
+        function patchFunction(name, fn) {
+          // @ts-ignore
+          window[name] = (...args) => {
+            fn.call(window, ...args);
+            // Make sure that the tab running the test code is brought back to the front.
+            // @ts-ignore
+            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,