feat: add new package @wdio/image-comparison-core (#982) (#994)

* feat: add new package @wdio/image-comparison-core
Started
- migrating code
- optimize types
- remove executor and replace by wdio methods

* feat: update getMobileViewPortPosition

- fix tests

* chore: replaced takeBase64Screenshot implementation

- updated tests

* chore: fixed afterScreenshot

- updated tests

* chore: updated beforeScreenshot

- fixed and added UT's

* chore: clean saveWebScreen from methods

- fix UT's

* chore: update checkScreen

* chore: fix checkWebScreen

* chore: fix saveElement and checkElement

* chore: add full/tabbable page

* chore: remove methods

* chore: adjust the visual service to use the new core

* chore: migrated the service to the new module

- fixed UTs and imports

* chore: add browserInstance to the commands

* chore: added the browserinstance back and fix UTs

* fix UT's

* fix tests

* chore: cleanup methods

* chore: remove webdriver-image-comparison

* chore: multiple fixes

- fix BiDi check
- fix determining iOS currentOffsets
- fix calculating remaining content for mobile fullpage screenshots
- add extra debug logging when the fullpage scroll becomes negative
- updated baselines

* chore: fix UT's

* chore: optimize types

* test: add tests vor checkAppElement

* chore: make private package public

* test: add checkAppScreen tests

* tesT: add new tests

* chore: refactor mocks

* chore: simplify checks

* test: add checkScreen tests

* test: add checkTabbablePage

* test: add checkWebElement

fix some styling

* chore: revert Sauce tests

* test: add checkWebScreen

* test: add checkWebScreen tests
- some linting shit

* chore: update eslint

* test: add saveAppElement

* chore: fix folders

* chore: fix some tests

* test: add saveAppScreen

* test: add saveElement

* tesT: add saveFullPageScreen test

* test: add saveScreen tests

* test: add saveTabbablePage tests

* test: add saveWebElement tests

* test: add saveWebScreen tests

* chore: create BEFORE_SCREENSHOT_MOCK

* chore: optimize mocks

- saveWebElement
- saveAppScreen
- saveAppElement
- saveWebScreen
- saveTabbablePage
- saveElement
- mocks file

* test: add drawTabbableOnCanvas tests

* test: add more tests drawTabbableOnCanvas

* test: add more tests for drawTabbableOnCanvas

* test: update drawTabbableOnCanvas

- add comments for whats's not properly testable

* chore: added todo's

* test: add scrollElementIntoView tests

- fix screendimentions test

* test: add scrollToPosition tests

* test: add createCompareReport tests

* test: add processDiffPixels

* test: add makeCroppedBase64Image tests

* test: add executeImageCompare tests

* test: add makeFullPageBase64Image tests

* test: add takeResizedBase64Screenshot tests

* fix: fix object comparison and add proper logging for takeBase64ElementScreenshot

- add new UT's for takeBase64ElementScreenshot part 1

* test: add more tests for takeBase64ElementScreenshot

* fix: fix images tests

* chore: use snapshots

* test: add takeWebElementScreenshot tests

* test: add logHiddenRemovedError

* test: add getDesktopFullPageScreenshotsData

* test: add getAndroidChromeDriverFullPageScreenshotsData

* test: add getMobileFullPageNativeWebScreenshotsData

* chore: some small fixes

* Refactor code (#987)

* feat: refactor getBase64FullPageScreenshotsData router

- update ut's

* chore: update tests

* chore: refactor beforeOptions

- update saveFullPageScreen and tests

* feat: adjust saveWebScreen with createBeforeScreenshotOptions

* feat: adjust saveWebElement for createBeforeScreenshotOptions

* chore: optimise saveWebElement

* chore: restructure interface

* chore: refactor afterScreenshot options

- implemented for saveWebScreen

* chore: refactor for saveWebElement

* chore: refactor saveFullPageScreen

* chore: refactor saveAppScreen

* chore: refactor saveAppElement

* chore: refactor saveWebScreen

* chore: refactor screenshot interfaces

* chore: and the rest

* chore: use snapshots for tests

* fix: fallback for elementscreeshots

was broken due to incorrect calculation, also fixed UT's

* chore: fix local desktop run

* chore: fix some comments

* chore: code optimisation

- afterscreenshot for readability

* chore: optimisations

- make takeElementScreenshot more readable
- fix UT for afterscreenshot
- add check on calling logger for afterscreenshot

* chore: then also commit the afterscreenshot stuff

* chore: refactor a CommonCheckVariables

- adjust files
- create UT's

* chore: refactor to use buildFolderOptions

- adjust methods
- add and adjust UTs

* chore: refactor methods options

- added buildBaseExecuteCompareOptions
- added and adjusted UT's

* chore: refactor checkAppElement and checkAppScreen

* chore: refactored images and report code

- updated interfaces
- made code more dry and maintainable
- updated UTs

* chore: fix linting

* chore: fix build

* Chore: remove comments

* chore: update deps

* chore: add release notes

Author: wswebcreation

.changeset/shy-coins-drive.md

@@ -0,0 +1,76 @@
+---
+"@wdio/image-comparison-core": major
+"@wdio/visual-service": major
+"@wdio/visual-reporter": patch
+"@wdio/ocr-service": patch
+---
+
+## 💥  Major Release: New @wdio/image-comparison-core Package
+
+### 🏗️  Architectural Refactor
+
+This release introduces a **completely new core architecture** with the dedicated `@wdio/image-comparison-core` package, replacing the generic `webdriver-image-comparison` module with a WDIO-specific solution.
+
+#### What was the problem?
+- The old `webdriver-image-comparison` package was designed for generic webdriver usage
+- Complex integration between generic and WDIO-specific code
+- Limited test coverage (~58%) making maintenance difficult
+- Mixed responsibilities between core logic and service integration
+
+#### What changed?
+✅ **New dedicated core package**: `@wdio/image-comparison-core` - purpose-built for WebdriverIO
+✅ **Cleaner architecture**: Modular design with clear separation of concerns
+✅ **Enhanced test coverage**: Improved from ~58% to ~90% across all metrics
+✅ **Better maintainability**: Organized codebase with comprehensive TypeScript interfaces
+✅ **WDIO-specific dependencies**: Only depends on `@wdio/logger`, `@wdio/types`, etc.
+
+### 🧪 Testing Improvements
+
+- **100% branch coverage** on critical decision points
+- **Comprehensive unit tests** for all major functions
+- **Optimized mocks** for complex scenarios
+- **Better test isolation** and reliability
+
+| Before/After | % Stmts | % Branch | % Funcs | % Lines |
+| ------------ | ------- | -------- | ------- | ------- |
+| **Previous** | 58.59   | 91.4     | 80.71   | 58.59   |
+| **After refactor** | 90.55 | 96.38    | 93.99   | 90.55   |
+
+### 🔧 Service Integration
+
+The `@wdio/visual-service` now imports from the new `@wdio/image-comparison-core` package while maintaining the same public API and functionality for users.
+
+### 📈 Performance & Quality
+
+- **Modular architecture**: Easier to maintain and extend
+- **Type safety**: Comprehensive TypeScript coverage
+- **Clean exports**: Well-defined public API
+- **Internal interfaces**: Proper separation of concerns
+
+### 🔄 Backward Compatibility
+
+✅ **No breaking changes** for end users
+✅ **Same public API** maintained
+✅ **Existing configurations** continue to work
+✅ **All existing functionality** preserved
+
+### 🎯 Future Benefits
+
+This refactor sets the foundation for:
+- Easier addition of new features
+- Better bug fixing capabilities
+- Enhanced mobile and native app support
+- More reliable MultiRemote functionality
+
+### 📦 Dependency Updates
+- Updated most dependencies to their latest versions
+- Improved security with latest package versions
+- Better compatibility with current WebdriverIO ecosystem
+- Enhanced performance through updated dependencies
+
+---
+
+**Note**: This is an architectural improvement that modernizes the codebase while maintaining full backward compatibility. All existing functionality remains unchanged for users.
+
+---
+

eslint.config.cjs

@@ -7,6 +7,7 @@ module.exports = [
             '**/dist/*',
             '**/build/*',
             '**/.next/*',
+            '**/.vitest-ui/*',
         ]
     },
     {

package.json

@@ -51,50 +51,45 @@
     "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",
+    "@changesets/cli": "^2.29.5",
+    "@tsconfig/node20": "^20.1.6",
     "@types/eslint": "^9.6.1",
     "@types/inquirer": "^9.0.8",
     "@types/jsdom": "~21.1.7",
-    "@types/node": "^22",
+    "@types/node": "^24",
     "@types/xml2js": "~0.4.14",
-    "@typescript-eslint/eslint-plugin": "^8.32.0",
-    "@wdio/globals": "^9.13.0",
-    "@wdio/mocha-framework": "^9.14.0",
-    "@typescript-eslint/parser": "^8.32.0",
-    "@typescript-eslint/utils": "^8.31.1",
-    "@vitest/coverage-v8": "^3.1.1",
-    "@vitest/ui": "^3.1.1",
-    "@wdio/appium-service": "^9.13.0",
-    "@wdio/browserstack-service": "^9.14.0",
-    "@wdio/cli": "^9.14.0",
-    "@wdio/local-runner": "^9.14.0",
-    "@wdio/sauce-service": "^9.14.0",
-    "@wdio/shared-store-service": "^9.14.0",
-    "@wdio/spec-reporter": "^9.14.0",
-    "@wdio/types": "^9.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@wdio/globals": "^9.17.0",
+    "@wdio/mocha-framework": "^9.18.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@typescript-eslint/utils": "^8.37.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "@wdio/appium-service": "^9.18.1",
+    "@wdio/browserstack-service": "^9.18.1",
+    "@wdio/cli": "^9.18.1",
+    "@wdio/local-runner": "^9.18.1",
+    "@wdio/sauce-service": "^9.18.1",
+    "@wdio/shared-store-service": "^9.18.1",
+    "@wdio/spec-reporter": "^9.18.0",
+    "@wdio/types": "^9.16.2",
     "cross-env": "^7.0.3",
-    "eslint": "^9.27.0",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-unicorn": "^56.0.1",
-    "eslint-plugin-wdio": "^9.9.1",
+    "eslint-plugin-wdio": "^9.16.2",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
-    "npm-run-all2": "^7.0.2",
-    "release-it": "^18.1.2",
+    "npm-run-all2": "^8.0.4",
+    "release-it": "^19.0.4",
     "rimraf": "^6.0.1",
     "saucelabs": "^9.0.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.1",
-    "webdriverio": "^9.14.0",
+    "vitest": "^3.2.4",
+    "webdriverio": "^9.18.1",
     "wdio-lambdatest-service": "^4.0.0"
   },
   "packageManager": "[email protected]+sha256.cf86a7ad764406395d4286a6d09d730711720acc6d93e9dce9ac7ac4dc4a28a7"
-}
+}

…es/webdriver-image-comparison/.npmignore packages/image-comparison-core/.npmignorepackages/webdriver-image-comparison/.npmignore renamed to packages/image-comparison-core/.npmignore packages/webdriver-image-comparison/.npmignore renamed to packages/image-comparison-core/.npmignore

@@ -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.