@argos-ci/playwright 4.2.3 → 5.0.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { ElementHandle, Locator, LocatorScreenshotOptions, PageScreenshotOptions, Page } from '@playwright/test';
-import { ViewportOption, StabilizationOptions } from '@argos-ci/browser';
+import { ElementHandle, Locator, Page, PageScreenshotOptions, LocatorScreenshotOptions } from '@playwright/test';
+import { ViewportOption, StabilizationPluginOptions } from '@argos-ci/browser';
 import { ScreenshotMetadata } from '@argos-ci/util';
 
 type LocatorOptions = Parameters<Page["locator"]>[1];
@@ -40,7 +40,7 @@ type ArgosScreenshotOptions = {
      * Pass an object to customize the stabilization.
      * @default true
      */
-    stabilize?: boolean | StabilizationOptions;
+    stabilize?: boolean | StabilizationPluginOptions;
     /**
      * Run a function before taking the screenshot.
      * When using viewports, this function will run before taking sreenshots on each viewport.
@@ -51,7 +51,7 @@ type ArgosScreenshotOptions = {
          * Accepts an object to customize the stabilization.
          * Note that this function is independent of the `stabilize` option.
          */
-        runStabilization: (options?: StabilizationOptions) => Promise<void>;
+        runStabilization: (options?: StabilizationPluginOptions) => Promise<void>;
     }) => Promise<void> | void;
     /**
      * Run a function after taking the screenshot.

package/dist/index.js

@@ -141,25 +141,65 @@ async function setViewportSize(page, viewportSize) {
     { width: viewportSize.width, height: viewportSize.height }
   );
 }
-async function setup(page, options) {
-  const { disableHover = true, fullPage, argosCSS } = options;
+function getStabilizationContext(options) {
+  const { fullPage, argosCSS, stabilize } = options;
+  return {
+    fullPage,
+    argosCSS,
+    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),
+      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 }
+    );
+  }
+}
 function getScreenshotNames(name, testInfo) {
   if (testInfo) {
     const projectName = `${testInfo.project.name}/${name}`;
@@ -180,7 +220,6 @@ async function argosScreenshot(page, name, options = {}) {
     hasText,
     viewports,
     argosCSS: _argosCSS,
-    stabilize = true,
     root = DEFAULT_SCREENSHOT_ROOT,
     ...playwrightOptions
   } = options;
@@ -203,7 +242,7 @@ async function argosScreenshot(page, name, options = {}) {
   ]);
   const originalViewportSize = getViewportSize(page);
   const fullPage = options.fullPage !== void 0 ? options.fullPage : handle === page;
-  const teardown = await setup(page, options);
+  const afterAll = await beforeAll(page, options);
   const collectMetadata = async (testInfo2) => {
     const [colorScheme, mediaType, libMetadata, testMetadata] = await Promise.all([
       page.evaluate(
@@ -237,33 +276,15 @@ async function argosScreenshot(page, name, options = {}) {
     };
     return metadata;
   };
-  const runStabilization = async (options2 = {}) => {
-    try {
-      await page.waitForFunction(
-        (options3) => window.__ARGOS__.checkIsStable(options3),
-        options2
-      );
-    } catch (error) {
-      const reasons = await page.evaluate(
-        (options3) => window.__ARGOS__.getStabilityFailureReasons(
-          options3
-        ),
-        options2
-      );
-      throw new Error(
-        `
-Failed to stabilize screenshot, found the following issues:
-${reasons.map((reason) => `- ${reason}`).join("\n")}
-        `.trim(),
-        { cause: error }
-      );
-    }
-  };
   const stabilizeAndScreenshot = async (name2) => {
-    await options.beforeScreenshot?.({ runStabilization });
-    if (stabilize) {
-      await runStabilization(stabilize === true ? void 0 : stabilize);
-    }
+    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(name2, testInfo);
     const metadata = await collectMetadata(testInfo);
     metadata.transient = {};
@@ -302,9 +323,7 @@ ${reasons.map((reason) => `- ${reason}`).join("\n")}
         })
       ]);
     }
-    await page.evaluate(
-      () => window.__ARGOS__.afterEach()
-    );
+    await afterEach();
     await options.afterScreenshot?.();
   };
   if (viewports) {
@@ -319,7 +338,7 @@ ${reasons.map((reason) => `- ${reason}`).join("\n")}
   } else {
     await stabilizeAndScreenshot(name);
   }
-  await teardown();
+  await afterAll();
 }
 
 // src/csp.ts

package/dist/reporter.d.ts

@@ -1,4 +1,4 @@
-import { Reporter, FullConfig, TestResult, TestCase, FullResult } from '@playwright/test/reporter';
+import { Reporter, TestCase, FullConfig, TestResult, FullResult } from '@playwright/test/reporter';
 import { UploadParameters } from '@argos-ci/core';
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/playwright",
   "description": "Playwright SDK for visual testing with Argos.",
-  "version": "4.2.3",
+  "version": "5.0.0",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -47,23 +47,25 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@argos-ci/browser": "3.1.3",
-    "@argos-ci/core": "3.1.0",
-    "@argos-ci/util": "2.3.0",
+    "@argos-ci/browser": "4.0.0",
+    "@argos-ci/core": "3.1.1",
+    "@argos-ci/util": "2.3.1",
     "chalk": "^5.4.1",
     "debug": "^4.4.0"
   },
   "devDependencies": {
-    "@argos-ci/cli": "2.5.5",
-    "@argos-ci/playwright": "workspace:.",
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "^1.51.1",
     "@types/debug": "^4.1.12",
     "@types/node": "^18.19.44"
   },
   "scripts": {
     "build": "tsup && cp ./src/index.cjs ./dist",
-    "test": "pnpm exec -- playwright test",
-    "e2e": "UPLOAD_TO_ARGOS=true pnpm run test"
+    "test-e2e": "pnpm exec -- playwright test",
+    "build-e2e": "playwright install chromium --with-deps",
+    "e2e": "UPLOAD_TO_ARGOS=true pnpm run test-e2e",
+    "check-types": "tsc",
+    "check-format": "prettier --check --ignore-unknown --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
+    "lint": "eslint ."
   },
-  "gitHead": "4f538068d5e42c378acdbaca292ab8cb1b49d031"
+  "gitHead": "6385df8f840714c9d77c52b2035bdbbc1b148791"
 }