(feat): add visual matcher

[christian-bromann]

First draft of visual matchers. Needs some testing and documentation.

I decided for this interface:

it(`should match an element successful with a baseline for '${browserName}'`, async () => {
    await expect($('.hero__title-logo')).toMatchElementSnapshot('wdioLogo', 0, {
        removeElements: [await $('nav.navbar')]
    })
})

it(`should match a full page screenshot successful with a baseline for '${browserName}'`, async () => {
    await expect(browser).toMatchFullPageSnapshot('fullPage', 0, {
        fullPageScrollTimeout: 1500,
        hideAfterFirstScroll: [
            await $('nav.navbar'),
        ],
    })
})

it(`should match a tabbable screenshot successful with a baseline for '${browserName}'`, async () => {
    await expect(browser).toMatchTabbablePageSnapshot('tabbable', 0, {
        hideAfterFirstScroll: [
            await $('nav.navbar'),
        ]
    })
})

implements #140

[changeset-bot]

🦋 Changeset detected

Latest commit: 540311a

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

This PR includes changesets to release 1 package

Name	Type
@wdio/visual-service	Minor

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

[christian-bromann]

@wswebcreation let me know what you think!

[christian-bromann]

Add docs for them in webdriverio/expect-webdriverio#1409

[wswebcreation]

Add docs for them in webdriverio/expect-webdriverio#1409

Done this one, added comments to it

[wswebcreation]

LGTM, thanks!

[erwinheitzman]

I would like the ability the expectation in the service settings so that I do not have to pass 0 every time I do a comparison, so making the number an optional instead of required argument. What do you think?

[christian-bromann]

What do you think?

Great idea, will add the feature.

[christian-bromann]

Improved the matcher failing message:

 "spec" Reporter:
------------------------------------------------------------------
[Safari 16.6 macOS #0-0] Running: Safari (v16.6) on macOS
[Safari 16.6 macOS #0-0] Session ID: 14b39b5f154444faa0970b43c6e36565
[Safari 16.6 macOS #0-0]
[Safari 16.6 macOS #0-0] » /tests/specs/desktop.spec.ts
[Safari 16.6 macOS #0-0] @wdio/visual-service desktop
[Safari 16.6 macOS #0-0]    ✖ should compare an element successful with a baseline for 'safari-16'
[Safari 16.6 macOS #0-0]    ✓ should compare a full page screenshot successful with a baseline for 'safari-16'
[Safari 16.6 macOS #0-0]    ✓ should compare a tabbable screenshot successful with a baseline for 'safari-16'
[Safari 16.6 macOS #0-0]
[Safari 16.6 macOS #0-0] 2 passing (56.5s)
[Safari 16.6 macOS #0-0] 1 failing
[Safari 16.6 macOS #0-0]
[Safari 16.6 macOS #0-0] 1) @wdio/visual-service desktop should compare an element successful with a baseline for 'safari-16'
[Safari 16.6 macOS #0-0] Expected image to have a mismatch percentage of 0%, but was 46.878%
Please compare the images manually and update the baseline if the new screenshot is correct.

Baseline: /Users/christian.bromann/Sites/WebdriverIO/projects/visual-testing/tests/sauceLabsBaseline/desktop_safari/wdioLogo-macOS12-16-1366x768.png
Actual Screenshot: /Users/christian.bromann/Sites/WebdriverIO/projects/visual-testing/.tmp/actual/desktop_safari/wdioLogo-macOS12-16-1366x768.png
Difference: /Users/christian.bromann/Sites/WebdriverIO/projects/visual-testing/.tmp/diff/desktop_safari/wdioLogo-macOS12-16-1366x768.png

See https://webdriver.io/docs/api/visual-regression.html for more information.

[christian-bromann]

Assertions can now be written without an expected result, it defaults to 0:

await expect($('.hero__title-logo')).toMatchElementSnapshot('wdioLogo', {
    removeElements: [await $('nav.navbar')]
})
// or just
await expect($('.hero__title-logo')).toMatchElementSnapshot('wdioLogo')

[christian-bromann]

Let me know what you all think!

[wswebcreation]

👍

[wswebcreation]

❤️

[wswebcreation]

Thanks