diff --git a/packages/browser/src/global/stabilization/plugins/waitForAriaBusy.ts b/packages/browser/src/global/stabilization/plugins/waitForAriaBusy.ts index 298c13b5..fb138e84 100644 --- a/packages/browser/src/global/stabilization/plugins/waitForAriaBusy.ts +++ b/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( diff --git a/packages/playwright/src/screenshot.ts b/packages/playwright/src/screenshot.ts index 465a67b1..1d55c999 100644 --- a/packages/playwright/src/screenshot.ts +++ b/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?.(); };