@argos-ci/webdriverio 0.6.24 → 0.6.25

package/dist/index.cjs

@@ -1,5 +1,5 @@
 const argosScreenshot = async (...args) => {
-  const { argosScreenshot } = await import("./index.js");
+  const { argosScreenshot } = await import("./index.mjs");
   return argosScreenshot(...args);
 };
 

package/dist/{index.d.ts → index.d.mts}

@@ -1,21 +1,22 @@
+//#region src/index.d.ts
 type ArgosScreenshotOptions = {
-    /**
-     * Specify ares that should be masked when the screenshot is taken.
-     * Masked elements will be overlaid with a pink box #FF00FF (customized by maskColor)
-     * that completely covers its bounding box.
-     */
-    mask?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    }[];
-    /**
-     * Specify the color of the overlay box for masked elements, in CSS color format.
-     * Default color is pink #FF00FF.
-     * @default "#FF00FF"
-     */
-    maskColor?: string;
+  /**
+   * Specify ares that should be masked when the screenshot is taken.
+   * Masked elements will be overlaid with a pink box #FF00FF (customized by maskColor)
+   * that completely covers its bounding box.
+   */
+  mask?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }[];
+  /**
+   * Specify the color of the overlay box for masked elements, in CSS color format.
+   * Default color is pink #FF00FF.
+   * @default "#FF00FF"
+   */
+  maskColor?: string;
 };
 /**
  * Take a screenshot of the current page, optionally masking certain areas.
@@ -30,6 +31,9 @@ type ArgosScreenshotOptions = {
  * Specify the color of the overlay box for masked elements, in CSS color format.
  * Default color is pink #FF00FF.
  */
-declare function argosScreenshot(browser: WebdriverIO.Browser, name: string, { mask, maskColor }?: ArgosScreenshotOptions): Promise<Buffer<ArrayBufferLike>>;
-
-export { type ArgosScreenshotOptions, argosScreenshot };
+declare function argosScreenshot(browser: WebdriverIO.Browser, name: string, {
+  mask,
+  maskColor
+}?: ArgosScreenshotOptions): Promise<Buffer<ArrayBufferLike>>;
+//#endregion
+export { ArgosScreenshotOptions, argosScreenshot };

package/dist/index.mjs

@@ -0,0 +1,77 @@
+import sharp from "sharp";
+import { resolve } from "node:path";
+import { mkdir } from "node:fs/promises";
+//#region src/index.ts
+async function createMask(dimensions, areas, maskColor) {
+	let mask = sharp({ create: {
+		width: dimensions.width,
+		height: dimensions.height,
+		channels: 4,
+		background: {
+			r: 0,
+			g: 0,
+			b: 0,
+			alpha: 0
+		}
+	} });
+	const areasImages = areas.map((coords) => ({
+		input: Buffer.from("<svg><rect x=\"0\" y=\"0\" width=\"" + coords.width + "\" height=\"" + coords.height + `" fill="${maskColor}"/></svg>`),
+		top: coords.y,
+		left: coords.x
+	}));
+	mask = mask.composite(areasImages);
+	return mask.png().toBuffer();
+}
+async function applyMask(image, mask) {
+	try {
+		return await sharp(image).composite([{
+			input: mask,
+			blend: "over"
+		}]).png().toBuffer();
+	} catch (err) {
+		throw new Error("Error applying mask", { cause: err });
+	}
+}
+async function getImageDimensions(buffer) {
+	try {
+		const { width, height } = await sharp(buffer).metadata();
+		if (!width || !height) throw new Error("Dimensions not found.");
+		return {
+			width,
+			height
+		};
+	} catch (err) {
+		throw new Error("Error getting image dimensions", { cause: err });
+	}
+}
+async function getScreenshotPath(name) {
+	if (name.endsWith(".png")) return name;
+	const screenshotFolder = resolve(process.cwd(), "screenshots/argos");
+	await mkdir(screenshotFolder, { recursive: true });
+	return resolve(screenshotFolder, name + ".png");
+}
+/**
+* Take a screenshot of the current page, optionally masking certain areas.
+* @param browser A WebdriverIO `browser` object.
+* @param name The name of the screenshot or the full path to the screenshot.
+* @param options Options to customize the screenshot.
+* @param options.mask
+* Specify ares that should be masked when the screenshot is taken.
+* Masked elements will be overlaid with a pink box #FF00FF (customized by maskColor)
+* that completely covers its bounding box.
+* @param options.maskColor
+* Specify the color of the overlay box for masked elements, in CSS color format.
+* Default color is pink #FF00FF.
+*/
+async function argosScreenshot(browser, name, { mask, maskColor = "#FF00FF" } = {}) {
+	if (!browser) throw new Error("A WebdriverIO `browser` object is required.");
+	if (!name) throw new Error("The `name` argument is required.");
+	const screenshotPath = await getScreenshotPath(name);
+	const imageBuffer = await browser.saveScreenshot(screenshotPath);
+	if (!mask) return imageBuffer;
+	const maskedBuffer = await applyMask(imageBuffer, await createMask(await getImageDimensions(imageBuffer), mask, maskColor));
+	await sharp(maskedBuffer).toFile(screenshotPath);
+	return maskedBuffer;
+}
+//#endregion
+export { argosScreenshot };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/webdriverio",
   "description": "WebdriverIO SDK for visual testing with Argos.",
-  "version": "0.6.24",
+  "version": "0.6.25",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -26,11 +26,11 @@
     "access": "public"
   },
   "type": "module",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs",
       "default": "./dist/index.cjs"
     },
@@ -46,18 +46,18 @@
     "sharp": "^0.34.5"
   },
   "devDependencies": {
-    "@argos-ci/cli": "4.1.2",
-    "@wdio/cli": "^9.23.2",
-    "@wdio/globals": "^9.23.0",
-    "@wdio/local-runner": "^9.23.2",
-    "@wdio/mocha-framework": "^9.23.2",
-    "@wdio/spec-reporter": "^9.23.2",
-    "@wdio/types": "^9.23.2",
+    "@argos-ci/cli": "4.1.3",
+    "@wdio/cli": "^9.27.0",
+    "@wdio/globals": "^9.27.0",
+    "@wdio/local-runner": "^9.27.0",
+    "@wdio/mocha-framework": "^9.27.0",
+    "@wdio/spec-reporter": "^9.27.0",
+    "@wdio/types": "^9.27.0",
     "tsx": "^4.21.0",
-    "webdriverio": "^9.23.2"
+    "webdriverio": "^9.27.0"
   },
   "scripts": {
-    "build": "tsup && cp ./src/index.cjs ./dist",
+    "build": "tsdown && cp ./src/index.cjs ./dist",
     "test-e2e": "wdio run ./wdio.conf.ts",
     "argos-upload": "pnpm exec argos upload screenshots --build-name \"argos-webdriverio-e2e-node-$NODE_VERSION-$OS\"",
     "e2e": "pnpm run test-e2e && pnpm run argos-upload",
@@ -65,5 +65,5 @@
     "check-format": "prettier --check --ignore-unknown --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "3e325792c50e801034c3248d94d7b1dc91bede71"
+  "gitHead": "b49d186d5eb6e1338982a4cd5c3cb29e6cb0b7af"
 }

package/dist/index.js

@@ -1,76 +0,0 @@
-// src/index.ts
-import sharp from "sharp";
-import { resolve } from "path";
-import { mkdir } from "fs/promises";
-async function createMask(dimensions, areas, maskColor) {
-  let mask = sharp({
-    create: {
-      width: dimensions.width,
-      height: dimensions.height,
-      channels: 4,
-      background: { r: 0, g: 0, b: 0, alpha: 0 }
-    }
-  });
-  const areasImages = areas.map((coords) => ({
-    input: Buffer.from(
-      '<svg><rect x="0" y="0" width="' + coords.width + '" height="' + coords.height + `" fill="${maskColor}"/></svg>`
-    ),
-    top: coords.y,
-    left: coords.x
-  }));
-  mask = mask.composite(areasImages);
-  return mask.png().toBuffer();
-}
-async function applyMask(image, mask) {
-  try {
-    return await sharp(image).composite([
-      {
-        input: mask,
-        blend: "over"
-      }
-    ]).png().toBuffer();
-  } catch (err) {
-    throw new Error("Error applying mask", { cause: err });
-  }
-}
-async function getImageDimensions(buffer) {
-  try {
-    const imageInfo = await sharp(buffer).metadata();
-    const { width, height } = imageInfo;
-    if (!width || !height) {
-      throw new Error("Dimensions not found.");
-    }
-    return { width, height };
-  } catch (err) {
-    throw new Error("Error getting image dimensions", { cause: err });
-  }
-}
-async function getScreenshotPath(name) {
-  if (name.endsWith(".png")) {
-    return name;
-  }
-  const screenshotFolder = resolve(process.cwd(), "screenshots/argos");
-  await mkdir(screenshotFolder, { recursive: true });
-  return resolve(screenshotFolder, name + ".png");
-}
-async function argosScreenshot(browser, name, { mask, maskColor = "#FF00FF" } = {}) {
-  if (!browser) {
-    throw new Error("A WebdriverIO `browser` object is required.");
-  }
-  if (!name) {
-    throw new Error("The `name` argument is required.");
-  }
-  const screenshotPath = await getScreenshotPath(name);
-  const imageBuffer = await browser.saveScreenshot(screenshotPath);
-  if (!mask) {
-    return imageBuffer;
-  }
-  const dimensions = await getImageDimensions(imageBuffer);
-  const maskBuffer = await createMask(dimensions, mask, maskColor);
-  const maskedBuffer = await applyMask(imageBuffer, maskBuffer);
-  await sharp(maskedBuffer).toFile(screenshotPath);
-  return maskedBuffer;
-}
-export {
-  argosScreenshot
-};