fix: wait for viewport resize (puppeteer, playwright) (#151)

The viewport should resize to the specified dimensions before any screenshot is taken.
argos-ci · Sep 25, 2024 · a07f529 · a07f529
1 parent e711cad
commit a07f529
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/packages/browser/src/viewport.ts b/packages/browser/src/viewport.ts
@@ -1,6 +1,6 @@
 export type ViewportOrientation = "portrait" | "landscape";
 
-type ViewportSize = {
+export type ViewportSize = {
   width: number;
   height: number;
 };

diff --git a/packages/playwright/src/index.ts b/packages/playwright/src/index.ts
@@ -9,6 +9,7 @@ import type {
   ElementHandle,
   TestInfo,
   Locator,
+  ViewportSize,
 } from "@playwright/test";
 import {
   ViewportOption,
@@ -97,6 +98,19 @@ function getViewportSize(page: Page) {
   return viewportSize;
 }
 
+/**
+ * Sets the viewport size and waits for the visual viewport to match the specified dimensions.
+ * @returns A promise that resolves when the viewport size has been successfully set and matched.
+ */
+async function setViewportSize(page: Page, viewportSize: ViewportSize) {
+  await page.setViewportSize(viewportSize);
+  await page.waitForFunction(
+    ({ width, height }) =>
+      window.innerWidth === width && window.innerHeight === height,
+    { width: viewportSize.width, height: viewportSize.height },
+  );
+}
+
 /**
  * Setup Argos for the screenshot process.
  * @returns A function to teardown Argos.
@@ -299,14 +313,14 @@ export async function argosScreenshot(
     // Take screenshots for each viewport
     for (const viewport of viewports) {
       const viewportSize = resolveViewport(viewport);
-      await page.setViewportSize(viewportSize);
+      await setViewportSize(page, viewportSize);
       await stabilizeAndScreenshot(
         getScreenshotName(name, { viewportWidth: viewportSize.width }),
       );
     }
 
     // Restore the original viewport size
-    await page.setViewportSize(originalViewportSize);
+    await setViewportSize(page, originalViewportSize);
   } else {
     await stabilizeAndScreenshot(name);
   }

diff --git a/packages/puppeteer/src/index.ts b/packages/puppeteer/src/index.ts
@@ -7,6 +7,7 @@ import {
   resolveViewport,
   ArgosGlobal,
   getGlobalScript,
+  ViewportSize,
 } from "@argos-ci/browser";
 import {
   ScreenshotMetadata,
@@ -99,6 +100,20 @@ function checkIsFullPage(options: ArgosScreenshotOptions) {
     : options.element === undefined;
 }
 
+/**
+ * Sets the viewport size and waits for the visual viewport to match the specified dimensions.
+ * @returns A promise that resolves when the viewport size has been successfully set and matched.
+ */
+async function setViewportSize(page: Page, viewportSize: ViewportSize) {
+  await page.setViewport(viewportSize);
+  await page.waitForFunction(
+    ({ width, height }) =>
+      window.innerWidth === width && window.innerHeight === height,
+    {},
+    { width: viewportSize.width, height: viewportSize.height },
+  );
+}
+
 /**
  * Setup Argos for the screenshot process.
  * @returns A function to teardown Argos.
@@ -267,13 +282,13 @@ export async function argosScreenshot(
     // Take screenshots for each viewport
     for (const viewport of viewports) {
       const viewportSize = resolveViewport(viewport);
-      await page.setViewport(viewportSize);
+      await setViewportSize(page, viewportSize);
       await stabilizeAndScreenshot(
         getScreenshotName(name, { viewportWidth: viewportSize.width }),
       );
     }
     // Restore the original viewport
-    await page.setViewport(originalViewport);
+    await setViewportSize(page, originalViewport);
   } else {
     await stabilizeAndScreenshot(name);
   }