vitest-plugin-vis 1.0.1 → 1.0.3

package/esm/server/browser_provider/playwright.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playwright.d.ts","sourceRoot":"","sources":["../../../src/server/browser_provider/playwright.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,wBAAgB,UAAU,CAAC,OAAO,EAAE,qBAAqB,GAAG,UAAU,CAYrE"}
+{"version":3,"file":"playwright.d.ts","sourceRoot":"","sources":["../../../src/server/browser_provider/playwright.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,wBAAgB,UAAU,CAAC,OAAO,EAAE,qBAAqB,GAAG,UAAU,CAWrE"}

package/esm/server/browser_provider/playwright.js

@@ -3,11 +3,10 @@ export function playwright(context) {
         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 buffer = await subject.screenshot({
+            return subject.screenshot({
                 timeout: options?.timeout,
                 path: filePath,
             });
-            return buffer.toString('base64');
         },
     };
 }

package/esm/server/browser_provider/types.d.ts

@@ -1,6 +1,6 @@
 export interface BrowserApi {
     takeScreenshot(filePath: string, selector: string, options: {
         timeout?: number | undefined;
-    } | undefined): Promise<string>;
+    } | undefined): Promise<Buffer>;
 }
 //# sourceMappingURL=types.d.ts.map

package/esm/server/browser_provider/webdriverio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webdriverio.d.ts","sourceRoot":"","sources":["../../../src/server/browser_provider/webdriverio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,wBAAgB,WAAW,CAAC,OAAO,EAAE,qBAAqB,GAAG,UAAU,CAStE"}
+{"version":3,"file":"webdriverio.d.ts","sourceRoot":"","sources":["../../../src/server/browser_provider/webdriverio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,wBAAgB,WAAW,CAAC,OAAO,EAAE,qBAAqB,GAAG,UAAU,CAQtE"}

package/esm/server/browser_provider/webdriverio.js

@@ -3,8 +3,7 @@ export function webdriverio(context) {
     return {
         async takeScreenshot(filePath, selector) {
             const element = await page.$(`${selector ?? 'body'}`);
-            const buffer = await element.saveScreenshot(filePath);
-            return buffer.toString('base64');
+            return element.saveScreenshot(filePath);
         },
     };
 }

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,CA2DlF,CAAA"}
+{"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,CA6DlF,CAAA"}

package/esm/server/commands/match_image_snapshot.js

@@ -19,20 +19,23 @@ export const matchImageSnapshot = async (context, taskId, subject, options) => {
         options = {};
     options.timeout = options.timeout ?? (ci ? 30000 : 5000);
     const info = visContext.getSnapshotInfo(context.testPath, taskId, options);
-    const baselineBase64 = await file.tryReadFileBase64(info.baselinePath);
-    if (!baselineBase64) {
-        await takeSnapshot(context, subject, info.baselinePath, options);
+    const baselineBuffer = await file.tryReadFile(info.baselinePath);
+    if (!baselineBuffer) {
+        if (isBase64String(subject)) {
+            await writeSnapshot(subject, info.baselinePath);
+        }
+        else {
+            await takeSnapshotByBrowser(context, subject, info.baselinePath, options);
+        }
         return;
     }
-    const resultBase64 = await takeSnapshot(context, subject, info.resultPath, options);
-    const baselineImage = PNG.sync.read(Buffer.from(baselineBase64, 'base64'));
-    const resultImage = PNG.sync.read(Buffer.from(resultBase64, 'base64'));
-    const [baselineAlignedImage, resultAlignedImage] = isSameSize(baselineImage, resultImage)
-        ? [baselineImage, resultImage]
-        : alignImageSizes(baselineImage, resultImage);
+    const resultBuffer = await takeSnapshot(context, subject, info.resultPath, 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);
     const { pass, diffAmount, diffImage } = compareImage(baselineAlignedImage, resultAlignedImage, options);
     if (pass) {
-        if (sizeNotChanged(baselineImage, baselineAlignedImage)) {
+        if (sizeNotChanged(baselineImage, baselineAlignedImage) && sizeNotChanged(resultImage, resultAlignedImage)) {
             return;
         }
         throw new Error(dedent `Snapshot \`${taskId}\` mismatched
@@ -60,8 +63,11 @@ export const matchImageSnapshot = async (context, taskId, subject, options) => {
 };
 async function takeSnapshot(context, subject, filePath, options) {
     if (isBase64String(subject)) {
-        return writeSnapshot(subject, filePath);
+        return Buffer.from(await writeSnapshot(subject, filePath), 'base64');
     }
+    return takeSnapshotByBrowser(context, subject, filePath, options);
+}
+async function takeSnapshotByBrowser(context, subject, filePath, options) {
     await mkdirp(dirname(filePath));
     const browser = browserApi(context);
     return browser.takeScreenshot(filePath, subject, {
@@ -74,14 +80,17 @@ async function writeSnapshot(subject, filePath) {
     return subject;
 }
 function alignImageSizes(baseline, result) {
+    if (isSameSize(baseline, result))
+        return [baseline, result];
     const size = getMaxSize(baseline, result);
-    const baselineAligned = new PNG(size);
-    const resultAligned = new PNG(size);
-    baselineAligned.data.fill(0);
-    resultAligned.data.fill(0);
-    PNG.bitblt(baseline, baselineAligned, 0, 0, baseline.width, baseline.height);
-    PNG.bitblt(result, resultAligned, 0, 0, result.width, result.height);
-    return [baselineAligned, resultAligned];
+    return [resizeImage(baseline, size), resizeImage(result, size)];
+}
+function resizeImage(image, size) {
+    if (isSameSize(image, size))
+        return image;
+    const resized = new PNG(size);
+    PNG.bitblt(image, resized, 0, 0, image.width, image.height);
+    return resized;
 }
 function sizeNotChanged(baselineImage, baselineAlignedImage) {
     return baselineImage === baselineAlignedImage;

package/esm/server/file.d.ts

@@ -1,5 +1,5 @@
 export declare const file: {
-    tryReadFileBase64(filePath: string): Promise<string | undefined>;
+    tryReadFile(filePath: string): Promise<Buffer | undefined>;
     writeFileBase64(filePath: string, data: string): Promise<void>;
     existFile(filePath: string): Promise<boolean>;
 };

package/esm/server/file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/server/file.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;gCACkB,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;8BAG5C,MAAM,QAAQ,MAAM;wBAG1B,MAAM;CAK1B,CAAA"}
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/server/file.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;0BACY,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;8BAGtC,MAAM,QAAQ,MAAM;wBAG1B,MAAM;CAK1B,CAAA"}

package/esm/server/file.js

@@ -1,7 +1,7 @@
 import { readFile, stat, writeFile } from 'node:fs/promises';
 export const file = {
-    async tryReadFileBase64(filePath) {
-        return readFile(filePath, { encoding: 'base64' }).catch(() => undefined);
+    async tryReadFile(filePath) {
+        return readFile(filePath).catch(() => undefined);
     },
     writeFileBase64(filePath, data) {
         return writeFile(filePath, data, { encoding: 'base64' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",

package/src/server/browser_provider/playwright.ts

@@ -6,11 +6,10 @@ export function playwright(context: BrowserCommandContext): BrowserApi {
 		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 buffer = await subject.screenshot({
+			return subject.screenshot({
 				timeout: options?.timeout,
 				path: filePath,
 			})
-			return buffer.toString('base64')
 		},
 	}
 }

package/src/server/browser_provider/types.ts

@@ -7,5 +7,5 @@ export interface BrowserApi {
 					timeout?: number | undefined
 			  }
 			| undefined,
-	): Promise<string>
+	): Promise<Buffer>
 }

package/src/server/browser_provider/webdriverio.ts

@@ -6,8 +6,7 @@ export function webdriverio(context: BrowserCommandContext): BrowserApi {
 	return {
 		async takeScreenshot(filePath, selector) {
 			const element = await page.$(`${selector ?? 'body'}`)
-			const buffer = await element.saveScreenshot(filePath)
-			return buffer.toString('base64')
+			return element.saveScreenshot(filePath)
 		},
 	}
 }

package/src/server/commands/match_image_snapshot.ts

@@ -47,22 +47,24 @@ export const matchImageSnapshot: BrowserCommand<
 	options.timeout = options.timeout ?? (ci ? 30000 : 5000)
 
 	const info = visContext.getSnapshotInfo(context.testPath, taskId, options)
-	const baselineBase64 = await file.tryReadFileBase64(info.baselinePath)
-	if (!baselineBase64) {
-		await takeSnapshot(context, subject, info.baselinePath, options)
+	const baselineBuffer = await file.tryReadFile(info.baselinePath)
+	if (!baselineBuffer) {
+		if (isBase64String(subject)) {
+			await writeSnapshot(subject, info.baselinePath)
+		} else {
+			await takeSnapshotByBrowser(context, subject, info.baselinePath, options)
+		}
 		return
 	}
 
-	const resultBase64 = await takeSnapshot(context, subject, info.resultPath, options)
-	const baselineImage = PNG.sync.read(Buffer.from(baselineBase64, 'base64'))
-	const resultImage = PNG.sync.read(Buffer.from(resultBase64, 'base64'))
-	const [baselineAlignedImage, resultAlignedImage] = isSameSize(baselineImage, resultImage)
-		? [baselineImage, resultImage]
-		: alignImageSizes(baselineImage, resultImage)
+	const resultBuffer = await takeSnapshot(context, subject, info.resultPath, 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)
 
 	const { pass, diffAmount, diffImage } = compareImage(baselineAlignedImage, resultAlignedImage, options)
 	if (pass) {
-		if (sizeNotChanged(baselineImage, baselineAlignedImage)) {
+		if (sizeNotChanged(baselineImage, baselineAlignedImage) && sizeNotChanged(resultImage, resultAlignedImage)) {
 			return
 		}
 		throw new Error(
@@ -104,9 +106,17 @@ async function takeSnapshot(
 	options: ImageSnapshotTimeoutOptions | undefined,
 ) {
 	if (isBase64String(subject)) {
-		return writeSnapshot(subject, filePath)
+		return Buffer.from(await writeSnapshot(subject, filePath), 'base64')
 	}
+	return takeSnapshotByBrowser(context, subject, filePath, options)
+}
 
+async function takeSnapshotByBrowser(
+	context: BrowserCommandContext,
+	subject: string,
+	filePath: string,
+	options: ImageSnapshotTimeoutOptions | undefined,
+) {
 	await mkdirp(dirname(filePath))
 	const browser = browserApi(context)
 	return browser.takeScreenshot(filePath, subject, {
@@ -121,19 +131,20 @@ async function writeSnapshot(subject: string, filePath: string) {
 }
 
 function alignImageSizes(baseline: PNG, result: PNG) {
-	const size = getMaxSize(baseline, result)
-
-	const baselineAligned = new PNG(size)
-	const resultAligned = new PNG(size)
+	if (isSameSize(baseline, result)) return [baseline, result] as const
 
-	baselineAligned.data.fill(0)
-	resultAligned.data.fill(0)
+	const size = getMaxSize(baseline, result)
+	return [resizeImage(baseline, size), resizeImage(result, size)] as const
+}
 
-	PNG.bitblt(baseline, baselineAligned, 0, 0, baseline.width, baseline.height)
-	PNG.bitblt(result, resultAligned, 0, 0, result.width, result.height)
+function resizeImage(image: PNG, size: { width: number; height: number }) {
+	if (isSameSize(image, size)) return image
 
-	return [baselineAligned, resultAligned] as const
+	const resized = new PNG(size)
+	PNG.bitblt(image, resized, 0, 0, image.width, image.height)
+	return resized
 }
+
 function sizeNotChanged(baselineImage: PNG, baselineAlignedImage: PNG) {
 	return baselineImage === baselineAlignedImage
 }

package/src/server/file.ts

@@ -1,8 +1,8 @@
 import { readFile, stat, writeFile } from 'node:fs/promises'
 
 export const file = {
-	async tryReadFileBase64(filePath: string): Promise<string | undefined> {
-		return readFile(filePath, { encoding: 'base64' }).catch(() => undefined)
+	async tryReadFile(filePath: string): Promise<Buffer | undefined> {
+		return readFile(filePath).catch(() => undefined)
 	},
 	writeFileBase64(filePath: string, data: string) {
 		return writeFile(filePath, data, { encoding: 'base64' })