Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 73 commits into from
Jul 22, 2025

Conversation

wswebcreation
Copy link
Member

@wswebcreation wswebcreation commented Jun 8, 2025

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


Started
- migrating code
- optimize types
- remove executor and replace by wdio methods
Copy link

changeset-bot bot commented Jun 8, 2025

🦋 Changeset detected

Latest commit: 63738a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@wdio/image-comparison-core Major
@wdio/visual-service Major
@wdio/visual-reporter Patch
@wdio/ocr-service Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@wswebcreation wswebcreation changed the base branch from main to ws/@wdio/image-comparison-core June 24, 2025 10:52
* 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
@wswebcreation wswebcreation marked this pull request as ready for review July 18, 2025 05:18
@wswebcreation wswebcreation merged commit 596c3a5 into ws/@wdio/image-comparison-core Jul 22, 2025
19 checks passed
@wswebcreation wswebcreation deleted the ws/rewrite-core branch July 22, 2025 07:38
wswebcreation added a commit that referenced this pull request Jul 22, 2025
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant