feat: add new package @wdio/image-comparison-core

package.json

@@ -51,11 +51,6 @@
     "prepare": "husky",
     "watch": "pnpm run -r --parallel watch"
   },
-  "dependencies": {
-    "@wdio/ocr-service": "workspace:*",
-    "@wdio/visual-service": "workspace:*",
-    "webdriver-image-comparison": "workspace:*"
-  },
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@tsconfig/node20": "^20.1.5",

packages/image-comparison-core/README.md

@@ -0,0 +1,12 @@
+WebdriverIO Image Comparison Core
+==========================
+
+## Installation
+
+The easiest way is to keep `@wdio/image-comparison-core` as a dev-dependency in your `package.json`, via:
+
+```sh
+npm install @wdio/image-comparison-core --save-dev
+```
+
+Instructions on how to get started can be found in the [visual testing](https://webdriver.io/docs/visual-testing) docs on the WebdriverIO project page.

packages/webdriver-image-comparison/package.json → packages/image-comparison-core/package.json

@@ -1,9 +1,18 @@
 {
-  "name": "webdriver-image-comparison",
-  "version": "9.0.4",
+  "name": "@wdio/image-comparison-core",
+  "version": "0.0.1",
   "author": "Wim Selles - wswebcreation",
-  "description": "An image compare module that can be used for different NodeJS Test automation frameworks that support the webdriver protocol",
-  "keywords": [],
+  "description": "Image comparison core module for @wdio/visual-service - WebdriverIO visual testing framework",
+  "keywords": [
+    "webdriverio",
+    "wdio",
+    "visual-testing",
+    "image-comparison",
+    "screenshot",
+    "visual-regression",
+    "testing",
+    "automation"
+  ],
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -27,10 +36,14 @@
   "dependencies": {
     "fs-extra": "^11.3.0",
     "jimp": "^1.6.0",
-    "@wdio/logger": "^9.4.4"
+    "@wdio/logger": "^9.15.0",
+    "@wdio/types": "^9.15.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "webdriverio": "^9.14.0"
+    "webdriverio": "^9.15.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

packages/image-comparison-core/src/base.interfaces.ts

@@ -0,0 +1,191 @@
+export interface Folders {
+    /** The actual folder where the current screenshots need to be saved */
+    actualFolder: string;
+    /** The baseline folder where the baseline screenshots can be found */
+    baselineFolder: string;
+    /** The diff folder where the differences are saved */
+    diffFolder: string;
+}
+
+export interface BaseWebScreenshotOptions {
+    /**
+     * Disable the blinking cursor
+     * @default false
+     */
+    disableBlinkingCursor?: boolean;
+    /**
+     * Disable all CSS animations
+     * @default false
+     */
+    disableCSSAnimation?: boolean;
+    /**
+     * Make all text transparent to focus on layout
+     * @default false
+     */
+    enableLayoutTesting?: boolean;
+    /**
+     * Use legacy screenshot method instead of BiDi protocol
+     * @default false
+     */
+    enableLegacyScreenshotMethod?: boolean;
+    /**
+     * Hide all scrollbars
+     * @default true
+     */
+    hideScrollBars?: boolean;
+    /**
+     * Elements to hide before taking screenshot
+     * @default []
+     */
+    hideElements?: HTMLElement[];
+    /**
+     * Elements to remove before taking screenshot
+     * @default []
+     */
+    removeElements?: HTMLElement[];
+    /**
+     * Wait for fonts to be loaded
+     * @default true
+     */
+    waitForFontsLoaded?: boolean;
+}
+
+export interface BaseMobileWebScreenshotOptions {
+    /**
+     * Padding for the address bar shadow
+     * @default 6
+     */
+    addressBarShadowPadding?: number;
+    /**
+     * Padding for the tool bar shadow
+     * @default 6
+     */
+    toolBarShadowPadding?: number;
+}
+
+export interface BaseImageCompareOptions {
+    /**
+     * Compare images and discard alpha
+     * @default false
+     */
+    ignoreAlpha?: boolean;
+    /**
+     * Compare images and discard anti aliasing
+     * @default false
+     */
+    ignoreAntialiasing?: boolean;
+    /**
+     * Compare images in black and white mode
+     * @default false
+     */
+    ignoreColors?: boolean;
+    /**
+     * Compare with reduced color sensitivity
+     * @default false
+     */
+    ignoreLess?: boolean;
+    /**
+     * Compare with maximum sensitivity
+     * @default false
+     */
+    ignoreNothing?: boolean;
+    /**
+     * Return raw mismatch percentage without rounding
+     * @default false
+     */
+    rawMisMatchPercentage?: boolean;
+    /**
+     * Return all comparison data
+     * @default false
+     */
+    returnAllCompareData?: boolean;
+    /**
+     * Save images only above this mismatch tolerance
+     * @default 0
+     */
+    saveAboveTolerance?: number;
+    /**
+     * Scale images to same size before comparison
+     * @default false
+     */
+    scaleImagesToSameSize?: boolean;
+}
+
+export interface BaseMobileBlockOutOptions {
+    /**
+     * Block out the side bar
+     * @default false
+     */
+    blockOutSideBar?: boolean;
+    /**
+     * Block out the status bar
+     * @default false
+     */
+    blockOutStatusBar?: boolean;
+    /**
+     * Block out the tool bar
+     * @default false
+     */
+    blockOutToolBar?: boolean;
+}
+
+export interface BaseDeviceInfo {
+    /**
+     * The name of the browser
+     * @default ''
+     */
+    browserName: string;
+    /**
+     * The name of the device
+     * @default ''
+     */
+    deviceName: string;
+    /**
+     * The device pixel ratio
+     * @default 1
+     */
+    devicePixelRatio: number;
+    /**
+     * Whether the device is Android
+     * @default false
+     */
+    isAndroid: boolean;
+    /**
+     * Whether the device is iOS
+     * @default false
+     */
+    isIOS: boolean;
+    /**
+     * Whether the device is mobile
+     * @default false
+     */
+    isMobile: boolean;
+}
+
+export interface BaseCoordinates {
+    /** The x-coordinate */
+    x: number;
+    /** The y-coordinate */
+    y: number;
+}
+
+export interface BaseDimensions {
+    /** The width */
+    width: number;
+    /** The height */
+    height: number;
+}
+
+/** Base rectangle interface combining coordinates and dimensions */
+export interface BaseRectangle extends BaseCoordinates, BaseDimensions {}
+
+export interface BaseBoundingBox {
+    /** The bottom coordinate */
+    bottom: number;
+    /** The right coordinate */
+    right: number;
+    /** The left coordinate */
+    left: number;
+    /** The top coordinate */
+    top: number;
+}

packages/webdriver-image-comparison/src/base.ts → packages/image-comparison-core/src/base.ts

@@ -6,33 +6,64 @@ import { FOLDERS } from './helpers/constants.js'
 import type { Folders } from './base.interfaces.js'
 import type { ClassOptions, DefaultOptions } from './helpers/options.interfaces.js'
 
-const log = logger('@wdio/visual-service:webdriver-image-comparison')
+const log = logger('@wdio/visual-service:@wdio/image-comparison-core')
 
 export default class BaseClass {
     defaultOptions: DefaultOptions
     folders: Folders
 
     constructor(options: ClassOptions) {
-        // determine default options
+        // Determine default options
         this.defaultOptions = defaultOptions(options)
 
+        // Setup folder structure
+        this.folders = this._setupFolders(options)
+
+        // Clear runtime folders if requested
+        if (options.clearRuntimeFolder) {
+            this._clearRuntimeFolders()
+        }
+    }
+
+    /**
+     * Setup the folder structure for screenshots
+     * @private
+     */
+    private _setupFolders(options: ClassOptions): Folders {
         const baselineFolder = typeof options.baselineFolder === 'function'
             ? options.baselineFolder(options)
             : normalize(options.baselineFolder || FOLDERS.DEFAULT.BASE)
+
         const baseFolder = typeof options.screenshotPath === 'function'
             ? options.screenshotPath(options)
             : normalize(options.screenshotPath || FOLDERS.DEFAULT.SCREENSHOTS)
 
-        this.folders = {
+        return {
             actualFolder: join(baseFolder, FOLDERS.ACTUAL),
             baselineFolder,
             diffFolder: join(baseFolder, FOLDERS.DIFF),
         }
+    }
 
-        if (options.clearRuntimeFolder) {
-            log.info('\x1b[33m\n##############################\n!!CLEARING!!\n##############################\x1b[0m')
+    /**
+     * Clear the runtime folders (actual and diff)
+     * @private
+     */
+    private _clearRuntimeFolders(): void {
+        log.info('\x1b[33m\n##############################\n!!CLEARING RUNTIME FOLDERS!!\n##############################\x1b[0m')
+
+        try {
             rmSync(this.folders.actualFolder, { recursive: true, force: true })
+            log.debug(`Cleared actual folder: ${this.folders.actualFolder}`)
+        } catch (error) {
+            log.warn(`Failed to clear actual folder ${this.folders.actualFolder}:`, error)
+        }
+
+        try {
             rmSync(this.folders.diffFolder, { recursive: true, force: true })
+            log.debug(`Cleared diff folder: ${this.folders.diffFolder}`)
+        } catch (error) {
+            log.warn(`Failed to clear diff folder ${this.folders.diffFolder}:`, error)
         }
     }
 }

packages/image-comparison-core/src/clientSideScripts/drawTabbableOnCanvas.interfaces.ts

@@ -0,0 +1,3 @@
+import type { BaseCoordinates } from '../base.interfaces.js'
+
+export interface ElementCoordinate extends BaseCoordinates{}