diff --git a/.changeset/rich-cars-end.md b/.changeset/rich-cars-end.md new file mode 100644 index 00000000..2f3b9a7c --- /dev/null +++ b/.changeset/rich-cars-end.md @@ -0,0 +1,5 @@ +--- +"@pixeleye/cli-capture": patch +--- + +Improved our screenshotting pipeline by waiting for things in parallel instead of asynchronously diff --git a/.changeset/seven-mails-fly.md b/.changeset/seven-mails-fly.md new file mode 100644 index 00000000..81a57319 --- /dev/null +++ b/.changeset/seven-mails-fly.md @@ -0,0 +1,13 @@ +--- +"@pixeleye/cli-capture": patch +"@pixeleye/cli-devices": patch +"@pixeleye/cli-install": patch +"@pixeleye/cli-booth": patch +"pixeleye": patch +"@pixeleye/playwright": patch +"@pixeleye/puppeteer": patch +"@pixeleye/storybook": patch +"@pixeleye/cypress": patch +--- + +Upgrading core deps diff --git a/.changeset/tricky-zoos-think.md b/.changeset/tricky-zoos-think.md new file mode 100644 index 00000000..ea1c757c --- /dev/null +++ b/.changeset/tricky-zoos-think.md @@ -0,0 +1,5 @@ +--- +"@pixeleye/cli-booth": patch +--- + +Disabling built in font waiter diff --git a/integrations/cli/cli-booth/src/server.ts b/integrations/cli/cli-booth/src/server.ts index fa09b25b..926e696c 100644 --- a/integrations/cli/cli-booth/src/server.ts +++ b/integrations/cli/cli-booth/src/server.ts @@ -72,6 +72,13 @@ export function startServer(options: BoothServerOptions) { }) ); + // This disables playwrights built in font loading mechanism + // We already wait for fonts to be loaded in the browser + // For some reason on certain environments page.screenshot will hang waiting for fonts + // TODO: This should be removed once we have a better solution + // eslint-disable-next-line turbo/no-undeclared-env-vars + process.env["PW_TEST_SCREENSHOT_NO_FONTS_READY"] = "true"; + // pre load the browsers we know we will use warmUpBrowsers(); diff --git a/integrations/cli/cli-capture/src/capture.ts b/integrations/cli/cli-capture/src/capture.ts index a21232b4..f62332a6 100644 --- a/integrations/cli/cli-capture/src/capture.ts +++ b/integrations/cli/cli-capture/src/capture.ts @@ -83,9 +83,6 @@ async function internalCaptureScreenshot( waitUntil: "domcontentloaded", }); - // eslint-disable-next-line turbo/no-undeclared-env-vars - process.env["PW_TEST_SCREENSHOT_NO_FONTS_READY"] = "true"; - await (page as Page).addScriptTag({ path: rrwebScript, }); @@ -108,7 +105,8 @@ async function internalCaptureScreenshot( }); } - const networkIdle = page.waitForLoadState("networkidle"); + // We want to start waiting for network idle as soon as possible + const awaiters: Promise[] = [page.waitForLoadState("networkidle")]; await page.waitForLoadState("load"); await page.waitForLoadState("domcontentloaded"); @@ -126,15 +124,17 @@ async function internalCaptureScreenshot( }, data.css); } - await page - .waitForFunction(() => document.fonts.ready) - .catch(() => { - logger.info("Timed out waiting for document fonts to be ready"); - }); + awaiters.push( + page + .waitForFunction(() => document.fonts.ready) + .catch(() => { + logger.info("Timed out waiting for document fonts to be ready"); + }) + ); if (data.waitForSelectors && data.waitForSelectors.length > 0) - Promise.all( - data.waitForSelectors.map((selector) => + awaiters.push( + ...data.waitForSelectors.map((selector) => page.waitForSelector(selector, { timeout: 60_000, }) @@ -142,15 +142,15 @@ async function internalCaptureScreenshot( ); if (data.selector) - await page.waitForSelector(data.selector, { - timeout: 60_000, - }); + awaiters.push( + page.waitForSelector(data.selector, { + timeout: 60_000, + }) + ); - if (data.wait) { - await page.waitForTimeout(data.wait); - } + if (data.wait) awaiters.push(page.waitForTimeout(data.wait)); - await networkIdle; + await Promise.all(awaiters); const locatedPage = data.selector ? page.locator(data.selector) : page; @@ -163,6 +163,7 @@ async function internalCaptureScreenshot( type: "png", mask, maskColor: data?.maskColor || defaultConfig.maskColor, + timeout: 60_000, }); await page.close();