@argos-ci/puppeteer 1.1.2 → 1.1.4

package/dist/index.cjs

@@ -0,0 +1,8 @@
+// @ts-ignore
+const argosScreenshot = async (...args)=>{
+    // @ts-ignore
+    const { argosScreenshot } = await import('./index.mjs');
+    return argosScreenshot(...args);
+};
+// @ts-ignore
+exports.argosScreenshot = argosScreenshot;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { ElementHandle, Page, ScreenshotOptions } from "puppeteer";
+import { ViewportOption } from "@argos-ci/browser";
+type ArgosScreenshotOptions = Omit<ScreenshotOptions, "encoding" | "type" | "omitBackground" | "path"> & {
+    /**
+     * ElementHandle or string selector of the element to take a screenshot of.
+     */
+    element?: string | ElementHandle;
+    /**
+     * Viewports to take screenshots of.
+     */
+    viewports?: ViewportOption[];
+};
+declare function argosScreenshot(page: Page, name: string, { element, viewports, ...options }?: ArgosScreenshotOptions): Promise<void>;
+export { ArgosScreenshotOptions, argosScreenshot };

package/dist/index.mjs

@@ -0,0 +1,142 @@
+import { resolve } from 'node:path';
+import { mkdir, readFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { resolveViewport } from '@argos-ci/browser';
+import { getScreenshotName, writeMetadata, readVersionFromPackage } from '@argos-ci/util';
+
+const require = createRequire(import.meta.url);
+/**
+ * Inject Argos script into the page.
+ */ async function injectArgos(page) {
+    const fileName = require.resolve("@argos-ci/browser/global.js");
+    const content = await readFile(fileName, "utf-8");
+    await page.addScriptTag({
+        content
+    });
+}
+async function getPuppeteerVersion() {
+    const pkgPath = require.resolve("puppeteer/package.json");
+    return readVersionFromPackage(pkgPath);
+}
+async function getArgosPuppeteerVersion() {
+    const pkgPath = require.resolve("@argos-ci/puppeteer/package.json");
+    return readVersionFromPackage(pkgPath);
+}
+function getViewport(page) {
+    const viewport = page.viewport();
+    if (!viewport) {
+        throw new Error("Can't take screenshots without a viewport.");
+    }
+    return viewport;
+}
+async function getBrowserInfo(page) {
+    const rawVersion = await page.browser().version();
+    const [browserName, browserVersion] = rawVersion.split("/");
+    return {
+        browserName,
+        browserVersion
+    };
+}
+async function argosScreenshot(page, name, { element, viewports, ...options } = {}) {
+    if (!page) {
+        throw new Error("A Puppeteer `page` object is required.");
+    }
+    if (!name) {
+        throw new Error("The `name` argument is required.");
+    }
+    const screenshotFolder = resolve(process.cwd(), "screenshots/argos");
+    const [originalViewport] = await Promise.all([
+        getViewport(page),
+        // Create the screenshot folder if it doesn't exist
+        mkdir(screenshotFolder, {
+            recursive: true
+        }),
+        // Inject Argos script into the page
+        injectArgos(page)
+    ]);
+    const fullPage = options.fullPage !== undefined ? options.fullPage : element === undefined;
+    await page.evaluate(({ fullPage })=>window.__ARGOS__.prepareForScreenshot({
+            fullPage
+        }), {
+        fullPage
+    });
+    async function collectMetadata() {
+        const [colorScheme, mediaType, puppeteerVersion, argosPuppeteerVersion, { browserName, browserVersion }] = await Promise.all([
+            page.evaluate(()=>window.__ARGOS__.getColorScheme()),
+            page.evaluate(()=>window.__ARGOS__.getMediaType()),
+            getPuppeteerVersion(),
+            getArgosPuppeteerVersion(),
+            getBrowserInfo(page)
+        ]);
+        const viewport = getViewport(page);
+        const metadata = {
+            url: page.url(),
+            viewport: {
+                width: viewport.width,
+                height: viewport.height
+            },
+            colorScheme,
+            mediaType,
+            test: null,
+            browser: {
+                name: browserName,
+                version: browserVersion
+            },
+            automationLibrary: {
+                name: "puppeteer",
+                version: puppeteerVersion
+            },
+            sdk: {
+                name: "@argos-ci/puppeteer",
+                version: argosPuppeteerVersion
+            }
+        };
+        return metadata;
+    }
+    async function stabilizeAndScreenshot(name) {
+        await page.waitForFunction(()=>window.__ARGOS__.waitForStability());
+        const screenshotPath = resolve(screenshotFolder, `${name}.png`);
+        const metadata = await collectMetadata();
+        await writeMetadata(screenshotPath, metadata);
+        const screenshotOptions = {
+            path: screenshotPath,
+            type: "png",
+            fullPage,
+            ...options
+        };
+        // If no element is specified, take a screenshot of the whole page
+        if (element === undefined) {
+            await page.screenshot(screenshotOptions);
+            return;
+        }
+        // If a string is passed, take a screenshot of the element matching the selector
+        if (typeof element === "string") {
+            await page.waitForSelector(element);
+            const handle = await page.$(element);
+            if (!handle) {
+                throw new Error(`Unable to find element ${element}`);
+            }
+            await handle.screenshot(screenshotOptions);
+            return;
+        }
+        // If an element is passed, take a screenshot of it
+        await element.screenshot(screenshotOptions);
+    }
+    // If no viewports are specified, take a single screenshot
+    if (!viewports) {
+        await stabilizeAndScreenshot(name);
+        return;
+    }
+    // Take screenshots for each viewport
+    for (const viewport of viewports){
+        const viewportSize = resolveViewport(viewport);
+        await page.setViewport(viewportSize);
+        await stabilizeAndScreenshot(getScreenshotName(name, {
+            viewportWidth: viewportSize.width
+        }));
+    }
+    // Restore the original viewport
+    await page.setViewport(originalViewport);
+}
+
+export { argosScreenshot };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/puppeteer",
   "description": "Visual testing solution to avoid visual regression. Puppeteer commands and utilities for Argos visual testing.",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -62,5 +62,5 @@
     "argos-upload": "pnpm exec argos upload screenshots --build-name \"argos-puppeteer-e2e-node-$NODE_VERSION-$OS\"",
     "e2e": "pnpm run test && pnpm run argos-upload"
   },
-  "gitHead": "27c07b619069353c2a8c8c98203b9c27b4e2bed0"
+  "gitHead": "c84011dc3a2aefc6bbdf75958020b0a8910612dd"
 }