vitest-plugin-vis 1.0.4 → 1.1.0

package/esm/client/align_images.d.ts

@@ -0,0 +1,2 @@
+export declare function alignImagesToSameSize(image1: ImageData, image2: ImageData): [image1: ImageData, image2: ImageData];
+//# sourceMappingURL=align_images.d.ts.map

package/esm/client/align_images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"align_images.d.ts","sourceRoot":"","sources":["../../src/client/align_images.ts"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,CAMlH"}

package/esm/client/align_images.js

@@ -0,0 +1,10 @@
+import { getMaxSize } from "../shared/get_max_size.js";
+import { isSameSize } from "../shared/is_same_size.js";
+import { createImageResizer } from "./image_resizer.js";
+export function alignImagesToSameSize(image1, image2) {
+    if (isSameSize(image1, image2))
+        return [image1, image2];
+    const size = getMaxSize(image1, image2);
+    const resize = createImageResizer(size);
+    return [resize(image1), resize(image2)];
+}

package/esm/client/compare_image.d.ts

@@ -0,0 +1,7 @@
+import type { ImageSnapshotCompareOptions } from '../shared/types.ts';
+export declare function compareImage(baselineImage: ImageData, resultImage: ImageData, { failureThreshold, failureThresholdType, diffOptions }?: ImageSnapshotCompareOptions): {
+    pass: boolean;
+    diffAmount: number;
+    diffImage: ImageData;
+};
+//# sourceMappingURL=compare_image.d.ts.map

package/esm/client/compare_image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare_image.d.ts","sourceRoot":"","sources":["../../src/client/compare_image.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAA;AAErE,wBAAgB,YAAY,CAC3B,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,SAAS,EACtB,EAAE,gBAAoB,EAAE,oBAA8B,EAAE,WAAW,EAAE,GAAE,2BAAgC;;;;EAavG"}

package/esm/client/compare_image.js

@@ -0,0 +1,13 @@
+import pixelmatch from 'pixelmatch';
+import { convertThresholdUnit } from "../shared/convert_threshold_unit.js";
+export function compareImage(baselineImage, resultImage, { failureThreshold = 0, failureThresholdType = 'pixel', diffOptions } = {}) {
+    const { width, height } = resultImage;
+    const diffImage = new ImageData(width, height);
+    const pixelDiff = pixelmatch(resultImage.data, baselineImage.data, diffImage.data, width, height, diffOptions);
+    const diffAmount = convertThresholdUnit({ failureThresholdType, width, height }, pixelDiff);
+    return {
+        pass: diffAmount <= failureThreshold,
+        diffAmount,
+        diffImage,
+    };
+}

package/esm/client/expect/to_match_image_snapshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"to_match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/client/expect/to_match_image_snapshot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAK5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAA;AAErF,wBAAgB,oBAAoB;AACnC;;;GAGG;AACH,OAAO,EAAE,GAAG,EACZ,OAAO,CAAC,EAAE,2BAA2B,GAAG,SAAS,GAC/C,sBAAsB,CAgBxB"}
+{"version":3,"file":"to_match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/client/expect/to_match_image_snapshot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAI5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAA;AAErF,wBAAgB,oBAAoB;AACnC;;;GAGG;AACH,OAAO,EAAE,GAAG,EACZ,OAAO,CAAC,EAAE,2BAA2B,GAAG,SAAS,GAC/C,sBAAsB,CAcxB"}

package/esm/client/expect/to_match_image_snapshot.js

@@ -1,8 +1,6 @@
-import { commands } from '@vitest/browser/context';
 import { ctx } from "../ctx.js";
-import { toTaskId } from "../task_id.js";
+import { matchImageSnapshot } from "../match_image_snapshot.js";
 import { success } from "./expectation_result.js";
-import { parseImageSnapshotSubject } from "./to_match_image_snapshot.logic.js";
 export function toMatchImageSnapshot(
 /**
  * The element or locator to take the snapshot of,
@@ -17,16 +15,5 @@ subject, options) {
         throw new Error('`toMatchImageSnapshot()` cannot be called in a concurrent test because ' +
             "concurrent tests run at the same time in the same iframe and affect each other's environment. ");
     }
-    const s = parseImageSnapshotSubject(subject);
-    const taskId = toTaskId(test);
-    return toMatchImageSnapshotAsync(taskId, s, options).then(() => success);
-}
-async function toMatchImageSnapshotAsync(taskId, subject, options) {
-    if (options?.customizeSnapshotId) {
-        const index = await commands.imageSnapshotNextIndex(taskId);
-        const { customizeSnapshotId, ...rest } = options;
-        const snapshotFileId = customizeSnapshotId(taskId, index);
-        return commands.matchImageSnapshot(taskId, subject, { ...rest, snapshotFileId });
-    }
-    return commands.matchImageSnapshot(taskId, subject, options);
+    return matchImageSnapshot(test, subject, options).then(() => success);
 }

package/esm/client/image_data.d.ts

@@ -0,0 +1,3 @@
+export declare function toImageData(base64: string): Promise<ImageData>;
+export declare function toDataURL(imageData: ImageData): Promise<string>;
+//# sourceMappingURL=image_data.d.ts.map

package/esm/client/image_data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image_data.d.ts","sourceRoot":"","sources":["../../src/client/image_data.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,sBAkBzC;AAED,wBAAsB,SAAS,CAAC,SAAS,EAAE,SAAS,mBAenD"}

package/esm/client/image_data.js

@@ -0,0 +1,33 @@
+export function toImageData(base64) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = `data:image/png;base64,${base64}`;
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0);
+            resolve(ctx.getImageData(0, 0, canvas.width, canvas.height));
+        };
+        img.onerror = () => {
+            reject(new Error('Failed to load image'));
+        };
+    });
+}
+export async function toDataURL(imageData) {
+    const canvas = document.createElement('canvas');
+    canvas.width = imageData.width;
+    canvas.height = imageData.height;
+    const ctx = canvas.getContext('2d');
+    ctx.putImageData(imageData, 0, 0);
+    return new Promise((resolve) => {
+        canvas.toBlob((blob) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                resolve(reader.result);
+            };
+            reader.readAsDataURL(blob);
+        });
+    });
+}

package/esm/client/image_resizer.d.ts

@@ -0,0 +1,9 @@
+export declare const createImageResizer: ({ width, height }: {
+    width: number;
+    height: number;
+}) => (image: ImageData) => ImageData;
+export declare const createImageResizer2: ({ width, height }: {
+    width: number;
+    height: number;
+}) => (image: ImageData) => ImageData;
+//# sourceMappingURL=image_resizer.d.ts.map

package/esm/client/image_resizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image_resizer.d.ts","sourceRoot":"","sources":["../../src/client/image_resizer.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,sBACV;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,aAC7C,SAAS,cA2BhB,CAAA;AAGF,eAAO,MAAM,mBAAmB,sBACX;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,aAC7C,SAAS,cAsBhB,CAAA"}

package/esm/client/image_resizer.js

@@ -0,0 +1,49 @@
+import { isSameSize } from "../shared/is_same_size.js";
+export const createImageResizer = ({ width, height }) => (image) => {
+    if (isSameSize(image, { width, height }))
+        return image;
+    const inArea = (x, y) => y <= image.height && x <= image.width;
+    const data = new Uint8ClampedArray(width * height * 4);
+    const result = new ImageData(data, width, height, { colorSpace: image.colorSpace });
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const idx = (width * y + x) << 2;
+            if (inArea(x, y)) {
+                const old = (image.width * y + x) << 2;
+                result.data[idx] = image.data[old];
+                result.data[idx + 1] = image.data[old + 1];
+                result.data[idx + 2] = image.data[old + 2];
+                result.data[idx + 3] = image.data[old + 3];
+            }
+            else {
+                result.data[idx] = 0;
+                result.data[idx + 1] = 0;
+                result.data[idx + 2] = 0;
+                result.data[idx + 3] = 64;
+            }
+        }
+    }
+    return result;
+};
+// slower
+export const createImageResizer2 = ({ width, height }) => (image) => {
+    if (isSameSize(image, { width, height }))
+        return image;
+    const inArea = (x, y) => y <= image.height && x <= image.width;
+    const data = new Uint8ClampedArray(width * height * 4);
+    const result = new ImageData(data, width, height, { colorSpace: image.colorSpace });
+    const copyBytes = image.width * 4;
+    for (let y = 0; y < height; y++) {
+        result.data.set(image.data.slice(y * image.width, copyBytes), y * width * 4);
+        for (let x = image.width; x < width; x++) {
+            const idx = (width * y + x) << 2;
+            if (!inArea(x, y)) {
+                result.data[idx] = 0;
+                result.data[idx + 1] = 0;
+                result.data[idx + 2] = 0;
+                result.data[idx + 3] = 64;
+            }
+        }
+    }
+    return result;
+};

package/esm/client/match_image_snapshot.d.ts

@@ -0,0 +1,8 @@
+import type { Task } from 'vitest';
+import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts';
+export declare function matchImageSnapshot(test: Task, subject: any, options?: ToMatchImageSnapshotOptions): Promise<void>;
+/**
+ * @deprecated internalized. Use `matchImageSnapshot` directly instead.
+ */
+export declare function parseImageSnapshotSubject(subject: any): any;
+//# sourceMappingURL=match_image_snapshot.d.ts.map

package/esm/client/match_image_snapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match_image_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/match_image_snapshot.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAIlC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAO5F,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,2BAA2B,iBAuCvG;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,GAAG,OAOrD"}

package/esm/client/match_image_snapshot.js

@@ -0,0 +1,63 @@
+import { commands } from '@vitest/browser/context';
+import dedent from 'dedent';
+import { resolve } from 'pathe';
+import { isBase64String } from "../shared/base64.js";
+import { alignImagesToSameSize } from "./align_images.js";
+import { compareImage } from "./compare_image.js";
+import { toDataURL, toImageData } from "./image_data.js";
+import { prettifyOptions } from "./match_image_snapshot.logic.js";
+import { convertElementToCssSelector } from "./selector.js";
+import { toTaskId } from "./task_id.js";
+import { server } from "./vitest_browser_context_proxy.js";
+export async function matchImageSnapshot(test, subject, options) {
+    const taskId = toTaskId(test);
+    const info = await commands.prepareImageSnapshotComparison(taskId, parseImageSnapshotSubject(subject), options?.customizeSnapshotId ? await parseImageSnapshotOptions(taskId, options) : options);
+    if (!info)
+        return;
+    const baselineImage = await toImageData(info.baseline);
+    const resultImage = await toImageData(info.result);
+    const [baselineAlignedImage, resultAlignedImage] = alignImagesToSameSize(baselineImage, resultImage);
+    const { pass, diffAmount, diffImage } = compareImage(baselineAlignedImage, resultAlignedImage, options);
+    if (pass)
+        return;
+    if (server.config.snapshotOptions.updateSnapshot === 'all') {
+        await writeSnapshot(info.baselinePath, resultImage);
+        return;
+    }
+    await writeSnapshot(info.diffPath, diffImage);
+    throw new Error(dedent `Snapshot \`${taskId}\` mismatched
+
+			${options?.failureThreshold
+        ? options?.failureThresholdType === 'percent'
+            ? `Expected image to match within ${options.failureThreshold}% but was differ by ${diffAmount}%.`
+            : `Expected image to match within ${options.failureThreshold} pixels but was differ by ${diffAmount} pixels.`
+        : `Expected image to match but was differ by ${options?.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}.`}
+
+			Options:    ${prettifyOptions(options)}
+
+			Expected:   ${resolve(info.projectRoot, info.baselinePath)}
+			Actual:     ${resolve(info.projectRoot, info.resultPath)}
+			Difference: ${resolve(info.projectRoot, info.diffPath)}`);
+}
+/**
+ * @deprecated internalized. Use `matchImageSnapshot` directly instead.
+ */
+export function parseImageSnapshotSubject(subject) {
+    if (subject instanceof Element)
+        return convertElementToCssSelector(subject);
+    if (subject?.['selector'])
+        return subject['selector'];
+    if (isBase64String(subject))
+        return subject;
+    throw new Error(`'toMatchImageSnapshot()' expects the subject to be an element, locator, or image encoded in base64 string, but got: ${subject}`);
+}
+async function writeSnapshot(path, image) {
+    const content = (await toDataURL(image)).split(',')[1];
+    return commands.writeImageSnapshot(path, content);
+}
+async function parseImageSnapshotOptions(taskId, options) {
+    const index = await commands.imageSnapshotNextIndex(taskId);
+    const { customizeSnapshotId, ...rest } = options;
+    const snapshotFileId = customizeSnapshotId(taskId, index);
+    return { ...rest, snapshotFileId };
+}

package/esm/client/match_image_snapshot.logic.d.ts

@@ -0,0 +1,3 @@
+import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts';
+export declare function prettifyOptions(options: ToMatchImageSnapshotOptions | undefined): string;
+//# sourceMappingURL=match_image_snapshot.logic.d.ts.map

package/esm/client/match_image_snapshot.logic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match_image_snapshot.logic.d.ts","sourceRoot":"","sources":["../../src/client/match_image_snapshot.logic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,wBAAgB,eAAe,CAAC,OAAO,EAAE,2BAA2B,GAAG,SAAS,UAU/E"}

package/esm/client/match_image_snapshot.logic.js

@@ -0,0 +1,11 @@
+export function prettifyOptions(options) {
+    if (!options)
+        return 'none';
+    return [
+        `failureThreshold: ${options.failureThreshold ?? 0} ${options.failureThresholdType ?? 'pixel'}`,
+        options.diffOptions ? `diffOptions: ${JSON.stringify(options.diffOptions)}` : '',
+        options.timeout ? `timeout: ${options.timeout} ms` : '',
+    ]
+        .filter(Boolean)
+        .join(', ');
+}

package/esm/client/task_id.d.ts

@@ -2,6 +2,9 @@ type Task = {
     name: string;
     suite?: Task | undefined;
 };
+/**
+ * @deprecated not needed anymore. Use `matchImageSnapshot` directly instead.
+ */
 export declare function toTaskId(task: Task): string;
 export {};
 //# sourceMappingURL=task_id.d.ts.map

package/esm/client/task_id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"task_id.d.ts","sourceRoot":"","sources":["../../src/client/task_id.ts"],"names":[],"mappings":"AAAA,KAAK,IAAI,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,CAAA;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,UAUlC"}
+{"version":3,"file":"task_id.d.ts","sourceRoot":"","sources":["../../src/client/task_id.ts"],"names":[],"mappings":"AAAA,KAAK,IAAI,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,CAAA;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,UAUlC"}

package/esm/client/task_id.js

@@ -1,3 +1,6 @@
+/**
+ * @deprecated not needed anymore. Use `matchImageSnapshot` directly instead.
+ */
 export function toTaskId(task) {
     const l = [];
     let t = task;

package/esm/client/vitest_browser_context_proxy.d.ts

@@ -0,0 +1,32 @@
+import type { BrowserCommands, Platform } from '@vitest/browser/context';
+import type { SerializedConfig } from 'vitest';
+export declare const server: {
+    /**
+     * Platform the Vitest server is running on.
+     * The same as calling `process.platform` on the server.
+     */
+    platform: Platform;
+    /**
+     * Runtime version of the Vitest server.
+     * The same as calling `process.version` on the server.
+     */
+    version: string;
+    /**
+     * Name of the browser provider.
+     */
+    provider: string;
+    /**
+     * Name of the current browser.
+     */
+    browser: string;
+    /**
+     * Available commands for the browser.
+     * @see {@link https://vitest.dev/guide/browser/commands}
+     */
+    commands: BrowserCommands;
+    /**
+     * Serialized test config.
+     */
+    config: SerializedConfig;
+};
+//# sourceMappingURL=vitest_browser_context_proxy.d.ts.map

package/esm/client/vitest_browser_context_proxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest_browser_context_proxy.d.ts","sourceRoot":"","sources":["../../src/client/vitest_browser_context_proxy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAU9C,eAAO,MAAM,MAAM;IAClB;;;OAGG;cACO,QAAQ;IAClB;;;OAGG;aACM,MAAM;IACf;;OAEG;cACO,MAAM;IAChB;;OAEG;aACM,MAAM;IACf;;;OAGG;cACO,eAAe;IACzB;;OAEG;YACK,gBAAgB;CAKvB,CAAA"}

package/esm/client/vitest_browser_context_proxy.js

@@ -0,0 +1,11 @@
+let ctx;
+if (globalThis.__vitest_browser__) {
+    import('@vitest/browser/context').then((m) => {
+        ctx = m;
+    });
+}
+export const server = new Proxy({}, {
+    get(target, prop) {
+        return target[prop] ?? (ctx?.server)[prop];
+    },
+});

package/esm/client.d.ts

@@ -1,6 +1,6 @@
 export * from './client/expect/expectation_result.ts';
-export * from './client/expect/to_match_image_snapshot.logic.ts';
 export type * from './client/expect/to_match_image_snapshot.types.ts';
+export * from './client/match_image_snapshot.ts';
 export * from './client/should_take_snapshot.ts';
 export * from './client/snapshot_options.ts';
 export * from './client/task_id.ts';

package/esm/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAA;AACrD,cAAc,kDAAkD,CAAA;AAChE,mBAAmB,kDAAkD,CAAA;AACrE,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,qBAAqB,CAAA;AACnC,mBAAmB,mBAAmB,CAAA"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAA;AACrD,mBAAmB,kDAAkD,CAAA;AACrE,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,qBAAqB,CAAA;AACnC,mBAAmB,mBAAmB,CAAA"}

package/esm/client.js

@@ -1,5 +1,5 @@
 export * from "./client/expect/expectation_result.js";
-export * from "./client/expect/to_match_image_snapshot.logic.js";
+export * from "./client/match_image_snapshot.js";
 export * from "./client/should_take_snapshot.js";
 export * from "./client/snapshot_options.js";
 export * from "./client/task_id.js";

package/esm/config/vis.d.ts

@@ -16,6 +16,8 @@ export declare function vis(options?: VisOptions): {
                     imageSnapshotNextIndex: import("vitest/node").BrowserCommand<[taskId: string]>;
                     hasImageSnapshot: import("vitest/node").BrowserCommand<[taskId: string, snapshotId?: string | undefined]>;
                     matchImageSnapshot: import("vitest/node").BrowserCommand<[taskId: string, subject: string, options?: import("../commands.ts").MatchImageSnapshotOptions | undefined]>;
+                    prepareImageSnapshotComparison: import("vitest/node").BrowserCommand<[taskId: string, snapshotId: string, options?: import("../commands.ts").MatchImageSnapshotOptions | undefined]>;
+                    writeImageSnapshot: import("vitest/node").BrowserCommand<[filePath: string, base64: string]>;
                 };
             };
             setupFiles: string[] | undefined;

package/esm/config/vis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vis.d.ts","sourceRoot":"","sources":["../../src/config/vis.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,OAAO,GAAE,UAA+B;;;;;sBASxB,MAAM;;;;;;;;;;;EAQzC"}
+{"version":3,"file":"vis.d.ts","sourceRoot":"","sources":["../../src/config/vis.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,OAAO,GAAE,UAA+B;;;;;sBASxB,MAAM;;;;;;;;;;;;;EAQzC"}

package/esm/server/browser_provider/playwright.js

@@ -2,7 +2,7 @@ export function playwright(context) {
     return {
         async takeScreenshot(filePath, selector, options) {
             // The `Locator` type from `vitest` has less props than the `Locator` in `playwright`
-            const subject = context.iframe.locator(selector ?? 'body');
+            const subject = context.iframe.locator(selector);
             return subject.screenshot({
                 timeout: options?.timeout,
                 path: filePath,

package/esm/server/browser_provider/webdriverio.js

@@ -2,7 +2,7 @@ export function webdriverio(context) {
     const page = context.provider.browser;
     return {
         async takeScreenshot(filePath, selector) {
-            const element = await page.$(`${selector ?? 'body'}`);
+            const element = await page.$(`${selector}`);
             return element.saveScreenshot(filePath);
         },
     };

package/esm/server/commands/extend.d.ts

@@ -1,9 +1,11 @@
 import { type HasImageSnapshotCommand } from './has_image_snapshot.ts';
 import { type ImageSnapshotNextIndexCommand } from './image_snapshot_next_index.ts';
 import { type MatchImageSnapshotCommand } from './match_image_snapshot.ts';
+import { type PrepareImageSnapshotComparisonCommand } from './prepare_image_snapshot_comparison.ts';
 import { type SetupVisSuiteCommand } from './setup_vis_suite.ts';
+import { type WriteImageSnapshotCommand } from './write_image_snapshot.ts';
 declare module '@vitest/browser/context' {
-    interface BrowserCommands extends SetupVisSuiteCommand, ImageSnapshotNextIndexCommand, HasImageSnapshotCommand, MatchImageSnapshotCommand {
+    interface BrowserCommands extends SetupVisSuiteCommand, ImageSnapshotNextIndexCommand, HasImageSnapshotCommand, PrepareImageSnapshotComparisonCommand, WriteImageSnapshotCommand, MatchImageSnapshotCommand {
     }
 }
 export declare const commands: {
@@ -11,5 +13,7 @@ export declare const commands: {
     imageSnapshotNextIndex: import("vitest/node").BrowserCommand<[taskId: string]>;
     hasImageSnapshot: import("vitest/node").BrowserCommand<[taskId: string, snapshotId?: string | undefined]>;
     matchImageSnapshot: import("vitest/node").BrowserCommand<[taskId: string, subject: string, options?: import("./match_image_snapshot.ts").MatchImageSnapshotOptions | undefined]>;
+    prepareImageSnapshotComparison: import("vitest/node").BrowserCommand<[taskId: string, snapshotId: string, options?: import("./match_image_snapshot.ts").MatchImageSnapshotOptions | undefined]>;
+    writeImageSnapshot: import("vitest/node").BrowserCommand<[filePath: string, base64: string]>;
 };
 //# sourceMappingURL=extend.d.ts.map

package/esm/server/commands/extend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extend.d.ts","sourceRoot":"","sources":["../../../src/server/commands/extend.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,yBAAyB,CAAA;AACxF,OAAO,EAAE,KAAK,6BAA6B,EAA0B,MAAM,gCAAgC,CAAA;AAC3G,OAAO,EAAE,KAAK,yBAAyB,EAAsB,MAAM,2BAA2B,CAAA;AAC9F,OAAO,EAAE,KAAK,oBAAoB,EAAiB,MAAM,sBAAsB,CAAA;AAE/E,OAAO,QAAQ,yBAAyB,CAAC;IACxC,UAAU,eACT,SAAQ,oBAAoB,EAC3B,6BAA6B,EAC7B,uBAAuB,EACvB,yBAAyB;KAAG;CAC9B;AAED,eAAO,MAAM,QAAQ;;;;;CAKpB,CAAA"}
+{"version":3,"file":"extend.d.ts","sourceRoot":"","sources":["../../../src/server/commands/extend.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,yBAAyB,CAAA;AACxF,OAAO,EAAE,KAAK,6BAA6B,EAA0B,MAAM,gCAAgC,CAAA;AAC3G,OAAO,EAAE,KAAK,yBAAyB,EAAsB,MAAM,2BAA2B,CAAA;AAC9F,OAAO,EACN,KAAK,qCAAqC,EAE1C,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAAE,KAAK,oBAAoB,EAAiB,MAAM,sBAAsB,CAAA;AAC/E,OAAO,EAAE,KAAK,yBAAyB,EAAsB,MAAM,2BAA2B,CAAA;AAE9F,OAAO,QAAQ,yBAAyB,CAAC;IACxC,UAAU,eACT,SAAQ,oBAAoB,EAC3B,6BAA6B,EAC7B,uBAAuB,EACvB,qCAAqC,EACrC,yBAAyB,EACzB,yBAAyB;KAAG;CAC9B;AAED,eAAO,MAAM,QAAQ;;;;;;;CAOpB,CAAA"}

package/esm/server/commands/extend.js

@@ -1,10 +1,14 @@
 import { hasImageSnapshot } from "./has_image_snapshot.js";
 import { imageSnapshotNextIndex } from "./image_snapshot_next_index.js";
 import { matchImageSnapshot } from "./match_image_snapshot.js";
+import { prepareImageSnapshotComparison, } from "./prepare_image_snapshot_comparison.js";
 import { setupVisSuite } from "./setup_vis_suite.js";
+import { writeImageSnapshot } from "./write_image_snapshot.js";
 export const commands = {
     setupVisSuite,
     imageSnapshotNextIndex,
     hasImageSnapshot,
     matchImageSnapshot,
+    prepareImageSnapshotComparison,
+    writeImageSnapshot,
 };

package/esm/server/commands/match_image_snapshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/server/commands/match_image_snapshot.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,aAAa,CAAA;AAIxE,OAAO,KAAK,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,uBAAuB,CAAA;AAM9B,MAAM,WAAW,yBAAyB;IACzC,kBAAkB,EAAE,CACnB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS,KAC3C,OAAO,CAAC,IAAI,CAAC,CAAA;CAClB;AAED,MAAM,WAAW,yBAChB,SAAQ,2BAA2B,EAClC,sBAAsB,EACtB,2BAA2B;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC;AAED,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAC9C;IAAC,MAAM,EAAE,MAAM;IAAE,OAAO,EAAE,MAAM;IAAE,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS;CAAC,CA4DlF,CAAA"}
+{"version":3,"file":"match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/server/commands/match_image_snapshot.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAIjD,OAAO,KAAK,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,uBAAuB,CAAA;AAM9B,MAAM,WAAW,yBAAyB;IACzC,kBAAkB,EAAE,CACnB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS,KAC3C,OAAO,CAAC,IAAI,CAAC,CAAA;CAClB;AAED,MAAM,WAAW,yBAChB,SAAQ,2BAA2B,EAClC,sBAAsB,EACtB,2BAA2B;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC;AAED,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAC9C;IAAC,MAAM,EAAE,MAAM;IAAE,OAAO,EAAE,MAAM;IAAE,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS;CAAC,CAiElF,CAAA"}

package/esm/server/commands/match_image_snapshot.js

@@ -1,14 +1,13 @@
 import dedent from 'dedent';
 import ci from 'is-ci';
-import { mkdirp } from 'mkdirp';
-import { dirname, resolve } from 'pathe';
+import { resolve } from 'pathe';
 import { PNG } from 'pngjs';
 import { isBase64String } from "../../shared/base64.js";
 import { getMaxSize } from "../../shared/get_max_size.js";
 import { isSameSize } from "../../shared/is_same_size.js";
-import { browserApi } from "../browser_provider/browser_api.js";
 import { compareImage } from "../compare_image.js";
 import { file } from "../file.js";
+import { takeSnapshot, takeSnapshotByBrowser, writeSnapshot, writeSnapshotBuffer } from "../snapshot.js";
 import { visContext } from "../vis_context.js";
 export const matchImageSnapshot = async (context, taskId, subject, options) => {
     if (!context.testPath) {
@@ -29,7 +28,7 @@ export const matchImageSnapshot = async (context, taskId, subject, options) => {
         }
         return;
     }
-    const resultBuffer = await takeSnapshot(context, subject, info.resultPath, options);
+    const resultBuffer = await takeSnapshot(context, info.resultPath, subject, options);
     const baselineImage = PNG.sync.read(baselineBuffer, { skipRescale: true, checkCRC: false });
     const resultImage = PNG.sync.read(resultBuffer, { skipRescale: true, checkCRC: false });
     const [baselineAlignedImage, resultAlignedImage] = alignImageSizes(baselineImage, resultImage);
@@ -45,6 +44,10 @@ export const matchImageSnapshot = async (context, taskId, subject, options) => {
 				Expected:   ${resolve(context.project.runner.root, info.baselinePath)}
 				Actual:     ${resolve(context.project.runner.root, info.resultPath)}`);
     }
+    if (context.project.config.snapshotOptions.updateSnapshot === 'all') {
+        await writeSnapshotBuffer(info.baselinePath, resultImage.data);
+        return;
+    }
     await writeSnapshotBuffer(info.diffPath, diffImage.data);
     throw new Error(dedent `Snapshot \`${taskId}\` mismatched
 
@@ -60,28 +63,6 @@ export const matchImageSnapshot = async (context, taskId, subject, options) => {
 			Actual:     ${resolve(context.project.runner.root, info.resultPath)}
 			Difference: ${resolve(context.project.runner.root, info.diffPath)}`);
 };
-async function takeSnapshot(context, subject, filePath, options) {
-    if (isBase64String(subject)) {
-        await writeSnapshot(filePath, subject);
-        return Buffer.from(subject, 'base64');
-    }
-    return takeSnapshotByBrowser(context, filePath, subject, options);
-}
-async function takeSnapshotByBrowser(context, filePath, subject, options) {
-    await mkdirp(dirname(filePath));
-    const browser = browserApi(context);
-    return browser.takeScreenshot(filePath, subject, {
-        timeout: options?.timeout,
-    });
-}
-async function writeSnapshot(filePath, subject) {
-    await mkdirp(dirname(filePath));
-    await file.writeFile(filePath, subject, { encoding: 'base64' });
-}
-async function writeSnapshotBuffer(filePath, subject) {
-    await mkdirp(dirname(filePath));
-    await file.writeFile(filePath, subject);
-}
 function alignImageSizes(baseline, result) {
     if (isSameSize(baseline, result))
         return [baseline, result];

package/esm/server/commands/prepare_image_snapshot_comparison.d.ts

@@ -0,0 +1,20 @@
+import type { BrowserCommand } from 'vitest/node';
+import type { MatchImageSnapshotOptions } from './match_image_snapshot.ts';
+type ImageSnapshotComparisonInfo = {
+    projectRoot: string;
+    baselinePath: string;
+    resultPath: string;
+    diffPath: string;
+    baseline: string;
+    result: string;
+};
+export interface PrepareImageSnapshotComparisonCommand {
+    prepareImageSnapshotComparison: (taskId: string | undefined, subject: string, options?: MatchImageSnapshotOptions | undefined) => Promise<ImageSnapshotComparisonInfo | undefined>;
+}
+export declare const prepareImageSnapshotComparison: BrowserCommand<[
+    taskId: string,
+    snapshotId: string,
+    options?: MatchImageSnapshotOptions | undefined
+]>;
+export {};
+//# sourceMappingURL=prepare_image_snapshot_comparison.d.ts.map

package/esm/server/commands/prepare_image_snapshot_comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prepare_image_snapshot_comparison.d.ts","sourceRoot":"","sources":["../../../src/server/commands/prepare_image_snapshot_comparison.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAKjD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAE1E,KAAK,2BAA2B,GAAG;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,qCAAqC;IACrD,8BAA8B,EAAE,CAC/B,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS,KAC3C,OAAO,CAAC,2BAA2B,GAAG,SAAS,CAAC,CAAA;CACrD;AAED,eAAO,MAAM,8BAA8B,EAAE,cAAc,CAC1D;IAAC,MAAM,EAAE,MAAM;IAAE,UAAU,EAAE,MAAM;IAAE,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS;CAAC,CA4BrF,CAAA"}

package/esm/server/commands/prepare_image_snapshot_comparison.js

@@ -0,0 +1,32 @@
+import ci from 'is-ci';
+import { isBase64String } from "../../shared/base64.js";
+import { file } from "../file.js";
+import { takeSnapshot, takeSnapshotByBrowser, writeSnapshot } from "../snapshot.js";
+import { visContext } from "../vis_context.js";
+export const prepareImageSnapshotComparison = async (context, taskId, subject, options) => {
+    if (!context.testPath) {
+        throw new Error('Cannot match snapshot without testPath');
+    }
+    // vitest:browser passes in `null` when not defined
+    if (!options)
+        options = {};
+    options.timeout = options.timeout ?? (ci ? 30000 : 5000);
+    const info = visContext.getSnapshotInfo(context.testPath, taskId, options);
+    const baselineBuffer = await file.tryReadFile(info.baselinePath);
+    if (!baselineBuffer) {
+        if (isBase64String(subject)) {
+            await writeSnapshot(info.baselinePath, subject);
+        }
+        else {
+            await takeSnapshotByBrowser(context, info.baselinePath, subject, options);
+        }
+        return;
+    }
+    const resultBuffer = await takeSnapshot(context, info.resultPath, subject, options);
+    return {
+        ...info,
+        projectRoot: context.project.runner.root,
+        baseline: baselineBuffer.toString('base64'),
+        result: resultBuffer.toString('base64'),
+    };
+};

package/esm/server/commands/write_image_snapshot.d.ts

@@ -0,0 +1,6 @@
+import type { BrowserCommand } from 'vitest/node';
+export interface WriteImageSnapshotCommand {
+    writeImageSnapshot(taskId: string, snapshotId?: string | undefined): Promise<boolean>;
+}
+export declare const writeImageSnapshot: BrowserCommand<[filePath: string, base64: string]>;
+//# sourceMappingURL=write_image_snapshot.d.ts.map

package/esm/server/commands/write_image_snapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"write_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/server/commands/write_image_snapshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAGjD,MAAM,WAAW,yBAAyB;IACzC,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;CACrF;AAED,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAUjF,CAAA"}

package/esm/server/commands/write_image_snapshot.js

@@ -0,0 +1,10 @@
+import { mkdirp } from 'mkdirp';
+import { dirname } from 'pathe';
+import { file } from "../file.js";
+export const writeImageSnapshot = async (context, filePath, base64) => {
+    if (!context.testPath) {
+        throw new Error('Cannot take snapshot without testPath');
+    }
+    await mkdirp(dirname(filePath));
+    await file.writeFile(filePath, base64, { encoding: 'base64' });
+};