CSS breakpoint gets triggert when taking a screenshot

[websaid]

Environment (please complete the following information):

• Node.js version: [v13.10.1]
• NPM version: [6.14.2]
• Browser name and version: [Chrome 80]
• Platform name and version: [Windows 10]
• Framework name and version: [WDIO V5]
• webdriver-image-comparison version: [1.12.2]

Config of the automation framework + plugin Run programmatically.

Describe the bug When taking a screenshot, the screen gets resized slightly. If the initial window size is near a css breakpoint, the screenshot might look completly different than expected. (video: https://jmp.sh/JxnTtkA )

To Reproduce Run the code given below.

Expected behavior That the screenshot has the initial look

Additional context Add any other context about the problem here.

const { remote } = require("webdriverio");
const WdioImageComparisonService = require('wdio-image-comparison-service').default;

let env = "asd"
main("Test","ASD")
let testcase = "mainPage"
async function main(testcase, nsc) {
    const browser = await remote({
        "runner": "local",
        "logLevel": "debug",
        "maxInstances": 10,
        "capabilities": {
            "browserName": "chrome",
            'goog:chromeOptions': {
                args: ['--window-size=1020,900'],
            }
        },
        "waitforTimeout": 10000,
        "connectionRetryTimeout": 90000,
        "connectionRetryCount": 3
    });
    let wdioImageComparisonService = new WdioImageComparisonService({
        "savePerInstance": true,
        "clearRuntimeFolder": true,
        "autoSaveBaseline": true,
        "blockOutStatusBar": true,
        "blockOutToolBar": true,
        "disableCSSAnimation": false,
        "fullPageScrollTimeout": 2500,
        "clearFolder": true,
        "formatImageName": `${env.toUpperCase()}_${nsc}_{browserName}_{width}x{height}_${testcase}_{tag}`,
        "screenshotPath": `.tmp/${env.toUpperCase()}/${nsc}`,
    });
    global.browser = browser;
    browser.defaultOptions = wdioImageComparisonService.defaultOptions;
    browser.folders = wdioImageComparisonService.folders
    wdioImageComparisonService.before(browser.capabilities)

    await browser.url("https://saucelabs.com/")

    //Testpart
    let check = await browser.checkScreen("Footer", {
        "fullPageScrollTimeout": 2500
    })
    await browser.deleteSession()
}

[wswebcreation]

@Westsaid

I think this has to do with this default option, https://github.com/wswebcreation/webdriver-image-comparison/blob/master/docs/OPTIONS.md#hidescrollbars

Have you tried turning it off?

[websaid]

@wswebcreation yes, I also tested it with hidescrollbars set to false

[wswebcreation]

Hi @Westsaid

Like in issue https://github.com/wswebcreation/webdriver-image-comparison/issues/62, I can't seem to get the standalone version working, can you also provide a reproducible example in a github project for this one?

[wswebcreation]

I also checked this one, and it works on my machine, see below

The diff might be the fact that Windows is behaving a little bit different here in comparison to Mac

[wswebcreation]

Hi @Westsaid

Any update on this? Otherwise I'll close it in a few days. Thanks

[websaid]

@wswebcreation I will test this on a couple of devices this week, and come back to you. Thanks and have a great week!

[websaid]

Hey, I tested this on a couple of devices now. This bug is just happening on windows, our Mac system had the screenshot correct, just like yours...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.