@wdio/image-comparison-core 1.2.4 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @wdio/image-comparison-core
 
+## 2.0.0
+
+### Major Changes
+
+- d2758ce: ### 💥 Breaking change: new image comparison engine
+
+  We replaced the engine that powers every visual comparison. This is a breaking change, so please read the migration note below before upgrading.
+
+  **The problem**
+
+  Visual tests were flaky. Tests failed on differences that are impossible to see by eye, like sub-pixel font rendering, 1px anti-aliasing on edges and small shadow shifts between runs. The old engine (resemble.js) compared raw RGB values, which does not match how human vision works, and on larger screenshots it quietly skipped about a third of the pixels. So you got failures that were not real, and in some cases real changes that could slip through.
+
+  On top of that, all the image handling (decode, crop, composite, rotate, resize) ran through [`jimp`](https://github.com/jimp-dev/jimp), a large dependency that we only used a small slice of and that is no longer actively maintained.
+
+  **The solution**
+
+  Two things changed under the hood:
+
+  1. The comparison engine is now [pixelmatch](https://github.com/mapbox/pixelmatch). It compares images the way the eye perceives them (in the YIQ colour space) and detects anti-aliasing by checking both images at once. Invisible rendering noise now passes, and real regressions still fail.
+  2. `jimp` has been removed completely. PNG decode and encode now go through the small [`fast-png`](https://github.com/image-js/fast-png) library, and the handful of image operations we still need (crop, composite, canvas, opacity, rotate, resize) live in a tiny internal helper. The bundled resemble file is gone too. The net effect is a much lighter dependency footprint with no loss in functionality.
+
+  **What you need to do**
+
+  - Your public API does not change. `checkScreen`, `checkElement`, `checkFullPageScreen` and the matchers all work exactly as before, and the same `ignore` options are supported.
+  - Because the new engine measures differences differently, mismatch percentages will not match the old numbers exactly. You should re-run your suite once and re-accept your baselines so they are generated with the new engine. After that your tests should be noticeably more stable.
+
+  **Also fixed in this release**
+
+  - **Top-row artifact on full page screenshots:** Jimp's `contain()` centred the image, shifting content by 1px and creating a false diff across the top row. Replaced with buffer-level padding that anchors content at (0,0).
+  - **Ignored region 1px under-coverage:** The device-pixel size of an ignored region used `Math.floor`, which could drop a pixel when `cssSize * DPR` had a fractional part. Width and height now use `Math.ceil` so the full element is always covered. Position still uses `Math.floor`.
+  - **Comparison sensitivity matches what you were used to:** Switching engines meant retuning how strict a comparison is. The pixelmatch threshold is now aligned with the old resemble tolerances, so a difference that used to fail still fails and one that used to pass still passes. The diff highlight also uses a single consistent colour instead of varying per run.
+  - **Different image sizes no longer crash the comparison:** When a baseline and the actual screenshot had slightly different dimensions, the old flow threw an error and you lost the result. Both images are now normalised to the same size before they are compared, so a size change is reported as a visual difference you can review instead of a hard failure.
+  - **More reliable ignore regions with WebDriver BiDi:** With BiDi the calculated element bounds can be off by a pixel or two, which sometimes left part of an ignored element just outside the ignored area and caused a false diff. The BiDi emulated flow now uses a larger `ignoreRegionPadding` so the whole element stays covered.
+
+  ### Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+### Patch Changes
+
+- 6cd5742: ### Dependency updates
+
+  Updated dependencies across all packages to their latest compatible versions. This includes the WebdriverIO toolchain (`webdriverio`, `@wdio/*`) to `9.29.1`, the TypeScript ESLint plugins to `8.62.0`, Vitest to `3.2.6`, and various other packages such as `sharp`, `@remix-run/*`, `fuse.js` and `expect-webdriverio`. There are no functional or API changes.
+
+  ### Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
 ## 1.2.4
 
 ### Patch Changes

package/dist/helpers/options.d.ts

@@ -3,7 +3,7 @@ import type { MethodImageCompareCompareOptions, ScreenMethodImageCompareCompareO
 import type { BeforeScreenshotOptions, BeforeScreenshotResult } from './beforeScreenshot.interfaces.js';
 import type { AfterScreenshotOptions } from './afterScreenshot.interfaces.js';
 import type { InstanceData } from '../methods/instanceData.interfaces.js';
-import type { ComparisonIgnoreOption } from '../resemble/compare.interfaces.js';
+import type { ComparisonIgnoreOption } from '../pixelmatch/compare.interfaces.js';
 /**
  * Determine the default options by merging user options with sensible defaults
  */
@@ -57,8 +57,5 @@ export interface BuildAfterScreenshotOptionsInput {
  * Handles differences between native and web commands automatically
  */
 export declare function buildAfterScreenshotOptions({ base64Image, folders, tag, isNativeContext, instanceData, enrichedInstanceData, beforeOptions, wicOptions }: BuildAfterScreenshotOptionsInput): AfterScreenshotOptions;
-/**
- * Prepare ignore options for resemble.js comparison
- */
 export declare function prepareIgnoreOptions(imageCompareOptions: MethodImageCompareCompareOptions): ComparisonIgnoreOption[];
 //# sourceMappingURL=options.d.ts.map

package/dist/helpers/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/helpers/options.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAC3E,OAAO,KAAK,EAAE,gCAAgC,EAAE,sCAAsC,EAAE,MAAM,iCAAiC,CAAA;AAC/H,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AACvG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AACzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAA;AAS/E;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,YAAY,GAAG,cAAc,CA6DpE;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CACtC,OAAO,EAAE,sCAAsC,GAChD,sCAAsC,CAOxC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gCAAgC,GAAG,gCAAgC,CAoBhH;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CACzC,YAAY,EAAE,GAAG,EACjB,aAAa,EAAE;IACX,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,cAAc,CAAC,EAAE,WAAW,EAAE,CAAA;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC/B,EACD,UAAU,EAAE;IACR,uBAAuB,EAAE,MAAM,CAAA;IAC/B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC/B,GACF,uBAAuB,CAazB;AAED,MAAM,WAAW,gCAAgC;IAE7C,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAA;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,OAAO,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,EAAE;QACR,eAAe,EAAE,MAAM,CAAA;QACvB,eAAe,EAAE,OAAO,CAAA;QACxB,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAClC,CAAA;IAGD,oBAAoB,CAAC,EAAE,sBAAsB,CAAA;IAC7C,aAAa,CAAC,EAAE,uBAAuB,CAAA;CAC1C;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,EACxC,WAAW,EACX,OAAO,EACP,GAAG,EACH,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,UAAU,EACb,EAAE,gCAAgC,GAAG,sBAAsB,CA0E3D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,mBAAmB,EAAE,gCAAgC,GAAG,sBAAsB,EAAE,CAQpH"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/helpers/options.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAC3E,OAAO,KAAK,EAAE,gCAAgC,EAAE,sCAAsC,EAAE,MAAM,iCAAiC,CAAA;AAC/H,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AACvG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AACzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA;AASjF;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,YAAY,GAAG,cAAc,CAuDpE;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CACtC,OAAO,EAAE,sCAAsC,GAChD,sCAAsC,CAOxC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gCAAgC,GAAG,gCAAgC,CAoBhH;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CACzC,YAAY,EAAE,GAAG,EACjB,aAAa,EAAE;IACX,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,cAAc,CAAC,EAAE,WAAW,EAAE,CAAA;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC/B,EACD,UAAU,EAAE;IACR,uBAAuB,EAAE,MAAM,CAAA;IAC/B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC/B,GACF,uBAAuB,CAazB;AAED,MAAM,WAAW,gCAAgC;IAE7C,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAA;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,OAAO,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,EAAE;QACR,eAAe,EAAE,MAAM,CAAA;QACvB,eAAe,EAAE,OAAO,CAAA;QACxB,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAClC,CAAA;IAGD,oBAAoB,CAAC,EAAE,sBAAsB,CAAA;IAC7C,aAAa,CAAC,EAAE,uBAAuB,CAAA;CAC1C;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,EACxC,WAAW,EACX,OAAO,EACP,GAAG,EACH,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,UAAU,EACb,EAAE,gCAAgC,GAAG,sBAAsB,CA0E3D;AAED,wBAAgB,oBAAoB,CAAC,mBAAmB,EAAE,gCAAgC,GAAG,sBAAsB,EAAE,CAQpH"}

package/dist/helpers/options.js

@@ -35,12 +35,6 @@ export function defaultOptions(options) {
         ignoreRegionPadding: options.ignoreRegionPadding ?? 1,
         waitForFontsLoaded: options.waitForFontsLoaded ?? true,
         alwaysSaveActualImage: options.alwaysSaveActualImage ?? true,
-        /**
-         * Compare options (merged sequentially):
-         * 1. Default options (fallback)
-         * 2. Root compareOptions (deprecated but supported)
-         * 3. User-provided compareOptions
-         */
         compareOptions: {
             ...DEFAULT_COMPARE_OPTIONS,
             ...logAllDeprecatedCompareOptions(options),
@@ -178,10 +172,7 @@ export function buildAfterScreenshotOptions({ base64Image, folders, tag, isNativ
     }
     return afterOptions;
 }
-/**
- * Prepare ignore options for resemble.js comparison
- */
 export function prepareIgnoreOptions(imageCompareOptions) {
-    const resembleIgnoreDefaults = ['alpha', 'antialiasing', 'colors', 'less', 'nothing'];
-    return resembleIgnoreDefaults.filter((option) => Object.keys(imageCompareOptions).find((key) => key.toLowerCase().includes(option) && imageCompareOptions[key]));
+    const ignoreDefaults = ['alpha', 'antialiasing', 'colors', 'less', 'nothing'];
+    return ignoreDefaults.filter((option) => Object.keys(imageCompareOptions).find((key) => key.toLowerCase().includes(option) && imageCompareOptions[key]));
 }

package/dist/methods/compareReport.interfaces.d.ts

@@ -1,4 +1,4 @@
-import type { CompareData } from 'src/resemble/compare.interfaces.js';
+import type { CompareData } from 'src/pixelmatch/compare.interfaces.js';
 import type { WicImageCompareOptions } from './images.interfaces.js';
 import type { BoundingBoxes, ReportFileSizes } from './rectangles.interfaces.js';
 import type { FilePaths, FolderPaths } from 'src/base.interfaces.js';

package/dist/methods/compareReport.interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compareReport.interfaces.d.ts","sourceRoot":"","sources":["../../src/methods/compareReport.interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"compareReport.interfaces.d.ts","sourceRoot":"","sources":["../../src/methods/compareReport.interfaces.ts"],"names":[],"mappings":"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"}

package/dist/methods/createCompareReport.test.js

@@ -13,7 +13,8 @@ describe('createCompareReport', () => {
     const createMockData = (misMatchPercentage = 0) => ({
         misMatchPercentage,
         rawMisMatchPercentage: misMatchPercentage,
-        getBuffer: () => Buffer.from(''),
+        getRawPixels: () => ({ data: new Uint8Array(4), width: 1, height: 1 }),
+        getBuffer: () => Promise.resolve(Buffer.from('')),
         diffBounds: { top: 0, left: 0, bottom: 0, right: 0 },
         analysisTime: 0,
         diffPixels: [],
@@ -116,7 +117,8 @@ describe('createJsonReportIfNeeded', () => {
     const createMockData = (misMatchPercentage = 0) => ({
         misMatchPercentage,
         rawMisMatchPercentage: misMatchPercentage,
-        getBuffer: () => Buffer.from(''),
+        getRawPixels: () => ({ data: new Uint8Array(4), width: 1, height: 1 }),
+        getBuffer: () => Promise.resolve(Buffer.from('')),
         diffBounds: { top: 0, left: 0, bottom: 0, right: 0 },
         analysisTime: 0,
         diffPixels: [],

package/dist/methods/images.d.ts

@@ -49,6 +49,7 @@ export declare function makeFullPageBase64Image(screenshotsData: FullPageScreens
  * Save the base64 image to a file
  */
 export declare function saveBase64Image(base64Image: string, filePath: string): Promise<void>;
+export declare function savePngBuffer(buffer: Buffer, filePath: string): Promise<void>;
 /**
  * Create a canvas with the ignore boxes if they are present
  */
@@ -57,7 +58,7 @@ export declare function addBlockOuts(screenshot: string, ignoredBoxes: IgnoreBox
  * Rotate a base64 image
  * Tnx to https://gist.github.com/Zyndoras/6897abdf53adbedf02564808aaab94db
  */
-export declare function rotateBase64Image({ base64Image, degrees }: RotateBase64ImageOptions): Promise<string>;
+export declare function rotateBase64Image({ base64Image, degrees }: RotateBase64ImageOptions): string;
 /**
  * Take a based64 screenshot of an element and resize it
  */

package/dist/methods/images.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/methods/images.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/methods/images.ts"],"names":[],"mappings":"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"}

package/dist/methods/images.executeImageCompare.test.js

@@ -6,7 +6,7 @@ import * as utils from '../helpers/utils.js';
 import * as rectangles from './rectangles.js';
 import * as processDiffPixels from './processDiffPixels.js';
 import * as createCompareReport from './createCompareReport.js';
-import * as compareImages from '../resemble/compareImages.js';
+import * as compareImagesPixelmatch from '../pixelmatch/compareImages.js';
 const log = logger('test');
 vi.mock('@wdio/logger', () => import(join(process.cwd(), '__mocks__', '@wdio/logger')));
 vi.mock('jimp', () => {
@@ -75,7 +75,7 @@ vi.mock('./createCompareReport.js', () => ({
     createCompareReport: vi.fn(),
     createJsonReportIfNeeded: vi.fn()
 }));
-vi.mock('../resemble/compareImages.js', () => ({
+vi.mock('../pixelmatch/compareImages.js', () => ({
     default: vi.fn()
 }));
 vi.mock('../helpers/constants.js', () => ({
@@ -156,27 +156,6 @@ describe('executeImageCompare', () => {
     let logWarnSpy;
     beforeEach(async () => {
         vi.clearAllMocks();
-        const jimp = await import('jimp');
-        const jimpReadMock = vi.mocked(jimp.Jimp.read);
-        const mockImage = {
-            composite: vi.fn().mockReturnThis(),
-            getBase64: vi.fn().mockResolvedValue('data:image/png;base64,mock-image-data'),
-            opacity: vi.fn().mockReturnThis(),
-            width: 100,
-            height: 200,
-            bitmap: { width: 100, height: 200 },
-            background: 0,
-            formats: [],
-            inspect: vi.fn().mockReturnValue('MockImage'),
-            toString: vi.fn().mockReturnValue('MockImage'),
-            scanIterator: vi.fn(),
-            scan: vi.fn(),
-            scanQuiet: vi.fn(),
-            scanIteratorQuiet: vi.fn(),
-            scanQuietIterator: vi.fn(),
-            scanQuietIteratorQuiet: vi.fn(),
-        };
-        jimpReadMock.mockResolvedValue(mockImage);
         vi.mocked(fsPromises.access).mockResolvedValue(undefined);
         vi.mocked(fsPromises.unlink).mockResolvedValue(undefined);
         vi.mocked(fsPromises.mkdir).mockResolvedValue(undefined);
@@ -207,14 +186,16 @@ describe('executeImageCompare', () => {
         });
         vi.mocked(createCompareReport.createCompareReport).mockReturnValue(undefined);
         vi.mocked(createCompareReport.createJsonReportIfNeeded).mockResolvedValue(undefined);
-        vi.mocked(compareImages.default).mockResolvedValue({
+        const mockCompareData = {
             rawMisMatchPercentage: 0.5,
             misMatchPercentage: 0.5,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 100, bottom: 200 },
             analysisTime: 100,
             diffPixels: []
-        });
+        };
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue(mockCompareData);
         vi.mocked(images.checkBaselineImageExists).mockResolvedValue(undefined);
         vi.mocked(images.removeDiffImageIfExists).mockResolvedValue(undefined);
         vi.mocked(images.saveBase64Image).mockResolvedValue(undefined);
@@ -244,7 +225,7 @@ describe('executeImageCompare', () => {
             savePerInstance: false,
             fileName: 'test.png'
         });
-        expect(compareImages.default).toHaveBeenCalledWith(Buffer.from('mock-image-data'), Buffer.from('mock-image-data'), {
+        expect(compareImagesPixelmatch.default).toHaveBeenCalledWith(Buffer.from('mock-image-data'), Buffer.from('mock-image-data'), {
             ignore: [],
             scaleToSameSize: true
         });
@@ -418,9 +399,10 @@ describe('executeImageCompare', () => {
                 }
             }
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.5,
             misMatchPercentage: 0.5,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 100, bottom: 200 },
             analysisTime: 100,
@@ -504,9 +486,10 @@ describe('executeImageCompare', () => {
                 }
             }
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.123456,
             misMatchPercentage: 0.12,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 100, bottom: 200 },
             analysisTime: 100,
@@ -540,9 +523,10 @@ describe('executeImageCompare', () => {
                 autoSaveBaseline: false,
             }
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0,
             misMatchPercentage: 0,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,
@@ -556,7 +540,7 @@ describe('executeImageCompare', () => {
             actualBase64Image: base64Image,
         });
         expect(images.saveBase64Image).not.toHaveBeenCalled();
-        expect(compareImages.default).toHaveBeenCalledWith(expect.any(Buffer), Buffer.from(base64Image, 'base64'), expect.any(Object));
+        expect(compareImagesPixelmatch.default).toHaveBeenCalledWith(expect.any(Buffer), Buffer.from(base64Image, 'base64'), expect.any(Object));
         expect(fsPromises.writeFile).not.toHaveBeenCalled();
     });
     it('should disable JSON reports when actuals are not saved', async () => {
@@ -603,9 +587,10 @@ describe('executeImageCompare', () => {
             }
             return undefined;
         });
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0,
             misMatchPercentage: 0,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,
@@ -638,9 +623,10 @@ describe('executeImageCompare', () => {
                 },
             },
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.5,
             misMatchPercentage: 0.5,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,
@@ -672,9 +658,10 @@ describe('executeImageCompare', () => {
                 },
             },
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.5,
             misMatchPercentage: 0.5,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,
@@ -705,9 +692,10 @@ describe('executeImageCompare', () => {
                 },
             },
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.05,
             misMatchPercentage: 0.05,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,
@@ -738,9 +726,10 @@ describe('executeImageCompare', () => {
                 },
             },
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.2,
             misMatchPercentage: 0.2,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,
@@ -765,9 +754,10 @@ describe('executeImageCompare', () => {
                 alwaysSaveActualImage: false,
             }
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0,
             misMatchPercentage: 0,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,
@@ -836,7 +826,7 @@ describe('executeImageCompare', () => {
             options: optionsWithIgnore,
             testContext: mockTestContext
         });
-        expect(compareImages.default).toHaveBeenCalledWith(expect.any(Buffer), expect.any(Buffer), {
+        expect(compareImagesPixelmatch.default).toHaveBeenCalledWith(expect.any(Buffer), expect.any(Buffer), {
             ignore: ['alpha', 'antialiasing', 'colors', 'less', 'nothing'],
             scaleToSameSize: true
         });
@@ -876,7 +866,7 @@ describe('executeImageCompare', () => {
             options: mockOptions,
             testContext: mockTestContext
         });
-        expect(compareImages.default).toHaveBeenCalledWith(expect.any(Buffer), expect.any(Buffer), {
+        expect(compareImagesPixelmatch.default).toHaveBeenCalledWith(expect.any(Buffer), expect.any(Buffer), {
             ignore: [],
             scaleToSameSize: true
         });
@@ -901,7 +891,7 @@ describe('executeImageCompare', () => {
             options: optionsWithBlockOut,
             testContext: mockTestContext
         });
-        expect(compareImages.default).toHaveBeenCalledWith(expect.any(Buffer), expect.any(Buffer), {
+        expect(compareImagesPixelmatch.default).toHaveBeenCalledWith(expect.any(Buffer), expect.any(Buffer), {
             ignore: [],
             output: { ignoredBoxes: [{ bottom: 50, right: 100, left: 0, top: 0 }] },
             scaleToSameSize: true
@@ -937,9 +927,10 @@ describe('executeImageCompare', () => {
                 }
             }
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.5,
             misMatchPercentage: 0.5,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 100, bottom: 200 },
             analysisTime: 100,
@@ -972,9 +963,10 @@ describe('executeImageCompare', () => {
                 }
             }
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.5,
             misMatchPercentage: 0.5,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 100, bottom: 200 },
             analysisTime: 100,
@@ -1006,9 +998,10 @@ describe('executeImageCompare', () => {
                 }
             }
         };
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0.5,
             misMatchPercentage: 0.5,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 100, bottom: 200 },
             analysisTime: 100,
@@ -1039,9 +1032,10 @@ describe('executeImageCompare', () => {
         vi.mocked(images.checkBaselineImageExists).mockImplementation(async () => {
             return Promise.resolve();
         });
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0,
             misMatchPercentage: 0,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,
@@ -1076,9 +1070,10 @@ describe('executeImageCompare', () => {
             return undefined;
         });
         vi.mocked(images.checkBaselineImageExists).mockImplementation(checkBaselineImageExists);
-        vi.mocked(compareImages.default).mockResolvedValue({
+        vi.mocked(compareImagesPixelmatch.default).mockResolvedValue({
             rawMisMatchPercentage: 0,
             misMatchPercentage: 0,
+            getRawPixels: vi.fn().mockReturnValue({ data: new Uint8Array(4), width: 1, height: 1 }),
             getBuffer: vi.fn().mockResolvedValue(Buffer.from('diff-image-data')),
             diffBounds: { left: 0, top: 0, right: 0, bottom: 0 },
             analysisTime: 10,

package/dist/methods/images.js

@@ -1,9 +1,9 @@
 import { fileURLToPath } from 'node:url';
 import { readFileSync, writeFileSync, promises as fsPromises, constants } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { Jimp, JimpMime } from 'jimp';
+import { decodeImage, toBase64Png, createCanvas, cropImage, compositeImage, setOpacity, rotate90CW, rotate90CCW, rotate180 } from '../utils/imageUtils.js';
 import logger from '@wdio/logger';
-import compareImages from '../resemble/compareImages.js';
+import compareImagesPixelmatch from '../pixelmatch/compareImages.js';
 import { calculateDprData, getIosBezelImageNames, getBase64ScreenshotSize, prepareComparisonFilePaths, updateVisualBaseline } from '../helpers/utils.js';
 import { prepareIgnoreOptions } from '../helpers/options.js';
 import { DEFAULT_RESIZE_DIMENSIONS, supportedIosBezelDevices } from '../helpers/constants.js';
@@ -92,7 +92,7 @@ ${filePathMessage}
 export async function getRotatedImageIfNeeded({ isWebDriverElementScreenshot, isLandscape, base64Image }) {
     const { height: screenshotHeight, width: screenshotWidth } = getBase64ScreenshotSize(base64Image);
     const isRotated = !isWebDriverElementScreenshot && isLandscape && screenshotHeight > screenshotWidth;
-    return isRotated ? await rotateBase64Image({ base64Image, degrees: 90 }) : base64Image;
+    return isRotated ? rotateBase64Image({ base64Image, degrees: 90 }) : base64Image;
 }
 /**
  * Log a warning when the crop goes out of the screen
@@ -150,10 +150,10 @@ export async function handleIOSBezelCorners({ addIOSBezelCorners, image, deviceN
             const __dirname = dirname(__filename);
             const topImage = readFileSync(join(__dirname, '..', '..', 'assets', 'ios', `${topImageName}.png`), { encoding: 'base64' });
             const bottomImage = readFileSync(join(__dirname, '..', '..', 'assets', 'ios', `${bottomImageName}.png`), { encoding: 'base64' });
-            const topBase64Image = isLandscape ? await rotateBase64Image({ base64Image: topImage, degrees: 90 }) : topImage;
-            const bottomBase64Image = isLandscape ? await rotateBase64Image({ base64Image: bottomImage, degrees: 90 }) : bottomImage;
-            image.composite(await Jimp.read(Buffer.from(topBase64Image, 'base64')), 0, 0);
-            image.composite(await Jimp.read(Buffer.from(bottomBase64Image, 'base64')), isLandscape ? width - getBase64ScreenshotSize(bottomImage).height : 0, isLandscape ? 0 : height - getBase64ScreenshotSize(bottomImage).height);
+            const topBase64Image = isLandscape ? rotateBase64Image({ base64Image: topImage, degrees: 270 }) : topImage;
+            const bottomBase64Image = isLandscape ? rotateBase64Image({ base64Image: bottomImage, degrees: 270 }) : bottomImage;
+            compositeImage(image, decodeImage(Buffer.from(topBase64Image, 'base64')), 0, 0);
+            compositeImage(image, decodeImage(Buffer.from(bottomBase64Image, 'base64')), isLandscape ? width - getBase64ScreenshotSize(bottomImage).height : 0, isLandscape ? 0 : height - getBase64ScreenshotSize(bottomImage).height);
         }
         else {
             isIosBezelError = true;
@@ -178,13 +178,12 @@ ${supportedIosBezelDevices.join(', ')}
  * Crop the image and convert it to a base64 image
  */
 export async function cropAndConvertToDataURL({ addIOSBezelCorners, base64Image, deviceName, devicePixelRatio, height, isIOS, isLandscape, sourceX, sourceY, width, }) {
-    const image = await Jimp.read(Buffer.from(base64Image, 'base64'));
-    const croppedImage = image.crop({ x: sourceX, y: sourceY, w: width, h: height });
+    const image = decodeImage(Buffer.from(base64Image, 'base64'));
+    const croppedImage = cropImage(image, sourceX, sourceY, width, height);
     if (isIOS) {
         await handleIOSBezelCorners({ addIOSBezelCorners, image: croppedImage, deviceName, devicePixelRatio, height, isLandscape, width });
     }
-    const base64CroppedImage = await croppedImage.getBase64(JimpMime.png);
-    return base64CroppedImage.replace(/^data:image\/png;base64,/, '');
+    return toBase64Png(croppedImage);
 }
 /**
  * Make a cropped image with Canvas
@@ -309,7 +308,7 @@ export async function executeImageCompare({ isViewPortScreenshot, isNativeContex
         scaleToSameSize: imageCompareOptions.scaleImagesToSameSize,
     };
     // 5. Execute the compare and retrieve the data
-    const data = await compareImages(readFileSync(baselineFilePath), actualImageBuffer, compareOptions);
+    const data = await compareImagesPixelmatch(readFileSync(baselineFilePath), actualImageBuffer, compareOptions);
     const rawMisMatchPercentage = data.rawMisMatchPercentage;
     const reportMisMatchPercentage = imageCompareOptions.rawMisMatchPercentage
         ? rawMisMatchPercentage
@@ -372,19 +371,19 @@ export async function executeImageCompare({ isViewPortScreenshot, isNativeContex
 export async function makeFullPageBase64Image(screenshotsData, { devicePixelRatio, isLandscape }) {
     const amountOfScreenshots = screenshotsData.data.length;
     const { fullPageHeight: canvasHeight, fullPageWidth: canvasWidth } = screenshotsData;
-    const canvas = await new Jimp({ width: canvasWidth, height: canvasHeight });
+    const canvas = createCanvas(canvasWidth, canvasHeight);
     // Load all the images
     for (let i = 0; i < amountOfScreenshots; i++) {
         const currentScreenshot = screenshotsData.data[i].screenshot;
         const { height: screenshotHeight, width: screenshotWidth } = getBase64ScreenshotSize(currentScreenshot, devicePixelRatio);
         const isRotated = isLandscape && screenshotHeight > screenshotWidth;
-        const newBase64Image = isRotated ? await rotateBase64Image({ base64Image: currentScreenshot, degrees: 90 }) : currentScreenshot;
+        const newBase64Image = isRotated ? rotateBase64Image({ base64Image: currentScreenshot, degrees: 90 }) : currentScreenshot;
         const { canvasYPosition, imageHeight, imageXPosition, imageYPosition } = screenshotsData.data[i];
-        const image = await Jimp.read(Buffer.from(newBase64Image, 'base64'));
+        const image = decodeImage(Buffer.from(newBase64Image, 'base64'));
         // Clamp crop dimensions to fit within the actual image bounds
         // This is especially important for the last image where the calculated height might exceed available pixels
-        const actualImageWidth = image.bitmap.width;
-        const actualImageHeight = image.bitmap.height;
+        const actualImageWidth = image.width;
+        const actualImageHeight = image.height;
         const clampedCropX = Math.max(0, Math.min(imageXPosition, actualImageWidth - 1));
         const clampedCropY = Math.max(0, Math.min(imageYPosition, actualImageHeight - 1));
         // Ensure the cropped width matches the canvas width to avoid 1px gaps due to rounding
@@ -392,10 +391,9 @@ export async function makeFullPageBase64Image(screenshotsData, { devicePixelRati
         const maxAvailableWidth = actualImageWidth - clampedCropX;
         const clampedCropWidth = Math.min(canvasWidth, maxAvailableWidth);
         const clampedCropHeight = Math.min(imageHeight, actualImageHeight - clampedCropY);
-        canvas.composite(image.crop({ x: clampedCropX, y: clampedCropY, w: clampedCropWidth, h: clampedCropHeight }), 0, canvasYPosition);
+        compositeImage(canvas, cropImage(image, clampedCropX, clampedCropY, clampedCropWidth, clampedCropHeight), 0, canvasYPosition);
     }
-    const base64FullPageImage = await canvas.getBase64(JimpMime.png);
-    return base64FullPageImage.replace(/^data:image\/png;base64,/, '');
+    return toBase64Png(canvas);
 }
 /**
  * Save the base64 image to a file
@@ -404,30 +402,32 @@ export async function saveBase64Image(base64Image, filePath) {
     await fsPromises.mkdir(dirname(filePath), { recursive: true });
     await fsPromises.writeFile(filePath, Buffer.from(base64Image, 'base64'));
 }
+export async function savePngBuffer(buffer, filePath) {
+    await fsPromises.mkdir(dirname(filePath), { recursive: true });
+    await fsPromises.writeFile(filePath, buffer);
+}
 /**
  * Create a canvas with the ignore boxes if they are present
  */
 export async function addBlockOuts(screenshot, ignoredBoxes) {
-    const image = await Jimp.read(Buffer.from(screenshot, 'base64'));
+    const image = decodeImage(Buffer.from(screenshot, 'base64'));
     // Loop over all ignored areas and add them to the current canvas
     for (const ignoredBox of ignoredBoxes) {
         const { right: ignoredBoxWidth, bottom: ignoredBoxHeight, left: x, top: y } = ignoredBox;
-        const ignoreCanvas = new Jimp({ width: ignoredBoxWidth - x, height: ignoredBoxHeight - y, color: '#39aa56' });
-        ignoreCanvas.opacity(0.5);
-        image.composite(ignoreCanvas, x, y);
+        const ignoreCanvas = createCanvas(ignoredBoxWidth - x, ignoredBoxHeight - y, 57, 170, 86, 255);
+        setOpacity(ignoreCanvas, 0.5);
+        compositeImage(image, ignoreCanvas, x, y);
     }
-    const base64ImageWithBlockOuts = await image.getBase64(JimpMime.png);
-    return base64ImageWithBlockOuts.replace(/^data:image\/png;base64,/, '');
+    return toBase64Png(image);
 }
 /**
  * Rotate a base64 image
  * Tnx to https://gist.github.com/Zyndoras/6897abdf53adbedf02564808aaab94db
  */
-export async function rotateBase64Image({ base64Image, degrees }) {
-    const image = await Jimp.read(Buffer.from(base64Image, 'base64'));
-    const rotatedImage = image.rotate(degrees);
-    const base64RotatedImage = await rotatedImage.getBase64(JimpMime.png);
-    return base64RotatedImage.replace(/^data:image\/png;base64,/, '');
+export function rotateBase64Image({ base64Image, degrees }) {
+    const image = decodeImage(Buffer.from(base64Image, 'base64'));
+    const rotated = degrees === 180 ? rotate180(image) : degrees === 270 ? rotate90CCW(image) : rotate90CW(image);
+    return toBase64Png(rotated);
 }
 /**
  * Take a based64 screenshot of an element and resize it