Ws/canvas 2 jimp (#362)

* feat: initial setup

- added a local module

* chore: add new images

* chore: temp branch with jimp implementation

* feat: add local resemble with Jimp implementation

- add resemble fork with Jimp implementation
- remove canvas and resemble
- revert vitest-fix
- update build

* chore: update lock

* fix: fix cjs

* fix: fix default import

* fix: fix rotation

* chore: small fixes

* feat: add `--update-visual-baseline` feature

- fix watch mode to prevent errors

* chore: create a changeset

Author: wswebcreation

.changeset/two-geckos-sit.md

@@ -0,0 +1,49 @@
+---
+"webdriver-image-comparison": major
+"@wdio/visual-service": major
+---
+
+# 💥 Breaking
+
+This PR replaces Canvas as a dependency with Jimp. This removes the need to use system dependencies and will reduce the number of system dependency errors/issues (node-gyp/canvas and so on). This will, in the end, make the life of our end users way easier due to:
+
+-   less errors
+-   less complex test environments
+
+> [!note]
+> Extensive research has been done and we have chosen to "fork" ResembleJS, adjust it by making use of Jimp instead of Canvas and break the browser API because the fork will only be used in a nodejs environment
+> Investigation showed that creating a wrapper would even make it slower, so we went for the breaking change in the API by just replacing Canvas with Jimp
+
+> [!important]
+> There is a performance impact where Canvas is around 70% faster than Jimp. This has been measured without using WebdriverIO and only comparing images. When the "old" implementation with WebdriverIO combined with Canvas or Jimp is compared, we hardly see a performance impact.
+
+# 🚀 New Features
+
+Update the baseline images through the command line by adding the argument `--update-visual-baseline`. This will
+
+-   automatically copy the actual take screenshot and put it in the baseline folder
+-   if there are differences it will let the test pass because the baseline has been updated
+
+**Usage:**
+
+```sh
+npm run test.local.desktop  --update-visual-baseline
+```
+
+When running logs info/debug mode you will see the following logs added
+
+```logs
+[0-0] ..............
+[0-0] #####################################################################################
+[0-0]  INFO:
+[0-0]  Updated the actual image to
+[0-0]  /Users/wswebcreation/Git/wdio/visual-testing/localBaseline/chromel/demo-chrome-1366x768.png
+[0-0] #####################################################################################
+[0-0] ..........
+```
+
+# 💅 Polish
+
+-   remove Vitest fix
+-   add app images
+-   update the build

package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "build": "pnpm run -r build",
-    "clean": "rimraf coverage build .tmp",
+    "clean": "rimraf coverage dist .tmp",
     "release": "run-s build && changeset publish",
     "test": "run-s test:*",
     "test:lint": "eslint --cache packages tests",

packages/ocr-service/package.json

@@ -24,7 +24,7 @@
   "scripts": {
     "build": "run-s clean build:*",
     "build:tsc": "tsc --project ./tsconfig.json",
-    "clean": "rimraf coverage build .tmp",
+    "clean": "rimraf coverage dist .tmp",
     "watch": "pnpm run build:tsc -w"
   },
   "dependencies": {
@@ -37,5 +37,9 @@
     "node-tesseract-ocr": "^2.2.1",
     "tesseract.js": "^5.1.0",
     "xml2js": "^0.6.2"
+  },
+  "devDependencies": {
+    "@types/inquirer": "~9.0.7",
+    "@types/xml2js": "~0.4.14"
   }
-}
+}

packages/visual-service/package.json

@@ -22,7 +22,7 @@
   "scripts": {
     "build": "run-s clean build:*",
     "build:tsc": "tsc --project ./tsconfig.json",
-    "clean": "rimraf coverage build .tmp",
+    "clean": "rimraf coverage dist .tmp",
     "watch": "pnpm run build:tsc -w"
   },
   "dependencies": {
@@ -31,5 +31,6 @@
     "@wdio/types": "^8.38.2",
     "node-fetch": "^3.3.2",
     "webdriver-image-comparison": "^5.1.0"
-  }
-}
+  },
+  "devDependencies": {}
+}

packages/webdriver-image-comparison/package.json

@@ -17,20 +17,24 @@
     "url": "https://github.com/webdriverio/visual-testing/issues"
   },
   "scripts": {
-    "build": "tsc",
-    "clean": "rimraf coverage build tmp",
-    "watch": "npm run build -- -w"
+    "build": "run-s clean:build copy-js build:*",
+    "build:tsc": "tsc --project ./tsconfig.json",
+    "clean:build": "rimraf coverage dist .tmp",
+    "clean:watch": "rimraf coverage .tmp",
+    "copy-js": "copyfiles -u 1 src/resemble/resemble.jimp.cjs dist/",
+    "watch": "run-s clean:watch copy-js watch:*",
+    "watch:tsc": "pnpm run build:tsc -w",
+    "watch:js": "node -e \"require('fs').watchFile('src/resemble/resemble.jimp.cjs', () => { require('child_process').exec('npm run copy-js'); });\""
   },
   "dependencies": {
-    "canvas": "^2.11.2",
     "fs-extra": "^11.2.0",
-    "resemblejs": "^5.0.0",
+    "jimp": "^0.22.12",
     "@wdio/logger": "^8.38.0"
   },
   "devDependencies": {
     "@types/copyfiles": "~2.4.4",
     "@types/fs-extra": "^11.0.4",
-    "@types/resemblejs": "^4.1.3",
+    "@types/jimp": "^0.2.28",
     "copyfiles": "^2.4.1",
     "webdriverio": "^8.38.2"
   }

packages/webdriver-image-comparison/src/helpers/utils.ts

@@ -313,8 +313,15 @@ export function isObject(item:unknown) {
 }
 
 /**
- * Validate if i's storybook
+ * Validate if it's storybook
  */
 export function isStorybook(){
     return process.argv.includes('--storybook')
 }
+
+/**
+ * Check if we want to update baseline images
+ */
+export function updateVisualBaseline(): boolean {
+    return process.argv.includes('--update-visual-baseline')
+}

packages/webdriver-image-comparison/src/methods/images.interfaces.ts

@@ -1,4 +1,4 @@
-import type { CanvasRenderingContext2D } from 'canvas'
+import type Jimp from 'jimp'
 import type { RectanglesOutput } from './rectangles.interfaces.js'
 import type { Folders } from '../base.interfaces.js'
 
@@ -154,8 +154,6 @@ export interface CroppedBase64Image {
 export interface RotateBase64ImageOptions {
     base64Image: string;
     degrees: number;
-    newHeight: number;
-    newWidth: number;
 }
 
 export interface CropAndConvertToDataURL {
@@ -187,6 +185,13 @@ export interface DimensionsWarning {
     type: string,
 }
 
+export interface CheckBaselineImageExists {
+    actualFilePath: string,
+    baselineFilePath: string,
+    autoSaveBaseline?: boolean,
+    updateBaseline?: boolean,
+}
+
 export interface RotatedImage {
     isWebDriverElementScreenshot: boolean,
     isLandscape: boolean,
@@ -195,10 +200,10 @@ export interface RotatedImage {
 
 export interface HandleIOSBezelCorners {
     addIOSBezelCorners: boolean,
-    ctx: CanvasRenderingContext2D,
     deviceName: string,
     devicePixelRatio: number,
     height: number,
+    image: Jimp,
     isLandscape: boolean,
     width: number,
 }