Verify Tool-tip text in Selenium

A tool-tip is small rectangular pop-up window that appears near an object in a graphical user interface (GUI) on mouse hovering that object. Tool-tip contains a brief text message identifying or explaining the object.

                                                   Fig : Tool-tip for the Google logo

In Selenium we sometime need to verify tool-tips present in web pages to satisfy our automation needs. This post is dedicated towards how to automate this scenario through Selenium.

Get the Tool-tip text through Selenium Webdriver :-

To get the tool-tip text of a particular object we need to mouse hover the object. Through selenium we can automate the same. Just use the following selenium webdriver code to get the tool-tip text :

1. WebDriver driver = new FirefoxDriver();
2. Actions ActionChains = new Actions(driver);
   'Actions' class is used to generate a sequence of actions.
3. WebElement toolTipObject = driver.findElement(By.xpath("//*[@id='hplogo']"));
4. ActionChains.clickAndHold(toolTipObject).perform(); 'clickAndHold' method is used to mouse hover a particular object on the web page.

Verify Tool-tip text through Selenium :-

To verify tool-tip present for an object, we first have to locate the object on the page and the appropriate html 'tag-attribute' describing the tip. We have two popular tag-attribute through which tool-tips can be given for a particular object :

1. 'alt' html tag-attribute. Example : <div id="object" alt="Tool-tip for object">
2. 'title' html tag-attribute. Example : <div id="object" title="Tool-tip for object">

To verify tool-tip, we have to access any one of the two tag-attributes through Selenium. 

A) Selenium IDE :

In Selenium IDE, we have a command called 'storeAttribute' through which we can store the value of a particular attribute present under a html tag. For tool-tip, we can store the value of 'alt' or 'title' tag in a variable by using 'storeAttribute' command which can be verified against the expected value of the tool-tip.
Example (Tool-tip for the Google logo) :
Command : storeAttribute
Target : id=hplogo@title
[id=hplogo - is the locator for the tool-tip object (Here, locator for the Google logo present on the page). title - is the tag-attribute]
Value : GoogleTooltip
[Name of the variable which stores the value of the tool-tip]


B) Selenium RC :
Selenium RC uses 'getAttribute' method which serves same purpose as 'storeAttribute' command in Selenium IDE.
Example (Tool-tip for the Google logo) :

1. selenium = new DefaultSelenium("localhost", 4444, "*chrome", "http://www.google.co.in/");
2. selenium.start();
3. selenium.open("/");
4. String GoogleTooltip = selenium.getAttribute("id=hplogo@title");
   [id=hplogo - is the locator for the tool-tip object (Here, locator for the Google logo present on the page). title - is the tag-attribute]. 

'GoogleTooltip' is the variable stores the value of the tool-tip.


C) Selenium Webdriver :
Selenium Webdriver also uses 'getAttribute' method to store the attribute value of a html tag.
Example (Tool-tip for the Google logo) :

1. WebDriver driver = new FirefoxDriver();
2. WebElement toolTipObject = driver.findElement(By.xpath("//*[@id='hplogo']"));
3. String GoogleTooltip = toolTipObject.getAttribute("title");

'GoogleTooltip' is the variable stores the value of the tool-tip for the 'toolTipObject' object.