PAGE 32 : HOW TO VERIFY TOOL TIP TEXT USING SELENIUM WEBDRIVER

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:

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.

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();
  }
 }
}