How to verify tooltip text with selenium webdriver using java

When user mouse hovers an any item (Button/link/field etc), without clicking it, and a tool tip may appear with information about the item being hovered. And Some times it may require us to check for the tooltip text.

There are different ways in showing tool tip to the user. We will look into two such different examples, one is with simple HTML and other example with Jquery ToolTip.

Example#1:

Let us take selenium official website to verify the tooltip in the first case.

Here when we mouse hover on the header, it has anchor tag with title attribute which is displayed as tooltip. Below is the screen shot:

Selenium simple tool tip

In this case it is very simple to get tooltip text by using selenium getAttribute() method.

Syntax:

WebElement element = driver.findElement(By.cssSelector(".header"));
String toolTipText = element.getAttribute("title");

We will follow the below steps for Case#1:

1. Open browser
2. Identify the element
3. Get tool tip text by attribute
4. compare Actual with Expected tool tip text

Example#2:

Now let us take JQuery example for tool tip.

Here when user mouse hover on the text field, it will display the tool tip. But when you observer the HTML, it doesn't have any title attribute. When ever user mouse hover, it will generate a div tag in which tool tip text resides. Check the below screen shot.
Selenium jquery tool tip

So here getAttribute() will not work. To get the tool tip text here, we need to take the help of Selenium actions class.

Syntax:

Actions action = new Actions(driver);
WebElement element = driver.findElement(By.id("boxElement"));
actions.moveToElement(element).build().perform();

We will follow the below steps for Case#2:

1. Open browser
2. Switch to Frame
3. Identify the element
4. Mouse Hover on the text field using Actions class
5. Get tool tip text by attribute
6. compare Actual with Expected tool tip text

Let us now create an example for above cases and see how they work.
1. Create a class with name 'ToolTipExample.java'
2. Create two test methods 'toolTipCase1' and 'toolTipCase2'
3. Will have Before and After class for driver setup and teardown.

package com.tooltip;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class ToolTipExample {

	String seleniumURL = "http://docs.seleniumhq.org";
	String jQueryURL = "https://jqueryui.com/tooltip/";
	public WebDriver driver;

	@BeforeClass
	public void setUp() {
		driver = new FirefoxDriver();
		driver.manage().window().maximize();
	}

	@Test
	public void toolTipCase1() {
		driver.navigate().to(seleniumURL);

		WebElement element = driver.findElement(By.cssSelector("#header>h1 a"));
		// Get tooltip text
		String toolTipText = element.getAttribute("title");
		System.out.println("Tool tip text present :- " + toolTipText);

		// Compare toll tip text
		Assert.assertEquals("Return to Selenium home page", toolTipText);
	}

	@Test
	public void toolTipCase2() {
		driver.navigate().to(jQueryURL);

		// As there is frame, we have to navigate to frame
		WebDriverWait wait = new WebDriverWait(driver, 5);
		wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector(".demo-frame")));

		// Text box field, where we mouse hover
		WebElement element = driver.findElement(By.id("age"));

		// Use action class to mouse hover on Text box field
		Actions action = new Actions(driver);
		action.moveToElement(element).build().perform();
		WebElement toolTipElement = driver.findElement(By.cssSelector(".ui-tooltip"));

		// To get the tool tip text and assert
		String toolTipText = toolTipElement.getText();
		Assert.assertEquals("We ask for your age only for statistical purposes.", toolTipText);

	}

	@AfterClass
	public void tearDown() {
		if (driver != null) {
			driver.quit();
		}
	}
}

Hope this helps you. Please fell free to comment if you need any thing more.

Selenium Tutorials: 

Comments

Hi,
I appreciate your work clarity which is being different from other sites, and also even beginners can learn it quickly

i am working on a project where formatting is the major functionality and redundant but the text to be formatted differs i request you to give me any suggestions regarding this

Requirement: select a particular text in a div and so that formatting can be applied to that text

I have come across an issue with tooltips...For some tooltips we do not find various attributes like title, id etc... Please help me to identify this tooltip shown as 'Please fill out this field' for the html5 required input field. Not able to find inspect element also for this type of tooltip. Any help is appreciated. Thanks in advance..

how you identified css selector in second case

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.