Tips for navigating to an element with Nightwatch

Question

Tips for navigating to an element with Nightwatch

I am currently using nightwatch for end-to-end testing of my application. One of the tests is failing because it seems unable to scroll to the element that needs to be tested. I am wondering if scrolling is necessary, or if there is another workaround. Here is the code snippet for the element in question:

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

The element being tested is located at the top of the page, but the test runner has scrolled down slightly and the element is not visible in the screenshot. How can I scroll to this element if necessary? Or is there an alternative way to test this element?

javascript selenium-webdriver nightwatch.js

Answer 1

Answer №1

If you need to ensure elements are visible on the screen while using nightwatch, there is a native method available. You can use getLocationInView() to scroll elements into view:

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

Alternatively, Nightwatch also allows direct manipulation via the Webdriver Protocol using moveTo() without abstraction. Here's an example of how it can be done:

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

Adjusting selenium's element scroll behavior in the configuration can also be useful for your specific case. Consider changing it like so:

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

The default behavior scrolls elements to the top of the page. By setting elementScrollBavior to 1, elements will be scrolled to the bottom of the page.

Answer 2

If you need to ensure elements are visible on the screen while using nightwatch, there is a native method available. You can use getLocationInView() to scroll elements into view:

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

Alternatively, Nightwatch also allows direct manipulation via the Webdriver Protocol using moveTo() without abstraction. Here's an example of how it can be done:

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

Adjusting selenium's element scroll behavior in the configuration can also be useful for your specific case. Consider changing it like so:

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

The default behavior scrolls elements to the top of the page. By setting elementScrollBavior to 1, elements will be scrolled to the bottom of the page.

Answer 3

Answer №2

Keep this in mind:

.execute() injects a piece of JavaScript into the page to be executed within the current frame's context. The script is assumed to run synchronously, and the client receives the result of the evaluation.

also

Window.scrollTo() Scrolls to specific coordinates in the document.

Your test should appear like this:

module.exports = {
    'your-test': function (browser) {
        browser
            .url("http://example.com")
            .waitForElementPresent('body', 2000, "Make sure the page has 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, simply change x and y to 0 (to ensure scrolling to the top of the page).

If you need to find 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, "Make sure the page has loaded")
            .getLocationInView("#myElement", function(result) {
                //The x value will be: result.value.x
                //The y value will be: result.value.y
            });
    }
}

.getLocationInView(): Determines 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.

I hope this explanation helps you out.

Answer 4

Keep this in mind:

.execute() injects a piece of JavaScript into the page to be executed within the current frame's context. The script is assumed to run synchronously, and the client receives the result of the evaluation.

also

Window.scrollTo() Scrolls to specific coordinates in the document.

Your test should appear like this:

module.exports = {
    'your-test': function (browser) {
        browser
            .url("http://example.com")
            .waitForElementPresent('body', 2000, "Make sure the page has 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, simply change x and y to 0 (to ensure scrolling to the top of the page).

If you need to find 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, "Make sure the page has loaded")
            .getLocationInView("#myElement", function(result) {
                //The x value will be: result.value.x
                //The y value will be: result.value.y
            });
    }
}

.getLocationInView(): Determines 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.

I hope this explanation helps you out.

Answer 5

Answer №3

To implement the moveToElement() function:

Just follow this example for usage:

browser.
.moveToElement(#targetElement, 20, 20)
.waitForElementVisible(#targetElement, 1000)

Answer 6

To implement the moveToElement() function:

Just follow this example for usage:

browser.
.moveToElement(#targetElement, 20, 20)
.waitForElementVisible(#targetElement, 1000)

Answer 7

Answer №4

To run the following javascript, use the command execute

document.querySelector({{CUSTOM_SELECTOR}}).scrollIntoView();

Answer 8

To run the following javascript, use the command execute

document.querySelector({{CUSTOM_SELECTOR}}).scrollIntoView();

Answer 9

Answer №5

Moreover, I have implemented a page object command called "be_expand" in which the selector used was an xpath that had already been utilized in another 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 10

Moreover, I have implemented a page object command called "be_expand" in which the selector used was an xpath that had already been utilized in another 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 11

Answer №6

window.browser.scrollBy(0, 3000);

Answer 12

window.browser.scrollBy(0, 3000);

Answer 13

Answer №7

browser.execute('window.scrollTo(0, 1080)')

I found this method to be effective in scrolling down to the end of the page.

Answer 14

browser.execute('window.scrollTo(0, 1080)')

I found this method to be effective in scrolling down to the end of the page.

Tips for navigating to an element with Nightwatch

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Detecting the Escape key when the browser's search bar is open - a step-by-step guide

Using React Refs to Trigger the video.play() Method - A Step-by-Step Guide

Sliding divider across two div containers with full width

Steps to correctly reset an XMLHttpRequest object

Deliver varied asset routes depending on express js

Tips for storing dynamically added row data from an HTML table to a (csv/txt) file using C#

Objects within the Prototype in Javascript

Ways to update the div's appearance depending on the current website's domain

Changes in menu layout in response to window resizing

Problem with extJS portal functionality

Can JSON be used to perform mathematical operations and calculations?

Storing a variable in a web element path with Selenium Java for iterating through multiple elements

angular and node: troubleshooting the $http.get error

Restricting Entry to a NodeJS Express Route

Does altering HX-GET in JavaScript have no impact on the outcome?

Having trouble fetching values in Node.js after a certain period of time has passed

"Encountered an Unspecified Variable Error in executing document

Error: Surprising token found in ReactJS application on CodeSandbox

How can I access dynamically created input elements without using $refs, such as getting focus?

The JavaScript functions are not loading within the onload event handler