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 there another way to do it? This is the element I am testing:

 return this.waitForElementVisible('#myElement', 4000) //wait for it to be visible
       .assert.visible('#myElement')
       .click('#myElement')

The element is at the top of the page but the testrunner has scrolled a bit down the page and it is not visible in the screenshot. How can I if need be scroll to this element? or : How can I test this element?

Answer 1

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