playwright stabilization reasons

packages/browser/src/global/stabilization/plugins/waitForAriaBusy.ts

@@ -20,20 +20,6 @@ function checkIsElementVisible(element: Element) {
  */
 export const plugin = {
   name: "waitForAriaBusy" as const,
-  beforeEach() {
-    Array.from(document.images).every((img) => {
-      // Force sync decoding
-      if (img.decoding !== "sync") {
-        img.decoding = "sync";
-      }
-
-      // Force eager loading
-      if (img.loading !== "eager") {
-        img.loading = "eager";
-      }
-    });
-    return undefined;
-  },
   wait: {
     for: () => {
       return Array.from(document.querySelectorAll('[aria-busy="true"]')).every(

packages/playwright/src/screenshot.ts

@@ -201,17 +201,46 @@ async function beforeEach(page: Page, options: ArgosScreenshotOptions) {
   };
 }
 
+/**
+ * Increase the timeout for the test x3.
+ * Returns a function to reset the timeout.
+ */
+async function increaseTimeout() {
+  const testInfo = await getTestInfo();
+  if (testInfo) {
+    const { timeout } = testInfo;
+    // Like in "slow" mode but we don't use it because we want to
+    // be able to reset it.
+    testInfo.setTimeout(timeout * 3);
+    return {
+      value: timeout,
+      reset: () => {
+        testInfo.setTimeout(timeout);
+      },
+    };
+  }
+  return null;
+}
+
 /**
  * Wait for the UI to be ready before taking the screenshot.
  */
 async function waitForReadiness(page: Page, options: ArgosScreenshotOptions) {
   const context = getStabilizationContext(options);
+  // We increase the timeout, so we will be able to get reasons
+  // if the stabilization fails.
+  const timeout = await increaseTimeout();
 
   try {
     await page.waitForFunction(
-      (context) => ((window as any).__ARGOS__ as ArgosGlobal).waitFor(context),
+      (context) => {
+        const argos = (window as any).__ARGOS__ as ArgosGlobal;
+        return argos.waitFor(context);
+      },
       context,
+      timeout ? { timeout: timeout.value } : undefined,
     );
+    timeout?.reset();
   } catch (error) {
     const reasons = await page.evaluate(
       (context) =>
@@ -354,17 +383,6 @@ export async function argosScreenshot(
   };
 
   const stabilizeAndScreenshot = async (name: string) => {
-    await options.beforeScreenshot?.({
-      runStabilization: (stabilizationOptions) =>
-        waitForReadiness(page, {
-          ...options,
-          stabilize: stabilizationOptions ?? options.stabilize,
-        }),
-    });
-
-    await waitForReadiness(page, options);
-    const afterEach = await beforeEach(page, options);
-
     const names = getScreenshotNames(name, testInfo);
 
     const metadata = await collectMetadata(testInfo);
@@ -389,6 +407,17 @@ export async function argosScreenshot(
       await mkdir(dirname(screenshotPath), { recursive: true });
     }
 
+    await options.beforeScreenshot?.({
+      runStabilization: (stabilizationOptions) =>
+        waitForReadiness(page, {
+          ...options,
+          stabilize: stabilizationOptions ?? options.stabilize,
+        }),
+    });
+
+    await waitForReadiness(page, options);
+    const afterEach = await beforeEach(page, options);
+
     await Promise.all([
       handle.screenshot({
         path: screenshotPath,
@@ -415,7 +444,6 @@ export async function argosScreenshot(
     }
 
     await afterEach();
-
     await options.afterScreenshot?.();
   };