Hover over an element in WebDriverJS

webdriver-hover.js

/*
* Hover over an element on the page
*/

(function() {

	"use strict";

	var webdriver = require('selenium-webdriver');
	var driver = new webdriver.Builder().usingServer().withCapabilities({'browserName': 'chrome' }).build();

	driver.manage().window().setSize(1280, 1000).then(function() {
		driver.get('http://www.shazam.com/discover/track/58858793');
		driver.findElement(webdriver.By.css('.ta-tracks li:first-child')).then(function(elem){
			driver.actions().mouseMove(elem).perform();
			driver.sleep(5000);
			driver.quit();
		});
	});

}());

Just wanted to thank you for making this available. I couldn't work out how to do the 'hover' function and the window().setSize() function is also very helpful.

Thank you :-)

Thank You Umaar for making this available. I was struggled to figure out how can I 'hover' on an element and click on. But with this it makes it easy.

👍

but what if the element does not have id. and href

actions is not working for chrome driver SeleniumHQ/selenium#5428

You can use this code for mouse hover in selenium javascript:-
const actions = driver.actions({bridge: true}); var elem=await driver.findElement(By.id("myId")); await actions.move({duration:5000,origin:elem,x:0,y:0}).perform();

This code has to be inside an async function as await is used, or else to use with promise, this code might help:-

const actions = driver.actions({bridge: true}); driver.findElement(By.id("myId")).then((elem)=>{ actions.move({duration:5000,origin:elem,x:0,y:0}).perform(); });
hope it helps....

Can we specify x and y in %?

x and y will be taken as pixels by default..

async function moveTheCursor(selector){
const actions = this.driver.actions({bridge: true});
var elem=await getElementBySelector.call(this, selector);
await this.actions.move({duration:5000,origin:elem,x:0,y:0}).perform();
}
When I try this one I am getting "Cannot read property 'move' of undefined" . Can anyone please help me?

const actions = require('selenium-webdriver/lib/actions');
const LegacyActionSequence = actions.LegacyActionSequence;
const webdriver = require('selenium-webdriver'),
By = webdriver.By,
until = webdriver.until;

let driver = new webdriver.Builder()
.forBrowser('chrome')
.build();

driver.get('http://www.google.com')
.then(() => driver.findElement(By.id('gs_ok0')).then(elem => {
new LegacyActionSequence(driver).mouseMove(elem).perform();
}));

https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/actions_exports_LegacyActionSequence.html

You can use this code for mouse hover in selenium javascript:-
const actions = driver.actions({bridge: true}); var elem=await driver.findElement(By.id("myId")); await actions.move({duration:5000,origin:elem,x:0,y:0}).perform();

This code has to be inside an async function as await is used, or else to use with promise, this code might help:-

const actions = driver.actions({bridge: true}); driver.findElement(By.id("myId")).then((elem)=>{ actions.move({duration:5000,origin:elem,x:0,y:0}).perform(); });
hope it helps....

This works amazingly well in Chrome! Thanks for the help.

You can use this code for mouse hover in selenium javascript:-
const actions = driver.actions({bridge: true}); var elem=await driver.findElement(By.id("myId")); await actions.move({duration:5000,origin:elem,x:0,y:0}).perform();

This code has to be inside an async function as await is used, or else to use with promise, this code might help:-

const actions = driver.actions({bridge: true}); driver.findElement(By.id("myId")).then((elem)=>{ actions.move({duration:5000,origin:elem,x:0,y:0}).perform(); });
hope it helps....

This works. Thanks.

<3