Verify toolTip using Selenium Webdriver

In this post, we will see how to verify toolTip using Selenium Webdriver.

Tooltip is the text that appears when mouse hovers over an object like link, button, image etc. Sometimes, it is a requirement in the project to read the tooltip text. This tooltip text provides information related to the object on which it appears.

Objects have different attributes in HTML i.e. object properties and one of them is ‘title’ which contains tooltip text. Selenium’s job is to read that text (title attribute) of the object. Tooltip can appear in static and dynamic way, and both can be seen by mouse hover on the object. Dynamic tooltip  is usually hidden in HTML of the page, and can appear on mouse hover over the object. As mouse cursor is moved away from the object, toolTip entry will also disappear from HTML.

We will see example of both one by one. Let’s start with static tooltip.

Static Tooltip:

Selenium can capture the tooltip by simply calling “getAttribute(‘title’)” method of WebElement and return the text of title which will be nothing but the tooltip.

Let’s take an example from my website. Go to page Selenium Tutorial and you will see the image as shown below. When you will hover the mouse over the image you will see the tooltip that says ‘Selenium Webdriver, Eclipse‘.

If you will inspect this image in browser  ,you will see object title has tooltip text as shown in the snippet below.

 

Selenium Code snippet:

We will use class attribute to make the image object(WebElement) and then we will use getAttribute method.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;


public class Day1 {

	public static void main(String[] args) {
                //Keep the chromedriver at project path location in eclipse
		System.setProperty("webdriver.chrome.driver", System.getProperty("user.dir")+"/chromedriver");
		WebDriver driver = new ChromeDriver();
		driver.get("https://testingpool.com/tutorials/selenium-tutorials/");
		//Find the element by using class name
		WebElement edit = driver.findElement(By.className("wp-image-1770"));
		String tooltiptext = edit.getAttribute("title");
		System.out.println(tooltiptext);
		driver.quit();
	}
}

Output: 

Dynamic ToolTip:

Dynamic toolTip in applications is usually created by jQuery\Javascript plugins. When you hover mouse over the object, tooltip object appears in html and as soon as you take out the mouse from the object, it disappears. So, how will grab the toolTip text then?

The getAttribute(‘title’) will not simply work here as it worked in the above example. In this case, we have to use the ‘Actions class’ of Selenium. Let’s see the example below to capture toolTip.

We have the below application for demo. Click Demo Application Link.

 

If you will Inspect ‘Tooltip Example’ link in HTML, you will see only object related to this link but nothing for toolTip(Highlighted line below).

 

 

Now, once you will hover the mouse over the link, you will see a new entry in html(div tag ) which is nothing but the tooltip and when you will take he mouse out of the link, below div tag will disappear.

You can also click show button to see the toolTip.If you will expand the div tag, you will another child div tag having toolTip text.

 

 

 

 

 

 

Let’s see the code to get the dynamic tooltip.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;


public class toolTipExample {

	public static void main(String[] args) throws InterruptedException {
		System.setProperty("webdriver.chrome.driver", System.getProperty("user.dir")+"/chromedriver");
		WebDriver driver = new ChromeDriver();
		driver.get("file:///Users/shekarsharma/Downloads/demo.html#");
		//Create object for link
		WebElement exampleLink = driver.findElement(By.id("myTooltip"));
		//Create the Actions class
		Actions act = new Actions(driver);
		act.moveToElement(exampleLink).build().perform();
		//Create object for inner div 
		WebElement toolTip = driver.findElement(By.className("tooltip-inner"));
		//Get the text of Tooltip
		String tooltiptext = toolTip.getText();
		System.out.println(tooltiptext);
		driver.quit();
	}
}

Output: 

I am the example of Tooltip.