[💡 Feature]: create custom matchers for visual testing

[christian-bromann]

Is your feature request related to a problem? Please describe.

With WebdriverIO ramping up their visual testing capabilities, we should as part of it enhance our matchers to simplify asserting baselines etc. Currently according to the new docs user would do this:

await expect(
    await browser.checkElement(
        await $('#element-id'),
        'firstButtonElement',
        {
            /* some options */
        }
    )
).toEqual(0)

// Check a full page screenshot
await expect(
    await browser.checkFullPageScreen('fullPage', {
        /* some options */
    })
).toEqual(0)

// Check a full page screenshot with all tab executions
await expect(
    await browser.checkTabbablePage('check-tabbable', {
        /* some options, use the same options as for checkFullPageScreen */
    })
).toEqual(0)

Describe the solution you'd like
Instead I would love to have this:

/**
 * compare element with a baseline
 */
await expect($('#element-id')).toVisuallyMatch(
    'firstButtonElement',
    {
        /* some options */
    },
    0
)
// or
await expect($('#element-id')).toVisuallyMatch(
    expect.visualSnapshot('firstButtonElement', {
        /* some options */
    },
    0
)


/**
 * Check a full page screenshot
 */
await expect(browser).toVisuallyMatch(
    'fullPageScreenshot',
    {
        /* some options */
    },
    0
)
// or
await expect(browser).toVisuallyMatch(
    expect.visualSnapshot(
        'fullPageScreenshot',
        {
            /* some options */
        }
    ),
    0
)

// Check a full page screenshot with all tab executions
await expect(browser).toVisuallyMatchWithTab(
    'check-tabbable',
    {
        /* some options, use the same options as for checkFullPageScreen */
    },
    0
)
// or
await expect(browser).toVisuallyMatch(
    expect.visualSnapshotWithTabs(
        'check-tabbable',
        {
            /* some options, use the same options as for checkFullPageScreen */
        }
    ),
    0
)

It could be implemented as part of the visual service and therefor would be supported when the service is enabled.

Describe alternatives you've considered
n/a

Additional context
I am currently reviewing the visual docs and found that we could optimize here.