Hovering over a link in nightwatchjs

Question

I have been using nightwatch.js and always clicked around elements. Is there a way we can hover over a link or button?

Wheelock

Answer 1

Try the browser.moveToElement command.

You can also fire a callback after moveToElement completes:

browser.waitForElementVisible('.recommendation', 1000, function () {
// moveToElement can also accept offsets
browser.moveToElement('.recommendation', 100, 100, function() {
    browser.waitForElementVisible('.share', 500, function () {
        browser.click('.share');
    }, "Click share icon. ");
});
}, "Find a recommendation ");

The code above moves to an element. After the moveTo completes it waits until the hover-only element is present. After which it interacts with it.

doc: http://nightwatchjs.org/api/moveToElement.html

Macmahon

Answer 2

You can use the selenium API moveTo command. It will move the mouse to the given element and it should stay over that element until the next command involving the mouse is used.

browser.moveTo(selector, xoffset, yoffset, function(){
    browser.pause(2000)
})

Just pause for the amount of time you would like to hover for. Here is the api documentation for moveTo.

Dapple

Answer 3

You can write your code like this:

browser.pause(1000, () => {
  //first it will find the x and y of the given selector
  browser.getLocation(selector, (res) => {
    //then it will move to this selector and hover it
    browser.moveToElement(selector, res.value.x, res.value.y, (res) => {
      //callback function
    });
  });
})

Be aware if you use waitForElementVisible before it, the selector parameters can be changed and moveToElement function will not work (it will return an error of undefined)

Upon