How to scroll an item using Nightwatch?

Question

I use nightwatch to e2etesting my application. One of the tests fails because it cannot scroll the element it is experiencing, I suspect. The question is, do I need to scroll or is there another way to do this? This is the element I'm testing:

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

The item is at the top of the page, but testrunner scrolls a bit around the page and does not appear in the screenshot. How can I if I need to scroll this element? or: how can I check this item?

Answer 1

Nightwatch has its own method to get elements in a view. (In general, items should always be scrolled in a view from nightwatch / selenium. But if you want to do this manually, you can use getLocationInView ()

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

Nightwatch also supports this directly through the Webdriver Protocol, using moveTo () without any abstraction. In this case, it will look more:

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

(it was written only on top, I hope that I was not mistaken)

But what can help in your case to change the scroll behavior of the seleniums element in config, for example:

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

By default, 0 -> Elements scroll to the top of the page.

elementScrollBavior 1 -> Elements scroll at the bottom of the page

Answer 2

Remember, that:

.execute() enter a JavaScript fragment on the page to execute in the context of the selected frame. The executed script is considered synchronous, and the script evaluation result is returned to the client.

and

Window.scrollTo() Scroll to a specific set of coordinates in a 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 simply change x and y to 0 (just to make sure you go to the top of the page).

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

  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 (): locating an element on the screen as soon as it scrolls ... Returns the X and Y coordinates for the element on the page.

Hope this helps you.

Answer 3

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