@argos-ci/playwright 6.2.0 → 6.3.0

package/dist/index.js

@@ -1,34 +1,9 @@
-// src/screenshot.ts
-import { mkdir } from "fs/promises";
-import { resolve, dirname } from "path";
-import {
-  resolveViewport,
-  getGlobalScript
-} from "@argos-ci/browser";
-import {
-  getMetadataPath,
-  getScreenshotName,
-  validateThreshold,
-  writeMetadata
-} from "@argos-ci/util";
+// src/aria-snapshot.ts
+import { writeFile } from "fs/promises";
+import { getMetadataPath, writeMetadata } from "@argos-ci/util";
 
 // src/util.ts
-import { createRequire } from "module";
-var require2 = createRequire(import.meta.url);
-function checkIsUsingArgosReporter(testInfo) {
-  const reporterPath = require2.resolve("@argos-ci/playwright/reporter");
-  return testInfo.config.reporter.some(
-    (reporter) => reporter[0].includes("@argos-ci/playwright/reporter") || reporter[0] === reporterPath
-  );
-}
-var PNG_EXTENSION = `.png`;
-var METADATA_EXTENSION = `.argos.json`;
-var MAX_NAME_LENGTH = 255 - PNG_EXTENSION.length - METADATA_EXTENSION.length;
-
-// src/attachment.ts
-function getAttachmentName(name, type) {
-  return `argos/${type}___${name}`;
-}
+import { createRequire as createRequire2 } from "module";
 
 // src/metadata.ts
 import {
@@ -36,12 +11,12 @@ import {
   readVersionFromPackage
 } from "@argos-ci/util";
 import { relative } from "path";
-import { createRequire as createRequire2 } from "module";
+import { createRequire } from "module";
 import { AsyncLocalStorage } from "async_hooks";
-var require3 = createRequire2(import.meta.url);
+var require2 = createRequire(import.meta.url);
 function tryResolve(pkg) {
   try {
-    return require3.resolve(pkg);
+    return require2.resolve(pkg);
   } catch {
     return null;
   }
@@ -73,7 +48,7 @@ async function getAutomationLibraryMetadata() {
   );
 }
 async function getArgosPlaywrightVersion() {
-  const pkgPath = require3.resolve("@argos-ci/playwright/package.json");
+  const pkgPath = require2.resolve("@argos-ci/playwright/package.json");
   return readVersionFromPackage(pkgPath);
 }
 async function getSdkMetadata() {
@@ -139,16 +114,26 @@ async function getTestMetadata(testInfo) {
   return testMetadata;
 }
 
-// src/screenshot.ts
-var DEFAULT_SCREENSHOT_ROOT = "./screenshots";
-async function injectArgos(handler) {
-  const injected = await handler.evaluate(
-    () => typeof window.__ARGOS__ !== "undefined"
-  );
-  if (!injected) {
-    await handler.addScriptTag({ content: getGlobalScript() });
+// src/util.ts
+import {
+  getGlobalScript
+} from "@argos-ci/browser";
+import { dirname, resolve } from "path";
+import { mkdir } from "fs/promises";
+var require3 = createRequire2(import.meta.url);
+function checkIsUsingArgosReporter(testInfo) {
+  if (!testInfo) {
+    return false;
   }
+  const reporterPath = require3.resolve("@argos-ci/playwright/reporter");
+  return testInfo.config.reporter.some(
+    (reporter) => reporter[0].includes("@argos-ci/playwright/reporter") || reporter[0] === reporterPath
+  );
 }
+var PNG_EXTENSION = `.png`;
+var ARIA_EXTENSION = `.aria.yml`;
+var METADATA_EXTENSION = `.argos.json`;
+var MAX_NAME_LENGTH = 255 - PNG_EXTENSION.length - METADATA_EXTENSION.length;
 async function getTestInfo() {
   try {
     const { test } = await import("@playwright/test");
@@ -157,6 +142,16 @@ async function getTestInfo() {
     return null;
   }
 }
+function checkIsPage(value) {
+  return Boolean(
+    value && typeof value === "object" && "bringToFront" in value && typeof value.bringToFront === "function"
+  );
+}
+function checkIsElementHandle(value) {
+  return Boolean(
+    value && typeof value === "object" && "asElement" in value && typeof value.asElement === "function"
+  );
+}
 function checkIsFrame(handler) {
   return "page" in handler && typeof handler.page === "function";
 }
@@ -169,7 +164,7 @@ function getPage(handler) {
 function getViewportSize(page) {
   const viewportSize = page.viewportSize();
   if (!viewportSize) {
-    throw new Error("Can't take screenshots without a viewport.");
+    throw new Error("Snapshots can't be taken without a viewport.");
   }
   return viewportSize;
 }
@@ -180,23 +175,95 @@ async function setViewportSize(page, viewportSize) {
     { width: viewportSize.width, height: viewportSize.height }
   );
 }
-function getStabilizationContext(options) {
-  const { fullPage, argosCSS, stabilize, viewports } = options;
+function getSnapshotNames(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 injectArgos(handler) {
+  const injected = await handler.evaluate(
+    () => typeof window.__ARGOS__ !== "undefined"
+  );
+  if (!injected) {
+    await handler.addScriptTag({ content: getGlobalScript() });
+  }
+}
+async function prepare(args) {
+  const { handler, useArgosReporter, root } = args;
+  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(handler)
+  ]);
+}
+async function getPathAndMetadata(args) {
+  const { handler, testInfo, names, extension, root, useArgosReporter } = args;
+  const overrides = getMetadataOverrides();
+  const path = useArgosReporter && testInfo ? testInfo.outputPath("argos", `${names.name}${extension}`) : resolve(root, `${names.name}${extension}`);
+  const dir = dirname(path);
+  const [colorScheme, mediaType, libMetadata, testMetadata] = await Promise.all(
+    [
+      handler.evaluate(
+        () => window.__ARGOS__.getColorScheme()
+      ),
+      handler.evaluate(
+        () => window.__ARGOS__.getMediaType()
+      ),
+      getLibraryMetadata(),
+      getTestMetadata(testInfo),
+      dir !== root ? mkdir(dir, { recursive: true }) : null
+    ]
+  );
+  const viewportSize = checkIsFrame(handler) ? null : getViewportSize(handler);
+  const browser = getPage(handler).context().browser();
+  if (!browser) {
+    throw new Error("Can't take screenshots without a browser.");
+  }
+  const browserName = browser.browserType().name();
+  const browserVersion = browser.version();
+  const url = overrides?.url ?? handler.url();
+  const metadata = {
+    url,
+    colorScheme,
+    mediaType,
+    test: testMetadata,
+    browser: {
+      name: browserName,
+      version: browserVersion
+    },
+    ...libMetadata
+  };
+  const viewport = viewportSize ?? getMetadataOverrides()?.viewport;
+  if (viewport) {
+    metadata.viewport = viewport;
+  }
+  metadata.transient = {};
+  if (names.baseName) {
+    metadata.transient.baseName = `${names.baseName}${extension}`;
+  }
   return {
-    fullPage,
-    argosCSS,
-    viewports,
-    options: stabilize
+    metadata,
+    path
   };
 }
-async function beforeAll(handler, options) {
-  const { disableHover = true } = options;
-  const context = getStabilizationContext(options);
+function screenshotToSnapshotPath(value) {
+  return value.replace(/\.png$/, ARIA_EXTENSION);
+}
+async function beforeAll(handler, context, options) {
   await handler.evaluate(
     (context2) => window.__ARGOS__.beforeAll(context2),
     context
   );
-  if (disableHover) {
+  if (options?.disableHover) {
     await getPage(handler).mouse.move(0, 0);
   }
   return async () => {
@@ -205,8 +272,7 @@ async function beforeAll(handler, options) {
     );
   };
 }
-async function beforeEach(handler, options) {
-  const context = getStabilizationContext(options);
+async function beforeEach(handler, context) {
   await handler.evaluate(
     (context2) => window.__ARGOS__.beforeEach(context2),
     context
@@ -231,8 +297,7 @@ async function increaseTimeout() {
   }
   return null;
 }
-async function waitForReadiness(handler, options) {
-  const context = getStabilizationContext(options);
+async function waitForReadiness(handler, context) {
   const timeout = await increaseTimeout();
   try {
     await handler.waitForFunction(
@@ -260,27 +325,118 @@ ${reasons.map((reason) => `- ${reason}`).join("\n")}
     );
   }
 }
-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 };
+async function attachAttachments(args) {
+  const { attachments, useArgosReporter, testInfo } = args;
+  if (useArgosReporter && testInfo) {
+    await Promise.all(
+      attachments.map(
+        (attachment) => testInfo.attach(attachment.name, {
+          path: attachment.path,
+          contentType: attachment.contentType
+        })
+      )
+    );
   }
-  return { name, baseName: null };
 }
+
+// src/attachment.ts
+function getAttachmentName(name, type) {
+  return `argos/${type}___${name}`;
+}
+
+// src/aria-snapshot.ts
+var DEFAULT_SNAPSHOTS_ROOT = "./screenshots";
+async function argosAriaSnapshot(handler, name, options = {}) {
+  const {
+    element,
+    has,
+    hasText,
+    hasNot,
+    hasNotText,
+    timeout,
+    root = DEFAULT_SNAPSHOTS_ROOT
+  } = options;
+  if (!handler) {
+    throw new Error("A Playwright `handler` object is required.");
+  }
+  if (!name) {
+    throw new Error("The `name` argument is required.");
+  }
+  const snapshotTarget = typeof element === "string" ? handler.locator(element, { has, hasText, hasNot, hasNotText }) : element ?? handler.locator("body");
+  const testInfo = await getTestInfo();
+  const useArgosReporter = checkIsUsingArgosReporter(testInfo);
+  await prepare({ handler, useArgosReporter, root });
+  const context = getStabilizationContext(options);
+  const afterAll = await beforeAll(handler, context);
+  const names = getSnapshotNames(name, testInfo);
+  const { path: snapshotPath, metadata } = await getPathAndMetadata({
+    handler,
+    extension: ARIA_EXTENSION,
+    names,
+    root,
+    testInfo,
+    useArgosReporter
+  });
+  await waitForReadiness(handler, context);
+  const afterEach = await beforeEach(handler, context);
+  await waitForReadiness(handler, context);
+  await Promise.all([
+    snapshotTarget.ariaSnapshot({ timeout }).then((snapshot) => {
+      return writeFile(snapshotPath, snapshot, "utf-8");
+    }),
+    writeMetadata(snapshotPath, metadata)
+  ]);
+  const attachments = [
+    {
+      name: getAttachmentName(names.name, "aria"),
+      contentType: "application/yaml",
+      path: snapshotPath
+    },
+    {
+      name: getAttachmentName(names.name, "aria/metadata"),
+      contentType: "application/json",
+      path: getMetadataPath(snapshotPath)
+    }
+  ];
+  await attachAttachments({ attachments, testInfo, useArgosReporter });
+  await afterEach();
+  await afterAll();
+  return attachments;
+}
+function getStabilizationContext(options) {
+  const { stabilize } = options;
+  return {
+    fullPage: false,
+    argosCSS: void 0,
+    viewports: void 0,
+    options: stabilize
+  };
+}
+
+// src/screenshot.ts
+import {
+  resolveViewport
+} from "@argos-ci/browser";
+import {
+  getMetadataPath as getMetadataPath2,
+  getScreenshotName,
+  validateThreshold,
+  writeMetadata as writeMetadata2
+} from "@argos-ci/util";
+import { writeFile as writeFile2 } from "fs/promises";
+var DEFAULT_SCREENSHOT_ROOT = "./screenshots";
 async function argosScreenshot(handler, name, options = {}) {
   const {
     element,
     has,
     hasText,
+    hasNot,
+    hasNotText,
     viewports,
     argosCSS: _argosCSS,
     root = DEFAULT_SCREENSHOT_ROOT,
+    ariaSnapshot,
+    disableHover = true,
     ...playwrightOptions
   } = options;
   if (!handler) {
@@ -289,83 +445,71 @@ async function argosScreenshot(handler, name, options = {}) {
   if (!name) {
     throw new Error("The `name` argument is required.");
   }
-  const screenshotTarget = typeof element === "string" ? handler.locator(element, { has, hasText }) : element ?? (checkIsFrame(handler) ? handler.locator("body") : handler);
+  const screenshotTarget = typeof element === "string" ? handler.locator(element, { has, hasText, hasNot, hasNotText }) : element ?? (checkIsFrame(handler) ? handler.locator("body") : handler);
   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(handler)
-  ]);
+  const useArgosReporter = checkIsUsingArgosReporter(testInfo);
+  await prepare({ handler, useArgosReporter, root });
   const originalViewportSize = checkIsFrame(handler) ? null : getViewportSize(handler);
   const fullPage = options.fullPage !== void 0 ? options.fullPage : screenshotTarget === handler;
-  const afterAll = await beforeAll(handler, options);
-  const collectMetadata = async (testInfo2) => {
-    const overrides = getMetadataOverrides();
-    const [colorScheme, mediaType, libMetadata, testMetadata] = await Promise.all([
-      handler.evaluate(
-        () => window.__ARGOS__.getColorScheme()
-      ),
-      handler.evaluate(
-        () => window.__ARGOS__.getMediaType()
-      ),
-      getLibraryMetadata(),
-      getTestMetadata(testInfo2)
-    ]);
-    const viewportSize = checkIsFrame(handler) ? null : getViewportSize(handler);
-    const browser = getPage(handler).context().browser();
-    if (!browser) {
-      throw new Error("Can't take screenshots without a browser.");
-    }
-    const browserName = browser.browserType().name();
-    const browserVersion = browser.version();
-    const url = overrides?.url ?? handler.url();
-    const metadata = {
-      url,
-      colorScheme,
-      mediaType,
-      test: testMetadata,
-      browser: {
-        name: browserName,
-        version: browserVersion
-      },
-      ...libMetadata
-    };
-    const viewport = viewportSize ?? getMetadataOverrides()?.viewport;
-    if (viewport) {
-      metadata.viewport = viewport;
-    }
-    return metadata;
-  };
+  const context = getStabilizationContext2(options);
+  const afterAll = await beforeAll(handler, context, { disableHover });
   const stabilizeAndScreenshot = async (name2) => {
-    const names = getScreenshotNames(name2, testInfo);
-    const metadata = await collectMetadata(testInfo);
-    metadata.transient = {};
+    const names = getSnapshotNames(name2, testInfo);
+    const { path: screenshotPath, metadata } = await getPathAndMetadata({
+      handler,
+      extension: PNG_EXTENSION,
+      root,
+      names,
+      testInfo,
+      useArgosReporter
+    });
     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 options.beforeScreenshot?.({
-      runStabilization: (stabilizationOptions) => waitForReadiness(handler, {
-        ...options,
-        stabilize: stabilizationOptions ?? options.stabilize
-      })
+      runStabilization: (stabilizationOptions) => waitForReadiness(
+        handler,
+        getStabilizationContext2({
+          ...options,
+          stabilize: stabilizationOptions ?? options.stabilize
+        })
+      )
     });
     await waitForReadiness(handler, options);
-    const afterEach = await beforeEach(handler, options);
+    const afterEach = await beforeEach(handler, context);
     await waitForReadiness(handler, options);
-    await Promise.all([
+    const [snapshotPath] = await Promise.all([
+      (async () => {
+        if (!ariaSnapshot) {
+          return null;
+        }
+        const snapshotTarget = checkIsPage(screenshotTarget) ? screenshotTarget.locator("body") : screenshotTarget;
+        if (checkIsElementHandle(snapshotTarget)) {
+          throw new Error(
+            `Element handle is not supported with "ariaSnapshot" option. Use a Locator instead.`
+          );
+        }
+        const snapshotPath2 = screenshotToSnapshotPath(screenshotPath);
+        const snapshotMetadata = {
+          ...metadata,
+          transient: {
+            parentName: `${names.name}${PNG_EXTENSION}`,
+            ...metadata.transient.baseName ? {
+              baseName: screenshotToSnapshotPath(
+                metadata.transient.baseName
+              )
+            } : {}
+          }
+        };
+        await Promise.all([
+          snapshotTarget.ariaSnapshot().then((snapshot) => {
+            return writeFile2(snapshotPath2, snapshot, "utf-8");
+          }),
+          writeMetadata2(snapshotPath2, snapshotMetadata)
+        ]);
+        return snapshotPath2;
+      })(),
       screenshotTarget.screenshot({
         path: screenshotPath,
         type: "png",
@@ -374,7 +518,7 @@ async function argosScreenshot(handler, name, options = {}) {
         animations: "disabled",
         ...playwrightOptions
       }),
-      writeMetadata(screenshotPath, metadata)
+      writeMetadata2(screenshotPath, metadata)
     ]);
     const attachments = [
       {
@@ -383,21 +527,26 @@ async function argosScreenshot(handler, name, options = {}) {
         path: screenshotPath
       },
       {
-        name: getAttachmentName(names.name, "metadata"),
+        name: getAttachmentName(names.name, "screenshot/metadata"),
         contentType: "application/json",
-        path: getMetadataPath(screenshotPath)
+        path: getMetadataPath2(screenshotPath)
       }
     ];
-    if (useArgosReporter && testInfo) {
-      await Promise.all(
-        attachments.map(
-          (attachment) => testInfo.attach(attachment.name, {
-            path: attachment.path,
-            contentType: attachment.contentType
-          })
-        )
+    if (snapshotPath) {
+      attachments.push(
+        {
+          name: getAttachmentName(names.name, "aria"),
+          contentType: "application/yaml",
+          path: snapshotPath
+        },
+        {
+          name: getAttachmentName(names.name, "aria/metadata"),
+          contentType: "application/json",
+          path: getMetadataPath2(snapshotPath)
+        }
       );
     }
+    await attachAttachments({ attachments, testInfo, useArgosReporter });
     await afterEach();
     await options.afterScreenshot?.();
     return attachments;
@@ -426,6 +575,15 @@ async function argosScreenshot(handler, name, options = {}) {
   await afterAll();
   return allAttachments;
 }
+function getStabilizationContext2(options) {
+  const { fullPage, argosCSS, stabilize, viewports } = options;
+  return {
+    fullPage,
+    argosCSS,
+    viewports,
+    options: stabilize
+  };
+}
 
 // src/csp.ts
 import { getGlobalScript as getGlobalScript2 } from "@argos-ci/browser";
@@ -436,6 +594,7 @@ function getCSPScriptHash() {
 }
 export {
   setMetadataConfig as DO_NOT_USE_setMetadataConfig,
+  argosAriaSnapshot,
   argosScreenshot,
   getCSPScriptHash
 };