Ws/canvas 2 jimp

[wswebcreation]

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

npm run test.local.desktop  --update-visual-baseline

When running logs info/debug mode you will see the following logs added

[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

[changeset-bot]

🦋 Changeset detected

Latest commit: f78704c

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

This PR includes changesets to release 2 packages

Name	Type
webdriver-image-comparison	Major
@wdio/visual-service	Major

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]

Docs changes for WebdriverIO can be found here and depend on releasing this version. Once both are released I'll port it to main

[christian-bromann]

Amazing work once again 🎉

[nextlevelbeard]

Legend, great work!
Tried it recently and was turned off by Canvas errors/issues.

[wswebcreation]

Tnx guys

I’m in Athens now with my company, will merge it beginning of next week