elementBlockOuts implementation missing from @wdio/visual-service

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

WebdriverIO Version

8.39.1

Node.js Version

16.17.1

Mode

Standalone Mode

Which capabilities are you using?

local: {
        capabilities: [
            {
                'appium:maxInstances': '1',
                platformName: DEVICE_OS,
                'appium:deviceName': DEVICE_FULL_NAME || 'Android emulator',
                'appium:automationName': 'UiAutomator2',
                'appium:newCommandTimeout': Constants.WAIT_TIME_WORKERS_MS,
                'appium:udid': DEVICE_UUID || 'emulator-5554',
                'appium:hideKeyboard':
                    HIDE_KEYBOARD === undefined ? true : /^\s*(true|1|on)\s*$/i.test(HIDE_KEYBOARD),
                'appium:app': APP_PATH,
            },
        ],
    },

What happened?

I've tried to upgrade our current infrastructure which is using wdio-native-app-compare-service to visual-service, but unfortunately the elements are not hidden from the images/screenshots diffs.

Tried with both below flows:

                hideElements: [
                    await elem1,
                    await elem2,
                ],

                elementBlockOuts: [
                    {
                        element: await elem1,
                    },
                    {
                        element: await elem2,
                    },

Infrastructure:

App: Native App (RN based)
Node: 16.17.1
WDIO: 8.39.1
Appium: 2.11.2
visual-service: 5.2.0

wdio.base.visual.config.ts file contents:

export const visualDiffConfig = {
    misMatchPercentage: 0.4,
    largeMisMatchPercentage: 0.8,
    specFileRetries: process.env.CIRCLECI ? 1 : 0,

    services: [
        'visual',
        {
            baselineFolder: `./e2e/screenshots/${process.env.DEVICE_OS}/expected`,
            formatImageName: `{tag}-{deviceName}`,
            screenshotPath: `./e2e/screenshots/${process.env.DEVICE_OS}`,
            savePerInstance: true,
            autoSaveBaseline: true,
            blockOutToolBar: true,
            blockOutStatusBar: true,
            ignoreAlpha: true,
            scaleImagesToSameSize: true,
        },
    ],
};

tsconfig.json file contents:

        "types": [
            "node",
            "jest",
            "@wdio/globals/types",
            "@wdio/mocha-framework",
            **"@wdio/visual-service",**
            "expect-webdriverio/jest",
        ],

What is your expected behavior?

Elements blocks to be hidden from diff images/screenshots.

How to reproduce the bug.

Run a visual test on a native app with latest visual-service version and make sure baselines (images/ss are saved).
Run the test again with elements to be hidden mentioned in blockOuts list (you've to make sure that there is indeed a difference for that element, in order for that part of the screen to be marked with green colour in diffs folder).

Relevant log output

Diff is not detected (element is not hidden from the diff picture).

Code of Conduct

[X] I agree to follow this project's Code of Conduct

Is there an existing issue for this?

[X] I have searched the existing issues

Hi @berekmerilorand,

I found the reason why it's not working. As mentioned during our call I didn't migrate the option elementBlockOuts. I now found out I did migrate it, but I renamed it. The reason why you couldn't find it was because I didn't document it 🤦‍♂️ .

I will document this in the coming days, but here's a way to use the new option. The new option is called ignore and allows 3 different ways to ignore elements.

it('should compare a screen successful with different ignore options', async () => {
    await $('~Login').click()
    const result = await driver.checkScreen('app-forms', {
        ignore: [
            // By ChainablePromiseElement<WebdriverIO.Element>
            $('~button-LOGIN'),
            // By WebdriverIO.Element
            await $('~input-password'),
            // By coordinates
            {
                x: 150,
                y: 250,
                width: 100,
                height: 100,
            }
        ]
    }) as number

    (await $('~Login')).elementId

    expect(result).toEqual(0)
})

this will result in the following

app-forms-Pixel_7_pro_android_14_api_34_ChromeDriver_Portrait14-1440x3120

I did not add the margion property, because if you need to make it bigger then you can first find the coordinates of the element, but using the following

it('should compare a screen successful with a custom resized ignored element', async () => {
    await $('~Login').click()
    const elementId = (await $('~Login')).elementId
    const rectangles = await driver.getElementRect(elementId)
    const result = await driver.checkScreen('app-forms', {
        ignore: [
            // By coordinates
            {
                x: rectangles.x, // Add or abstract a number
                y: rectangles.y, // Add or abstract a number
                width: rectangles.width, // Add or abstract a number
                height: rectangles.height, // Add or abstract a number
            }
        ]
    }) as number

    (await $('~Login')).elementId

    expect(result).toEqual(0)
})

I will fix the hideElements for native apps to use the ignore Logic

[!NOTE] If you want to store all diffs you can run the test and add --store-diffs as a command line argument

webdriverio / visual-testing