@argos-ci/playwright 3.8.1 → 3.9.1

package/dist/index.cjs

@@ -1,21 +1,5 @@
-// @ts-ignore
-const argosScreenshot = async (...args)=>{
-    // @ts-ignore
-    const { argosScreenshot } = await import('./index.mjs');
-    return argosScreenshot(...args);
+const argosScreenshot = async (...args) => {
+  const { argosScreenshot } = await import("./index.js");
+  return argosScreenshot(...args);
 };
 exports.argosScreenshot = argosScreenshot;
-// @ts-ignore
-const getCSPScriptHash = async (...args)=>{
-    // @ts-ignore
-    const { getCSPScriptHash } = await import('./index.mjs');
-    return getCSPScriptHash(...args);
-};
-exports.getCSPScriptHash = getCSPScriptHash;
-// @ts-ignore
-const DO_NOT_USE_setMetadataConfig = async (...args)=>{
-    // @ts-ignore
-    const { DO_NOT_USE_setMetadataConfig } = await import('./index.mjs');
-    return DO_NOT_USE_setMetadataConfig(...args);
-};
-exports.DO_NOT_USE_setMetadataConfig = DO_NOT_USE_setMetadataConfig;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import { Page, PageScreenshotOptions, LocatorScreenshotOptions, ElementHandle, Locator } from "@playwright/test";
-import { ViewportOption } from "@argos-ci/browser";
-import { ScreenshotMetadata } from "@argos-ci/util";
+import { ElementHandle, Locator, LocatorScreenshotOptions, PageScreenshotOptions, Page } from '@playwright/test';
+import { ViewportOption, StabilizationOptions } from '@argos-ci/browser';
+import { ScreenshotMetadata } from '@argos-ci/util';
+
 type LocatorOptions = Parameters<Page["locator"]>[1];
 type ScreenshotOptions<TBase extends PageScreenshotOptions | LocatorScreenshotOptions> = Omit<TBase, "encoding" | "type" | "omitBackground" | "path">;
 type ArgosScreenshotOptions = {
@@ -33,6 +34,13 @@ type ArgosScreenshotOptions = {
      * @default "./screenshots"
      */
     root?: string;
+    /**
+     * 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;
 } & LocatorOptions & ScreenshotOptions<LocatorScreenshotOptions> & ScreenshotOptions<PageScreenshotOptions>;
 /**
  * Stabilize the UI and takes a screenshot of the application under test.
@@ -41,20 +49,25 @@ type ArgosScreenshotOptions = {
  *    argosScreenshot(page, "my-screenshot")
  * @see https://argos-ci.com/docs/playwright#api-overview
  */
-declare function argosScreenshot(/**
+declare function argosScreenshot(
+/**
  * Playwright `page` object.
  */
-page: Page, /**
+page: Page, 
+/**
  * Name of the screenshot. Must be unique.
  */
-name: string, /**
+name: string, 
+/**
  * Options for the screenshot.
  */
 options?: ArgosScreenshotOptions): Promise<void>;
+
 /**
  * Get the CSP script hash.
  */
-declare function getCSPScriptHash(): Promise<string>;
+declare function getCSPScriptHash(): string;
+
 type MetadataConfig = {
     sdk: ScreenshotMetadata["sdk"];
     playwrightLibraries: string[];
@@ -62,5 +75,6 @@ type MetadataConfig = {
 /**
  * Set the metadata config.
  */
-declare function setMetadataConfig(metadata: MetadataConfig): Promise<void>;
-export { ArgosScreenshotOptions, argosScreenshot, getCSPScriptHash, setMetadataConfig as DO_NOT_USE_setMetadataConfig };
+declare function setMetadataConfig(metadata: MetadataConfig): void;
+
+export { type ArgosScreenshotOptions, setMetadataConfig as DO_NOT_USE_setMetadataConfig, argosScreenshot, getCSPScriptHash };

package/dist/index.js

@@ -0,0 +1,326 @@
+// src/screenshot.ts
+import { mkdir } from "node:fs/promises";
+import { resolve, dirname } from "node:path";
+import {
+  resolveViewport,
+  getGlobalScript
+} from "@argos-ci/browser";
+import {
+  getMetadataPath,
+  getScreenshotName,
+  validateThreshold,
+  writeMetadata
+} from "@argos-ci/util";
+
+// src/attachment.ts
+function getAttachmentName(name, type) {
+  return `argos/${type}___${name}`;
+}
+
+// src/metadata.ts
+import {
+  getGitRepositoryPath,
+  readVersionFromPackage
+} from "@argos-ci/util";
+import { relative } from "node:path";
+import { createRequire } from "node:module";
+import { AsyncLocalStorage } from "node:async_hooks";
+var require2 = createRequire(import.meta.url);
+function tryResolve(pkg) {
+  try {
+    return require2.resolve(pkg);
+  } catch {
+    return null;
+  }
+}
+var metadataConfigStorage = new AsyncLocalStorage();
+function setMetadataConfig(metadata) {
+  metadataConfigStorage.enterWith(metadata);
+}
+var DEFAULT_PLAYWRIGHT_LIBRARIES = [
+  "@playwright/test",
+  "playwright",
+  "playwright-core"
+];
+async function getAutomationLibraryMetadata() {
+  const metadataConfig = metadataConfigStorage.getStore();
+  const libraries = metadataConfig?.playwrightLibraries ?? DEFAULT_PLAYWRIGHT_LIBRARIES;
+  for (const name of libraries) {
+    const pkgPath = tryResolve(`${name}/package.json`);
+    if (pkgPath) {
+      const version = await readVersionFromPackage(pkgPath);
+      return { version, name };
+    }
+  }
+  throw new Error(
+    `Unable to find any of the following packages: ${libraries.join(", ")}`
+  );
+}
+async function getArgosPlaywrightVersion() {
+  const pkgPath = require2.resolve("@argos-ci/playwright/package.json");
+  return readVersionFromPackage(pkgPath);
+}
+async function getSdkMetadata() {
+  const metadataConfig = metadataConfigStorage.getStore();
+  if (metadataConfig) {
+    return metadataConfig.sdk;
+  }
+  const argosPlaywrightVersion = await getArgosPlaywrightVersion();
+  return {
+    name: "@argos-ci/playwright",
+    version: argosPlaywrightVersion
+  };
+}
+async function getLibraryMetadata() {
+  const [automationLibrary, sdk] = await Promise.all([
+    getAutomationLibraryMetadata(),
+    getSdkMetadata()
+  ]);
+  return {
+    automationLibrary,
+    sdk
+  };
+}
+async function getTestMetadataFromTestInfo(testInfo) {
+  const repositoryPath = await getGitRepositoryPath();
+  const testMetadata = {
+    id: testInfo.testId,
+    title: testInfo.title,
+    titlePath: testInfo.titlePath,
+    retry: testInfo.retry,
+    retries: testInfo.project.retries,
+    repeat: testInfo.repeatEachIndex,
+    location: {
+      file: repositoryPath ? relative(repositoryPath, testInfo.file) : testInfo.file,
+      line: testInfo.line,
+      column: testInfo.column
+    }
+  };
+  return testMetadata;
+}
+
+// src/util.ts
+import { createRequire as createRequire2 } from "node:module";
+var require3 = createRequire2(import.meta.url);
+function checkIsUsingArgosReporter(testInfo) {
+  const reporterPath = require3.resolve("@argos-ci/playwright/reporter");
+  return testInfo.config.reporter.some(
+    (reporter) => reporter[0].includes("@argos-ci/playwright/reporter") || reporter[0] === reporterPath
+  );
+}
+
+// src/screenshot.ts
+var DEFAULT_SCREENSHOT_ROOT = "./screenshots";
+async function injectArgos(page) {
+  const injected = await page.evaluate(
+    () => typeof window.__ARGOS__ !== "undefined"
+  );
+  if (!injected) {
+    await page.addScriptTag({ content: getGlobalScript() });
+  }
+}
+async function getTestInfo() {
+  try {
+    const { test } = await import("@playwright/test");
+    return test.info();
+  } catch (error) {
+    return null;
+  }
+}
+function getViewportSize(page) {
+  const viewportSize = page.viewportSize();
+  if (!viewportSize) {
+    throw new Error("Can't take screenshots without a viewport.");
+  }
+  return viewportSize;
+}
+async function setViewportSize(page, viewportSize) {
+  await page.setViewportSize(viewportSize);
+  await page.waitForFunction(
+    ({ width, height }) => window.innerWidth === width && window.innerHeight === height,
+    { width: viewportSize.width, height: viewportSize.height }
+  );
+}
+async function setup(page, options) {
+  const { disableHover = true, fullPage, argosCSS } = options;
+  await page.evaluate(
+    ({ fullPage: fullPage2, argosCSS: argosCSS2 }) => window.__ARGOS__.setup({ fullPage: fullPage2, argosCSS: argosCSS2 }),
+    { fullPage, argosCSS }
+  );
+  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 }
+    );
+  };
+}
+function getScreenshotNames(name, testInfo) {
+  if (testInfo) {
+    const projectName = `${testInfo.project.name}/${name}`;
+    if (testInfo.repeatEachIndex > 0) {
+      return {
+        name: `${projectName} repeat-${testInfo.repeatEachIndex}`,
+        baseName: projectName
+      };
+    }
+    return { name: projectName, baseName: null };
+  }
+  return { name, baseName: null };
+}
+async function argosScreenshot(page, name, options = {}) {
+  const {
+    element,
+    has,
+    hasText,
+    viewports,
+    argosCSS,
+    stabilize = true,
+    root = DEFAULT_SCREENSHOT_ROOT,
+    ...playwrightOptions
+  } = options;
+  if (!page) {
+    throw new Error("A Playwright `page` object is required.");
+  }
+  if (!name) {
+    throw new Error("The `name` argument is required.");
+  }
+  const handle = typeof element === "string" ? page.locator(element, { has, hasText }) : element ?? page;
+  const testInfo = await getTestInfo();
+  const useArgosReporter = Boolean(
+    testInfo && checkIsUsingArgosReporter(testInfo)
+  );
+  await Promise.all([
+    // Create the screenshot folder if it doesn't exist
+    useArgosReporter ? null : mkdir(root, { recursive: true }),
+    // Inject Argos script into the page
+    injectArgos(page)
+  ]);
+  const originalViewportSize = getViewportSize(page);
+  const fullPage = options.fullPage !== void 0 ? options.fullPage : handle === page;
+  const teardown = await setup(page, options);
+  const collectMetadata = async (testInfo2) => {
+    const [colorScheme, mediaType, libMetadata, testMetadata] = await Promise.all([
+      page.evaluate(
+        () => window.__ARGOS__.getColorScheme()
+      ),
+      page.evaluate(
+        () => window.__ARGOS__.getMediaType()
+      ),
+      getLibraryMetadata(),
+      testInfo2 ? getTestMetadataFromTestInfo(testInfo2) : null
+    ]);
+    const viewportSize = getViewportSize(page);
+    const browser = page.context().browser();
+    if (!browser) {
+      throw new Error("Can't take screenshots without a browser.");
+    }
+    const browserName = browser.browserType().name();
+    const browserVersion = browser.version();
+    const metadata = {
+      url: page.url(),
+      viewport: viewportSize,
+      colorScheme,
+      mediaType,
+      test: testMetadata,
+      browser: {
+        name: browserName,
+        version: browserVersion
+      },
+      ...libMetadata
+    };
+    return metadata;
+  };
+  const stabilizeAndScreenshot = async (name2) => {
+    if (stabilize) {
+      const stabilizationOptions = typeof stabilize === "object" ? stabilize : {};
+      try {
+        await page.waitForFunction(
+          (options2) => window.__ARGOS__.checkIsStable(options2),
+          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 }
+        );
+      }
+    }
+    const names = getScreenshotNames(name2, testInfo);
+    const metadata = await collectMetadata(testInfo);
+    metadata.transient = {};
+    if (options.threshold !== void 0) {
+      validateThreshold(options.threshold);
+      metadata.transient.threshold = options.threshold;
+    }
+    if (names.baseName) {
+      metadata.transient.baseName = `${names.baseName}.png`;
+    }
+    const screenshotPath = useArgosReporter && testInfo ? testInfo.outputPath("argos", `${names.name}.png`) : resolve(root, `${names.name}.png`);
+    const dir = dirname(screenshotPath);
+    if (dir !== root) {
+      await mkdir(dirname(screenshotPath), { recursive: true });
+    }
+    await Promise.all([
+      handle.screenshot({
+        path: screenshotPath,
+        type: "png",
+        fullPage,
+        mask: [page.locator('[data-visual-test="blackout"]')],
+        animations: "disabled",
+        ...playwrightOptions
+      }),
+      writeMetadata(screenshotPath, metadata)
+    ]);
+    if (useArgosReporter && testInfo) {
+      await Promise.all([
+        testInfo.attach(getAttachmentName(names.name, "metadata"), {
+          path: getMetadataPath(screenshotPath),
+          contentType: "application/json"
+        }),
+        testInfo.attach(getAttachmentName(names.name, "screenshot"), {
+          path: screenshotPath,
+          contentType: "image/png"
+        })
+      ]);
+    }
+  };
+  if (viewports) {
+    for (const viewport of viewports) {
+      const viewportSize = resolveViewport(viewport);
+      await setViewportSize(page, viewportSize);
+      await stabilizeAndScreenshot(
+        getScreenshotName(name, { viewportWidth: viewportSize.width })
+      );
+    }
+    await setViewportSize(page, originalViewportSize);
+  } else {
+    await stabilizeAndScreenshot(name);
+  }
+  await teardown();
+}
+
+// src/csp.ts
+import { getGlobalScript as getGlobalScript2 } from "@argos-ci/browser";
+import { createHash } from "node:crypto";
+function getCSPScriptHash() {
+  const hash = createHash("sha256").update(getGlobalScript2()).digest("base64");
+  return `'sha256-${hash}'`;
+}
+export {
+  setMetadataConfig as DO_NOT_USE_setMetadataConfig,
+  argosScreenshot,
+  getCSPScriptHash
+};

package/dist/reporter.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="node" />
-import { FullConfig, FullResult, Reporter, Suite, TestCase, TestResult } from "@playwright/test/reporter";
-import { UploadParameters } from "@argos-ci/core";
+import { Reporter, FullConfig, TestResult, Suite, TestCase, FullResult } from '@playwright/test/reporter';
+import { UploadParameters } from '@argos-ci/core';
+
 /**
  * Dynamic build name.
  * We require all values in order to ensure it works correctly in parallel mode.
@@ -38,30 +38,18 @@ declare class ArgosReporter implements Reporter {
     playwrightConfig: FullConfig;
     uploadToArgos: boolean;
     constructor(config: ArgosReporterOptions);
-    /**
-     * Write a file to the temporary directory.
-     */
     /**
      * Write a file to the temporary directory.
      */
     writeFile(path: string, body: Buffer | string): Promise<void>;
-    /**
-     * Copy a file to the temporary directory.
-     */
     /**
      * Copy a file to the temporary directory.
      */
     copyFile(from: string, to: string): Promise<void>;
-    /**
-     * Copy the trace file if found in the result.
-     */
     /**
      * Copy the trace file if found in the result.
      */
     copyTraceIfFound(result: TestResult, path: string): Promise<void>;
-    /**
-     * Get the root upload directory (cached).
-     */
     /**
      * Get the root upload directory (cached).
      */
@@ -72,4 +60,5 @@ declare class ArgosReporter implements Reporter {
         status: "failed";
     } | undefined>;
 }
-export { ArgosReporter as default, ArgosReporterOptions, createArgosReporterOptions };
+
+export { type ArgosReporterOptions, createArgosReporterOptions, ArgosReporter as default };