checkFullPageScreen() and checkElement() behavior is disturbed by elements with position:sticky

[DmytroCh]

Environment (please complete the following information):

• Node.js version: 16.13.1
• NPM version: 8.1.2
• Browser name and version: Chrome 96
• Platform name and version: macOs Monterey 12.1
• WebdriverIO version: 7.16.13
• wdio-image-comparison-service version: 3.1.0

Config of WebdriverIO + wdio-image-comparison-service

services: [
	['chromedriver'],
	['image-comparison', { // All options: https://github.com/wswebcreation/webdriver-image-comparison/blob/main/docs/OPTIONS.md
	  baselineFolder:  join(process.cwd(), './test/sauceLabsBaseline/'),
	  savePerInstance:  true, // Save the images per instance in a separate folder so for example all Chrome screenshots will be saved in a chrome folder like desktop_chrome
	  autoSaveBaseline:  true, // If no baseline image is found during the comparison the image is automatically copied to the baseline folder when this is set to true
	  blockOutStatusBar:  true, // Automatically blockout the status and address bar during comparions. This prevents failures on time, wifi or battery status. This is mobile only
	  blockOutToolBar:  true, //Automatically blockout the tool bar. This is mobile only.
	  fullPageScrollTimeout:  1500, // The timeout in milliseconds to wait after a scroll. This might help identifying pages with lazy loading.
	}]
],

Describe the bug
I've noted that screenshots created by checkFullPageScreen() and checkElement() could be spoiled by element with position: sticky (see screenshots). In case of https://webdriver.io/ page top menu (<nav class="navbar navbar--fixed-top">) has this property and it jump on the screenshots.

To Reproduce
Use next test cases and check screenshots in sauceLabsBaseline folder.

it('should compare successful with full page screen', async() => {
	await  browser.url('https://webdriver.io/');
	const  screenShot = await  browser.checkFullPageScreen('examplePaged');
	await  expect(screenShot).toEqual(0);
});

it('should compare successful specific DOM element', async() => {
	await  browser.url('https://webdriver.io/');
	const  el = await  $('.container .row iframe');
	const  screenShot = await  browser.checkElement(el, 'ytElement');
	await  expect(screenShot).toEqual(0);
});

Expected behavior

• checkFullPageScreen() should take a screenshot with navbar at the top only
• checkElement() should take a screenshot of element
  
  

Additional context
I was able to get proper screenshots by setting browser.debug() during tests execution and removing position property for <nav class="navbar navbar--fixed-top">
This issue could be related to:

• Full Page screenshot is only capturing the image of the viewport. Is any there specific setting options required? #13
• not able to make the page scroll with saveFullPageScreen() wswebcreation/webdriver-image-comparison#31

[wswebcreation]

The method checkFullPageScreen can accept an options called hideAfterFirstScroll. This is an array of elements that will be hidden after the first automatic scroll of the method, see the full options list here

For the rest of the pages you need to fix this yourself because they don't automatically scroll.

Closing this because it's not an issue, but still open for conversation

[DmytroCh]

@wswebcreation thanks!
Here is a working code (for interested):

it('should compare successful with full page screen', async() => {
        await browser.url('https://webdriver.io/');
        const navBar = await $('nav.navbar--fixed-top');
        const screenShot = await browser.checkFullPageScreen('examplePaged', { 
            hideAfterFirstScroll: [ 
                navBar
            ]
        });
        await expect(screenShot).toEqual(0);
    });

    it('should compare successful specific DOM element', async() => {
        await browser.url('https://webdriver.io/');
        const navBar = await $('nav.navbar--fixed-top');
        const el = await $('.container .row iframe');
        await el.scrollIntoView();
        const screenShot = await browser.checkElement(el, 'ytElement', { 
            hideElements: [ 
                navBar
            ]
        });
        await expect(screenShot).toEqual(0);
    });

[wswebcreation]

Thanks @DmytroCh for sharing the code!