@argos-ci/puppeteer 3.1.3 → 4.0.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ScreenshotOptions, ElementHandle, Page } from 'puppeteer';
-import { ViewportOption, StabilizationOptions } from '@argos-ci/browser';
+import { ViewportOption, StabilizationPluginOptions } from '@argos-ci/browser';
 
 /**
  * Accepts all Puppeteer screenshot options and adds Argos-specific options.
@@ -34,7 +34,7 @@ type ArgosScreenshotOptions = Omit<ScreenshotOptions, "encoding" | "type" | "omi
      * Pass an object to customize the stabilization.
      * @default true
      */
-    stabilize?: boolean | StabilizationOptions;
+    stabilize?: boolean | StabilizationPluginOptions;
 };
 /**
  * Stabilize the UI and takes a screenshot of the application under test.

package/dist/index.js

@@ -61,32 +61,72 @@ async function setViewportSize(page, viewportSize) {
     { width: viewportSize.width, height: viewportSize.height }
   );
 }
-async function setup(page, options) {
-  const { disableHover = true, argosCSS } = options;
+function getStabilizationContext(options) {
+  const { argosCSS } = options;
   const fullPage = checkIsFullPage(options);
+  return {
+    fullPage,
+    argosCSS,
+    options: options.stabilize
+  };
+}
+async function beforeAll(page, options) {
+  const { disableHover = true } = options;
+  const context = getStabilizationContext(options);
   await page.evaluate(
-    ({ fullPage: fullPage2, argosCSS: argosCSS2 }) => window.__ARGOS__.setup({ fullPage: fullPage2, argosCSS: argosCSS2 }),
-    { fullPage, argosCSS }
+    (context2) => window.__ARGOS__.beforeAll(context2),
+    context
   );
   if (disableHover) {
     await page.mouse.move(0, 0);
   }
   return async () => {
     await page.evaluate(
-      ({ fullPage: fullPage2, argosCSS: argosCSS2 }) => window.__ARGOS__.teardown({
-        fullPage: fullPage2,
-        argosCSS: argosCSS2
-      }),
-      { fullPage, argosCSS }
+      () => window.__ARGOS__.afterAll()
     );
   };
 }
+async function beforeEach(page, options) {
+  const context = getStabilizationContext(options);
+  await page.evaluate(
+    (context2) => window.__ARGOS__.beforeEach(context2),
+    context
+  );
+  return async () => {
+    await page.evaluate(
+      () => window.__ARGOS__.afterEach()
+    );
+  };
+}
+async function waitForReadiness(page, options) {
+  const context = getStabilizationContext(options);
+  try {
+    await page.waitForFunction(
+      (context2) => window.__ARGOS__.waitFor(context2),
+      void 0,
+      context
+    );
+  } catch (error) {
+    const reasons = await page.evaluate(
+      (context2) => window.__ARGOS__.getWaitFailureExplanations(
+        context2
+      ),
+      context
+    );
+    throw new Error(
+      `
+Failed to stabilize screenshot, found the following issues:
+${reasons.map((reason) => `- ${reason}`).join("\n")}
+    `.trim(),
+      { cause: error }
+    );
+  }
+}
 async function argosScreenshot(page, name, options = {}) {
   const {
     element,
     viewports,
     argosCSS: _argosCSS,
-    stabilize = true,
     ...puppeteerOptions
   } = options;
   if (!page) {
@@ -100,7 +140,7 @@ async function argosScreenshot(page, name, options = {}) {
     // Inject Argos script into the page
     injectArgos(page)
   ]);
-  const teardown = await setup(page, options);
+  const afterAll = await beforeAll(page, options);
   const fullPage = checkIsFullPage(options);
   async function collectMetadata() {
     const [
@@ -148,28 +188,8 @@ async function argosScreenshot(page, name, options = {}) {
     return metadata;
   }
   async function stabilizeAndScreenshot(name2) {
-    if (stabilize) {
-      const stabilizationOptions = typeof stabilize === "object" ? stabilize : {};
-      try {
-        await page.waitForFunction(
-          (options2) => window.__ARGOS__.checkIsStable(options2),
-          void 0,
-          stabilizationOptions
-        );
-      } catch (error) {
-        const reasons = await page.evaluate(
-          (options2) => window.__ARGOS__.getStabilityFailureReasons(options2),
-          stabilizationOptions
-        );
-        throw new Error(
-          `
-Failed to stabilize screenshot, found the following issues:
-${reasons.map((reason) => `- ${reason}`).join("\n")}
-        `.trim(),
-          { cause: error }
-        );
-      }
-    }
+    await waitForReadiness(page, options);
+    const afterEach = await beforeEach(page, options);
     const [screenshotPath, metadata] = await Promise.all([
       getScreenshotPath(name2),
       collectMetadata()
@@ -193,9 +213,7 @@ ${reasons.map((reason) => `- ${reason}`).join("\n")}
     } else {
       await element.screenshot(screenshotOptions);
     }
-    await page.evaluate(
-      () => window.__ARGOS__.afterEach()
-    );
+    await afterEach();
   }
   if (viewports) {
     for (const viewport of viewports) {
@@ -209,7 +227,7 @@ ${reasons.map((reason) => `- ${reason}`).join("\n")}
   } else {
     await stabilizeAndScreenshot(name);
   }
-  await teardown();
+  await afterAll();
 }
 export {
   argosScreenshot

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/puppeteer",
   "description": "Puppeteer SDK for visual testing with Argos.",
-  "version": "3.1.3",
+  "version": "4.0.0",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -42,25 +42,29 @@
     "puppeteer": ">=1"
   },
   "dependencies": {
-    "@argos-ci/browser": "3.1.3",
-    "@argos-ci/util": "2.3.0"
+    "@argos-ci/browser": "4.0.0",
+    "@argos-ci/util": "2.3.1"
   },
   "devDependencies": {
-    "@argos-ci/cli": "2.5.5",
+    "@argos-ci/cli": "2.5.6",
     "@types/jest": "^29.5.14",
     "@types/node": "^18.19.44",
     "expect-puppeteer": "^11.0.0",
     "jest": "^29.0.1",
     "jest-light-runner": "^0.6.0",
     "jest-puppeteer": "^11.0.0",
-    "puppeteer": "^24.1.0"
+    "puppeteer": "^24.4.0"
   },
   "scripts": {
     "build": "tsup && cp ./src/index.cjs ./dist",
     "jest": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "test": "pnpm run jest --runInBand",
+    "test-e2e": "pnpm run jest --runInBand",
     "argos-upload": "pnpm exec argos upload screenshots --build-name \"argos-puppeteer-e2e-node-$NODE_VERSION-$OS\"",
-    "e2e": "pnpm run test && pnpm run argos-upload"
+    "build-e2e": "node node_modules/puppeteer/install.mjs",
+    "e2e": "pnpm run test-e2e && pnpm run argos-upload",
+    "check-types": "tsc",
+    "check-format": "prettier --check --ignore-unknown --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
+    "lint": "eslint ."
   },
-  "gitHead": "4f538068d5e42c378acdbaca292ab8cb1b49d031"
+  "gitHead": "6385df8f840714c9d77c52b2035bdbbc1b148791"
 }