How to test Tooltip text using MouseOver using Selenium webdriver

4
votes

I have a small baggage icon which when hover the mouse over the icon, a tooltip text displays. I want to test this by writing C# code in Visual Studio.

Here is how the baggage icon displayed in html:

<div class="icon_png information icon_baggageyes" title="1 piece included in this fare."></div>

And here is my code to test the tooltip:

Actions a = new Actions(driver);
IWebElement tooTipObject = driver.FindElement(By.XPath("//div[@class='icon_png information icon_baggageyes']"));
a.MoveToElement(tooTipObject).Click().Build().Perform();

The problem is when I debug step by step the code above, the tooltip text will show up. But when I run the test, the tooltip text does now show.

By searching on the internet, some people say the reason is the mouse does not focus on the baggage icon long enough time for the tooltip text to display.

But how to resolve this problem? I have been searching for solutions but could not find one that works for mine.

And another question is my code: a.MoveToElement(tooTipObject).Click().Build().Perform(); the tooltip text will only show if I put .Click() in this code. But I am testing the mouse hover over function, should not be clicking on the icon. This is so weird.

5
c#seleniumwebdrivertooltip

5 Answers

2
votes

Since the tooltip is triggered by the div's title attribute, how about just checking that attribute value? It would be relying on the assumption that all browsers display the title as a tooltip when hovering (which, as far as I am aware, all desktop browsers do).

Googling around briefly, it seems like something along these lines should work:

WebElement element = driver.FindElement(
     By.XPath("//div[@class='icon_png information icon_baggageyes']"));
string titleText = element.getAttribute("title");

After that you can verify the titleText is as expected.

1
votes

I am probably a little late, but what I found to work was:

IWebElement elementToHover = graphRegion.FindElement(By.CssSelector(CSSSelector));
Actions hover = new Actions(driver);

hover.MoveToElement(elementToHover);
Thread.Sleep(2000);
hover.Perform();

I am primarily testing in Chrome across many OS combinations, with the browser maximized, and without the sleep I was running into issues with the length of time the tooltip was displayed, primarily in Linux (poor reliability on Mac).

I am a little unsure as to why the Thread.Sleep(2000) is performed as part of the "Actions". I have tried a few different custom wait methods, but I only achieved the reliability that I need through an explicit Sleep of 2 seconds or more.

I am sure there are better options, but this is working for me!

1
votes

Use Java Robot for the UI interaction; Robot is used here for controlling Mouse actions.

WebElement targetElement = driver.findElement(By.id("value"));
Point coordinates = targetElement.getLocation();
Robot robot = new Robot(); 
robot.mouseMove(coordinates.getX(), coordinates.getY() + 65); //Number 65 should vary

Thread.sleep(3000);
String tooltip = driver.findElement(By.id("value"")).getAttribute("title");
System.out.println(tooltip);
0
votes

I'm having the same issue. If what you are saying is correct OP that you're not hovering over the element long enough then I'm confused why the method is called "move to element" instead of "move to element and then immediately away from element"

Also click and hold exhibits the same behavior for me as just moving to an element. I think this is probably a bug with selenium.

This is disappointing. I guess I'll just use click but clicking the element sets off another set of actions that I don't want to set off, whereas hovering is supposed to help me just show a tooltip.

I am using chromedriver.

0
votes

I use the robot to hover over the icon. I had to calibrate the robot to work with selenium to make clicking on elements easier though.

See the answer here for information on calibrating robot with selenium.