Skip to content

Ignore some elements on the screen and exclude them from the comparison #906

Open
@YuliiaMilian

Description

@YuliiaMilian

Is your feature request related to a problem? Please describe.
Yes. I'm working on visual testing for a native app, and some UI elements (like timestamps, animations, or user-generated content) change frequently. These dynamic elements cause false positives in visual regression reports, making it difficult to rely on the results and increasing manual review effort.

Describe the solution you'd like
I’d like the ability to ignore specific areas or elements on the screen during visual comparison — either by selector (for web) or by defining coordinates/regions (especially for native apps). This would help exclude dynamic or irrelevant elements from comparison and reduce noise in visual test reports.

Describe alternatives you've considered
Manually editing baseline screenshots to mask dynamic areas (not scalable or reliable).

Writing custom logic to remove elements before capturing screenshots (tedious and inconsistent).

Accepting differences in dynamic elements and overriding diffs, which reduces confidence in test results.

Additional context
It would be helpful if the visual service allowed configuring ignored regions using bounding boxes or predefined screen coordinates, element is, especially for native mobile testing.

Activity

self-assigned this
on May 2, 2025
wswebcreation

wswebcreation commented on May 13, 2025

@wswebcreation
Member

Hi @YuliiaMilian

Sorry for looking into it now, but are you looking for the option to blockout/ignore elements on a device-screenshot, or on an element screenshot?

There is, as I just discovered, an undocument option for the native apps that is called ignore. If you would use something like this

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

            expect(result).toEqual(0)
        })

then it should work.

I don't have anything yet for element screenshots. I will document the above but I'll also look for implementing this for webscreenshots

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @wswebcreation@YuliiaMilian

      Issue actions

        Ignore some elements on the screen and exclude them from the comparison · Issue #906 · webdriverio/visual-testing