@argos-ci/cypress/dist/support.js

Cypress SDK for visual testing with Argos.

// 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 = "4.0.3";

// src/support.ts
function injectArgos() {
  cy.window({ log: false }).then((window) => {
    if (typeof window.__ARGOS__ !== "undefined") {
      return;
    }
    window.eval(getGlobalScript());
  });
}
function getStabilizationContext(options) {
  const { argosCSS } = options;
  const fullPage = !options.capture || options.capture === "fullPage";
  return {
    fullPage,
    argosCSS,
    options: options.stabilize
  };
}
function beforeAll(options) {
  const context = getStabilizationContext(options);
  cy.window({ log: false }).then(
    (window) => window.__ARGOS__.beforeAll(context)
  );
  return () => {
    cy.window({ log: false }).then(
      (window) => window.__ARGOS__.afterAll()
    );
  };
}
function beforeEach(options) {
  const context = getStabilizationContext(options);
  cy.window({ log: false }).then(
    (window) => window.__ARGOS__.beforeEach(context)
  );
  return () => {
    cy.window({ log: false }).then(
      (window) => window.__ARGOS__.afterEach()
    );
  };
}
function waitForReadiness(options) {
  const context = getStabilizationContext(options);
  cy.waitUntil(
    () => cy.window({ log: false }).then((window) => {
      const isStable = window.__ARGOS__.waitFor(
        context
      );
      if (isStable) {
        return true;
      }
      const failureReasons = window.__ARGOS__.getWaitFailureExplanations(context);
      failureReasons.forEach((reason) => {
        cy.log(`[argos] stability: ${reason}`);
      });
      return false;
    })
  );
}
Cypress.Commands.add(
  "argosScreenshot",
  { prevSubject: ["optional", "element", "window", "document"] },
  (subject, name, options = {}) => {
    const { viewports, argosCSS: _argosCSS, ...cypressOptions } = options;
    if (!name) {
      throw new Error("The `name` argument is required.");
    }
    Cypress.log({
      name: "argosScreenshot",
      displayName: `Argos Screenshot`,
      message: name
    });
    injectArgos();
    const afterAll = beforeAll(options);
    function stabilizeAndScreenshot(name2) {
      waitForReadiness(options);
      const afterEach = beforeEach(options);
      const 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-expect-error - private property
            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));
      });
      afterEach();
    }
    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);
    }
    afterAll();
  }
);