Search code examples
webdriver-io

How to ignore a div in Web Driver screenshot comparison

Using Web Driver, we compare website screenshots to ensure nothing has changed since the last test run.

However, part of the page is a carousel with dynamic content. In pretty much every comparison, this carousel is flagged as different from the baseline screenshot.

Is there a way we can specify a div (containing the carousel) to ignore in screenshot comparisons?

I've checked the docs and there is nothing about this when searching using the search term ignore.

Solution

  • Is there a way we can specify a div (containing the carousel) to ignore in screenshot comparisons?

    Assuming you are using saveScreenshot, you cannot exclude a child element

    As a workaround, you could use execute to hide it by altering it's style before snapping your screenshot (setting it's opacity to 0 for example)

    //...
browser.execute(() => {
        document.getElementById('.caroussel').style.opacity = 0;
})