How to scroll to element using Nightwatch?

Question

I am using nightwatch for e2etesting my app. One of the tests fails because it cannot scroll to the element that it is testing I suspect. Question do I need to scroll or is ther

Answer 1

You can execute this javascript with execute document.querySelector({{ACTUAL_SELECTOR}}).scrollIntoView();

Answer 2

There is a native method in nightwatch to get elements into view. (In general elements should always be scrolled into view from nightwatch/selenium. But if you want to do that by hand you can use getLocationInView():

return this.getLocationInView('#myElement')
   .assert.visible('#myElement')
   .click('#myElement')

Nightwatch also supports doing this directly via the Webdriver Protocol using moveTo() without any abstraction. In that case it would look more like:

const self = this;
return this.api.element('#myElement', (res) => {
  self.api.moveTo(res.value.ELEMENT, 0, 0, () => {
    self.assert.visible('#myElement');
    self.click('#myElement');
  })
});

(this was just written from top of my head, hope I didn't make a mistake)

But what could help in your case is changing seleniums element scroll behaviour in the config like:

firefox: {
  desiredCapabilities: {
    browserName: 'firefox',
    javascriptEnabled: true,
    acceptSslCerts: true,
    elementScrollBehavior: 1
  }
}

Default is 0 -> Elements are scrolled to top of page

elementScrollBavior 1 -> Elements are scrolled to bottom of page

Answer 3

In addition an example I used as page object command (be_expand) where my selector was an xpath already used in a element (@be_click):

    be_expand() {
        this.api.execute(function(xpath) {
            function getElementByXpath(path) {
                return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            }
            var res = getElementByXpath(xpath);
            res.scrollIntoView(true);
        }, [this.elements.be_click.selector]);
        this.assert.visible('@be_click');
        this.click('@be_click');
        return this;
    }

Answer 4

Remember that:

.execute() inject a snippet of JavaScript into the page for execution in the context of the currently selected frame. The executed script is assumed to be synchronous and the result of evaluating the script is returned to the client.

and

Window.scrollTo() Scrolls to a particular set of coordinates in the document.

Your test will look like this:

module.exports = {
    'your-test': function (browser) {
        browser
            .url("http://example.com")
            .waitForElementPresent('body', 2000, "Be sure that the page is loaded")
            .execute('scrollTo(x, y)')
            .yourFirstAssertionHere()
            .yourSecondAssertionHere()
            ...
            .yourLastAssertionHere()
            .end()
    }
};

• If you know that the element with id myElement is at the top of the page you can just change x and y by 0 (just to be sure that you'll scroll to the top of the page).

• If you need to get the exact values of x and y, you can use: getLocationInView() like this:

  module.exports = { 'your-test': function (browser) { browser .url("http://example.com") .waitForElementPresent('body', 2000, "Be sure that the page is loaded") .getLocationInView("#myElement", function(result) { //The x value will be: result.value.x //The y value will be: result.value.y }); } }

  .getLocationInView(): Determine an element's location on the screen once it has been scrolled into view... Returns The X and Y coordinates for the element on the page.

Hope this help you.

Answer 5

you can use the moveToElement()

simply use it like this

browser.
.moveToElement(#myElement, 10, 10)
.waitForElementVisible(#myElement, 500)