@argos-ci/cypress 2.2.7 → 2.3.0

package/dist/support.d.ts

@@ -1,4 +1,5 @@
-import { ViewportOption } from "@argos-ci/browser";
+import { ViewportOption, StabilizationOptions } from '@argos-ci/browser';
+
 type ArgosScreenshotOptions = Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.ScreenshotOptions> & {
     /**
      * Viewports to take screenshots of.
@@ -14,6 +15,13 @@ type ArgosScreenshotOptions = Partial<Cypress.Loggable & Cypress.Timeoutable & C
      * @default 0.5
      */
     threshold?: number;
+    /**
+     * Wait for the UI to stabilize before taking the screenshot.
+     * Set to `false` to disable stabilization.
+     * Pass an object to customize the stabilization.
+     * @default true
+     */
+    stabilize?: boolean | StabilizationOptions;
 };
 declare global {
     namespace Cypress {

package/dist/support.js

@@ -0,0 +1,141 @@
+// src/support.ts
+import "cypress-wait-until";
+import {
+  resolveViewport
+} from "@argos-ci/browser";
+import { getGlobalScript } from "@argos-ci/browser";
+import {
+  getMetadataPath,
+  getScreenshotName,
+  validateThreshold
+} from "@argos-ci/util/browser";
+
+// package.json
+var version = "2.2.7";
+
+// src/support.ts
+function injectArgos() {
+  cy.window({ log: false }).then((window) => {
+    if (typeof window.__ARGOS__ !== "undefined") return;
+    window.eval(getGlobalScript());
+  });
+}
+function setup(options) {
+  const { argosCSS } = options;
+  const fullPage = !options.capture || options.capture === "fullPage";
+  cy.window({ log: false }).then(
+    (window) => window.__ARGOS__.setup({ fullPage, argosCSS })
+  );
+  return () => {
+    cy.window({ log: false }).then(
+      (window) => window.__ARGOS__.teardown({
+        fullPage,
+        argosCSS
+      })
+    );
+  };
+}
+Cypress.Commands.add(
+  "argosScreenshot",
+  { prevSubject: ["optional", "element", "window", "document"] },
+  (subject, name, options = {}) => {
+    const {
+      viewports,
+      argosCSS,
+      stabilize = true,
+      ...cypressOptions
+    } = options;
+    if (!name) {
+      throw new Error("The `name` argument is required.");
+    }
+    Cypress.log({
+      name: "argosScreenshot",
+      displayName: `Argos Screenshot`,
+      message: name
+    });
+    injectArgos();
+    const teardown = setup(options);
+    function stabilizeAndScreenshot(name2) {
+      if (stabilize) {
+        const stabilizationOptions = typeof stabilize === "object" ? stabilize : {};
+        cy.waitUntil(
+          () => cy.window({ log: false }).then((window) => {
+            const isStable = window.__ARGOS__.checkIsStable(stabilizationOptions);
+            if (isStable) {
+              return true;
+            }
+            const failureReasons = window.__ARGOS__.getStabilityFailureReasons(stabilizationOptions);
+            failureReasons.forEach((reason) => {
+              cy.log(`[argos] stability: ${reason}`);
+            });
+            return false;
+          })
+        );
+      }
+      let ref = {};
+      cy.wrap(subject).screenshot(name2, {
+        blackout: ['[data-visual-test="blackout"]'].concat(
+          options.blackout || []
+        ),
+        onAfterScreenshot: (_$el, props) => {
+          ref.props = props;
+        },
+        ...cypressOptions
+      });
+      cy.window({ log: false }).then((window) => {
+        const mediaType = window.__ARGOS__.getMediaType();
+        const colorScheme = window.__ARGOS__.getColorScheme();
+        const metadata = {
+          url: window.location.href,
+          viewport: {
+            width: window.innerWidth,
+            height: window.innerHeight
+          },
+          colorScheme,
+          mediaType,
+          test: {
+            title: Cypress.currentTest.title,
+            titlePath: Cypress.currentTest.titlePath,
+            retry: Cypress.currentRetry,
+            // @ts-ignore
+            retries: cy.state("runnable")._retries
+          },
+          browser: {
+            name: Cypress.browser.name,
+            version: Cypress.browser.version
+          },
+          automationLibrary: {
+            name: "cypress",
+            version: Cypress.version
+          },
+          sdk: {
+            name: "@argos-ci/cypress",
+            version
+          }
+        };
+        metadata.transient = {};
+        if (options.threshold !== void 0) {
+          validateThreshold(options.threshold);
+          metadata.transient.threshold = options.threshold;
+        }
+        cy.writeFile(getMetadataPath(ref.props.path), JSON.stringify(metadata));
+      });
+    }
+    if (viewports) {
+      for (const viewport of viewports) {
+        const viewportSize = resolveViewport(viewport);
+        cy.viewport(viewportSize.width, viewportSize.height);
+        stabilizeAndScreenshot(
+          getScreenshotName(name, { viewportWidth: viewportSize.width })
+        );
+      }
+      cy.viewport(
+        Cypress.config("viewportWidth"),
+        Cypress.config("viewportHeight")
+      );
+    } else {
+      stabilizeAndScreenshot(name);
+    }
+    teardown();
+  }
+);

package/dist/task.cjs

@@ -1,56 +1,72 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var core = require('@argos-ci/core');
-var node_path = require('node:path');
-var promises = require('node:fs/promises');
-
-/// <reference types="cypress" />
+// src/task.ts
+var task_exports = {};
+__export(task_exports, {
+  registerArgosTask: () => registerArgosTask
+});
+module.exports = __toCommonJS(task_exports);
+var import_core = require("@argos-ci/core");
+var import_node_path = require("path");
+var import_promises = require("fs/promises");
 function checkIsCypressFailedResult(results) {
-    return "status" in results && results.status === "failed";
+  return "status" in results && results.status === "failed";
 }
 function registerArgosTask(on, config, options) {
-    on("after:screenshot", async (details)=>{
-        // Get the base filename without extension
-        const baseName = node_path.basename(details.path, node_path.extname(details.path));
-        // Remove attempt from the filename
-        const newBaseName = baseName.replace(/ \(attempt \d+\)/, "");
-        // Construct a new path with the original file extension
-        const newPath = node_path.join(node_path.dirname(details.path), newBaseName + node_path.extname(details.path));
-        // Rename the file
-        await promises.rename(details.path, newPath);
-        return {
-            path: newPath
-        };
-    });
-    on("after:run", async (results)=>{
-        const { screenshotsFolder } = config;
-        if (!screenshotsFolder) {
-            return;
+  on("after:screenshot", async (details) => {
+    const baseName = (0, import_node_path.basename)(details.path, (0, import_node_path.extname)(details.path));
+    const newBaseName = baseName.replace(/ \(attempt \d+\)/, "");
+    const newPath = (0, import_node_path.join)(
+      (0, import_node_path.dirname)(details.path),
+      newBaseName + (0, import_node_path.extname)(details.path)
+    );
+    await (0, import_promises.rename)(details.path, newPath);
+    return { path: newPath };
+  });
+  on("after:run", async (results) => {
+    const { screenshotsFolder } = config;
+    if (!screenshotsFolder) {
+      return;
+    }
+    const { uploadToArgos = true } = options || {};
+    if (!uploadToArgos) {
+      return;
+    }
+    const res = await (0, import_core.upload)({
+      ...options,
+      files: ["**/*.png"],
+      root: screenshotsFolder,
+      metadata: {
+        testReport: checkIsCypressFailedResult(results) ? { status: "failed" } : {
+          status: "passed",
+          stats: {
+            startTime: results.startedTestsAt,
+            duration: results.totalDuration
+          }
         }
-        const { uploadToArgos = true } = options || {};
-        if (!uploadToArgos) {
-            return;
-        }
-        const res = await core.upload({
-            ...options,
-            files: [
-                "**/*.png"
-            ],
-            root: screenshotsFolder,
-            metadata: {
-                testReport: checkIsCypressFailedResult(results) ? {
-                    status: "failed"
-                } : {
-                    status: "passed",
-                    stats: {
-                        startTime: results.startedTestsAt,
-                        duration: results.totalDuration
-                    }
-                }
-            }
-        });
-        console.log(`✅ Argos build created: ${res.build.url}`);
+      }
     });
+    console.log(`\u2705 Argos build created: ${res.build.url}`);
+  });
 }
-
-exports.registerArgosTask = registerArgosTask;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  registerArgosTask
+});

package/dist/task.d.cts

@@ -0,0 +1,12 @@
+import { UploadParameters } from '@argos-ci/core';
+
+type RegisterArgosTaskOptions = Omit<UploadParameters, "files" | "root"> & {
+    /**
+     * Upload the report to Argos.
+     * @default true
+     */
+    uploadToArgos?: boolean;
+};
+declare function registerArgosTask(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, options?: RegisterArgosTaskOptions): void;
+
+export { type RegisterArgosTaskOptions, registerArgosTask };

package/dist/task.d.ts

@@ -1,4 +1,5 @@
-import { UploadParameters } from "@argos-ci/core";
+import { UploadParameters } from '@argos-ci/core';
+
 type RegisterArgosTaskOptions = Omit<UploadParameters, "files" | "root"> & {
     /**
      * Upload the report to Argos.
@@ -7,4 +8,5 @@ type RegisterArgosTaskOptions = Omit<UploadParameters, "files" | "root"> & {
     uploadToArgos?: boolean;
 };
 declare function registerArgosTask(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, options?: RegisterArgosTaskOptions): void;
-export { RegisterArgosTaskOptions, registerArgosTask };
+
+export { type RegisterArgosTaskOptions, registerArgosTask };

package/dist/task.js

@@ -0,0 +1,47 @@
+// src/task.ts
+import { upload } from "@argos-ci/core";
+import { basename, extname, join, dirname } from "node:path";
+import { rename } from "node:fs/promises";
+function checkIsCypressFailedResult(results) {
+  return "status" in results && results.status === "failed";
+}
+function registerArgosTask(on, config, options) {
+  on("after:screenshot", async (details) => {
+    const baseName = basename(details.path, extname(details.path));
+    const newBaseName = baseName.replace(/ \(attempt \d+\)/, "");
+    const newPath = join(
+      dirname(details.path),
+      newBaseName + extname(details.path)
+    );
+    await rename(details.path, newPath);
+    return { path: newPath };
+  });
+  on("after:run", async (results) => {
+    const { screenshotsFolder } = config;
+    if (!screenshotsFolder) {
+      return;
+    }
+    const { uploadToArgos = true } = options || {};
+    if (!uploadToArgos) {
+      return;
+    }
+    const res = await upload({
+      ...options,
+      files: ["**/*.png"],
+      root: screenshotsFolder,
+      metadata: {
+        testReport: checkIsCypressFailedResult(results) ? { status: "failed" } : {
+          status: "passed",
+          stats: {
+            startTime: results.startedTestsAt,
+            duration: results.totalDuration
+          }
+        }
+      }
+    });
+    console.log(`\u2705 Argos build created: ${res.build.url}`);
+  });
+}
+export {
+  registerArgosTask
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/cypress",
   "description": "Cypress SDK for visual testing with Argos.",
-  "version": "2.2.7",
+  "version": "2.3.0",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -30,12 +30,12 @@
   "exports": {
     "./support": {
       "types": "./dist/support.d.ts",
-      "import": "./dist/support.mjs",
-      "default": "./dist/support.mjs"
+      "import": "./dist/support.js",
+      "default": "./dist/support.js"
     },
     "./task": {
       "types": "./dist/task.d.ts",
-      "import": "./dist/task.mjs",
+      "import": "./dist/task.js",
       "require": "./dist/task.cjs",
       "default": "./dist/task.cjs"
     },
@@ -45,27 +45,26 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@argos-ci/browser": "2.1.6",
-    "@argos-ci/core": "2.9.2",
-    "@argos-ci/util": "2.1.2",
+    "@argos-ci/browser": "2.2.0",
+    "@argos-ci/core": "2.10.0",
+    "@argos-ci/util": "2.2.0",
     "cypress-wait-until": "^3.0.2"
   },
   "peerDependencies": {
     "cypress": "^12.0.0 || ^13.0.0"
   },
   "devDependencies": {
-    "@argos-ci/cli": "2.4.7",
+    "@argos-ci/cli": "2.5.0",
     "@argos-ci/cypress": "workspace:.",
     "@types/node": "^18.19.44",
-    "cypress": "^13.13.3",
+    "cypress": "^13.15.1",
     "eslint-plugin-cypress": "^3.5.0",
     "eslint-plugin-html": "^8.1.1"
   },
   "scripts": {
-    "prebuild": "rm -rf dist",
-    "build": "rollup -c",
+    "build": "tsup",
     "test": "pnpm exec cypress run",
     "e2e": "UPLOAD_TO_ARGOS=true pnpm run test"
   },
-  "gitHead": "d0fa8cd790ffd2343d1cd32706bcb757c4f3b26e"
+  "gitHead": "fe6e055a43e955e7df362ddaec59c84dc274bbb2"
 }

package/dist/support.mjs

@@ -1,121 +0,0 @@
-import 'cypress-wait-until';
-import { resolveViewport, getGlobalScript } from '@argos-ci/browser';
-import { getScreenshotName, validateThreshold, getMetadataPath } from '@argos-ci/util/browser';
-
-var version = "2.2.6";
-
-function injectArgos() {
-    cy.window({
-        log: false
-    }).then((window)=>{
-        if (typeof window.__ARGOS__ !== "undefined") return;
-        window.eval(getGlobalScript());
-    });
-}
-function setup(options) {
-    const { argosCSS } = options;
-    const fullPage = !options.capture || options.capture === "fullPage";
-    cy.window({
-        log: false
-    }).then((window)=>window.__ARGOS__.setup({
-            fullPage,
-            argosCSS
-        }));
-    return ()=>{
-        cy.window({
-            log: false
-        }).then((window)=>window.__ARGOS__.teardown({
-                fullPage,
-                argosCSS
-            }));
-    };
-}
-Cypress.Commands.add("argosScreenshot", {
-    prevSubject: [
-        "optional",
-        "element",
-        "window",
-        "document"
-    ]
-}, (subject, name, options = {})=>{
-    const { viewports, argosCSS, ...cypressOptions } = options;
-    if (!name) {
-        throw new Error("The `name` argument is required.");
-    }
-    Cypress.log({
-        name: "argosScreenshot",
-        displayName: `Argos Screenshot`,
-        message: name
-    });
-    injectArgos();
-    const teardown = setup(options);
-    function stabilizeAndScreenshot(name) {
-        cy.waitUntil(()=>cy.window({
-                log: false
-            }).then((window)=>window.__ARGOS__.waitForStability()));
-        let ref = {};
-        cy.wrap(subject).screenshot(name, {
-            blackout: [
-                '[data-visual-test="blackout"]'
-            ].concat(options.blackout || []),
-            onAfterScreenshot: (_$el, props)=>{
-                ref.props = props;
-            },
-            ...cypressOptions
-        });
-        cy.window({
-            log: false
-        }).then((window)=>{
-            const mediaType = window.__ARGOS__.getMediaType();
-            const colorScheme = window.__ARGOS__.getColorScheme();
-            const metadata = {
-                url: window.location.href,
-                viewport: {
-                    width: window.innerWidth,
-                    height: window.innerHeight
-                },
-                colorScheme,
-                mediaType,
-                test: {
-                    title: Cypress.currentTest.title,
-                    titlePath: Cypress.currentTest.titlePath,
-                    retry: Cypress.currentRetry,
-                    // @ts-ignore
-                    retries: cy.state("runnable")._retries
-                },
-                browser: {
-                    name: Cypress.browser.name,
-                    version: Cypress.browser.version
-                },
-                automationLibrary: {
-                    name: "cypress",
-                    version: Cypress.version
-                },
-                sdk: {
-                    name: "@argos-ci/cypress",
-                    version
-                }
-            };
-            metadata.transient = {};
-            if (options.threshold !== undefined) {
-                validateThreshold(options.threshold);
-                metadata.transient.threshold = options.threshold;
-            }
-            cy.writeFile(getMetadataPath(ref.props.path), JSON.stringify(metadata));
-        });
-    }
-    if (viewports) {
-        for (const viewport of viewports){
-            const viewportSize = resolveViewport(viewport);
-            cy.viewport(viewportSize.width, viewportSize.height);
-            stabilizeAndScreenshot(getScreenshotName(name, {
-                viewportWidth: viewportSize.width
-            }));
-        }
-        // Restore the original viewport
-        cy.viewport(Cypress.config("viewportWidth"), Cypress.config("viewportHeight"));
-    } else {
-        stabilizeAndScreenshot(name);
-    }
-    teardown();
-});

package/dist/task.mjs

@@ -1,54 +0,0 @@
-import { upload } from '@argos-ci/core';
-import { basename, extname, join, dirname } from 'node:path';
-import { rename } from 'node:fs/promises';
-
-/// <reference types="cypress" />
-function checkIsCypressFailedResult(results) {
-    return "status" in results && results.status === "failed";
-}
-function registerArgosTask(on, config, options) {
-    on("after:screenshot", async (details)=>{
-        // Get the base filename without extension
-        const baseName = basename(details.path, extname(details.path));
-        // Remove attempt from the filename
-        const newBaseName = baseName.replace(/ \(attempt \d+\)/, "");
-        // Construct a new path with the original file extension
-        const newPath = join(dirname(details.path), newBaseName + extname(details.path));
-        // Rename the file
-        await rename(details.path, newPath);
-        return {
-            path: newPath
-        };
-    });
-    on("after:run", async (results)=>{
-        const { screenshotsFolder } = config;
-        if (!screenshotsFolder) {
-            return;
-        }
-        const { uploadToArgos = true } = options || {};
-        if (!uploadToArgos) {
-            return;
-        }
-        const res = await upload({
-            ...options,
-            files: [
-                "**/*.png"
-            ],
-            root: screenshotsFolder,
-            metadata: {
-                testReport: checkIsCypressFailedResult(results) ? {
-                    status: "failed"
-                } : {
-                    status: "passed",
-                    stats: {
-                        startTime: results.startedTestsAt,
-                        duration: results.totalDuration
-                    }
-                }
-            }
-        });
-        console.log(`✅ Argos build created: ${res.build.url}`);
-    });
-}
-
-export { registerArgosTask };