saveScreen/checkScreen always scroll to the top

[websaid]

Environment (please complete the following information):

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

Describe the bug Scrolling using $(...).scrollIntoView(), than using saveScreen/checkScreen leads to a scroll back to the top(y=0).

To Reproduce

1. Scroll to the bottom using a seletor which is usually at the bottom: $('footer').scrollIntoView()
2. Take a screenshot using saveScreen/checkScreen

Expected behavior No scroll back to the top or a screenshot of the area which I scrolled to

[wswebcreation]

@Westsaid

I've been checking this, but it works as expected. This is my script

    describe('compare screen', () => {
        it('should compare successful with a baseline', () => {
browser.url('https://saucelabs.com/');
            $('.footer-nav').scrollIntoView()
            expect(browser.checkScreen('examplePage')).toEqual(0);
        });
    });

This is the output

It is not scrolling back to the top before or after the screenshot. This only happens automatically when you take a fullpage screenshot

Can you provide a reproducible example?

[websaid]

Hey, sorry I was not giving proper information here. I am running wdio programmatically, this is what maybe causes this failure, heres a reproducible example, just put this in a folder and "npm i webdriverio wdio-image-comparison-service" and it should work:

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"
        },
        "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}`,
    });
    wdioImageComparisonService.folders = {
        actualFolder: `${__dirname}/.tmp/${env.toUpperCase()}/${testcase}/${nsc}/actual`,
        baselineFolder: `${__dirname}/baselines/${env.toUpperCase()}/${testcase}/${nsc}`,
        diffFolder: `${__dirname}/.tmp/${env.toUpperCase()}/${testcase}/${nsc}/diff`
    }
    global.browser = browser;
    browser.defaultOptions = wdioImageComparisonService.defaultOptions;
    browser.folders = wdioImageComparisonService.folders
    wdioImageComparisonService.before(browser.capabilities)

    await browser.url("https://saucelabs.com/")
    let footer =await browser.$('.footer-nav')
    await footer.scrollIntoView()

    //Screenshot:
    let check = await browser.checkScreen("Footer", {
        "disableCSSAnimation": true,
        "fullPageScrollTimeout": 2500,
        "removeElements": ["video"]
    })
    await browser.deleteSession()
}

[wswebcreation]

Will check this later

[wswebcreation]

Hi @Westsaid

I'm trying to reproduce this but I can't even get the script to work. Not even when I use the default example on WebdriverIO

➜  wdio-image-comparison-service git:(master) ✗ npx wdio ./tests/wdio.standalone.conf.js
2020-04-25T06:00:04.168Z INFO webdriverio: Initiate new session using the webdriver protocol
2020-04-25T06:00:04.174Z INFO webdriver: [POST] http://localhost:4444/wd/hub/session
2020-04-25T06:00:04.174Z INFO webdriver: DATA {
  capabilities: { alwaysMatch: { browserName: 'chrome' }, firstMatch: [ {} ] },
  desiredCapabilities: { browserName: 'chrome' }
}

Execution of 0 spec files started at 2020-04-25T06:00:04.192Z

2020-04-25T06:00:04.192Z INFO @wdio/cli:launcher: Run onPrepare hook
2020-04-25T06:00:04.193Z ERROR @wdio/cli:launcher: Missing capabilities, exiting with failure
2020-04-25T06:00:04.193Z INFO @wdio/cli:launcher: Run onComplete hook

Spec Files:      0 passed, 0 total (0% completed) in 00:00:00 

2020-04-25T06:00:04.193Z INFO @wdio/local-runner: Shutting down spawned worker
2020-04-25T06:00:04.448Z INFO @wdio/local-runner: Waiting for 0 to shut down gracefully
2020-04-25T06:00:04.449Z INFO @wdio/local-runner: shutting down

Can you otherwise provide a reproducible example in a GitRepo?

Last thing that is on my mind is that the save/checkScreen doesn't have a scroll inside of it, so this might even be an issue with the standalone version of WebdriverIO

[websaid]

Hi, I think you tried to run it using the normal testrunner. You have to run it programmatically, so just save my code in a js file and use "node FILENAME.js" in cmd. The Code initiates the instances of wdio & plugins on its own.

[wswebcreation]

🤦 , will try it later today

[wswebcreation]

@Westsaid

I've been checking this and it works.

There is only 1 diff. If you use this with the Devtools package than it will always scroll up automatically. I don't know if that is the case?

[websaid]

Hey, will check this and #64 on other devices by the end of the week and get back to you.

[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]

We couldn't get this one to work, neither on Windows or Mac... I made a repo with two test files: footer.js(for issue 62) & breakpoint.js (issue 64). Maybe clone and see if you also get a misbehavior. https://github.com/Westsaid/wdio-image-comp-issue-62-64-test

[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.