How to Caputure Tooltip Text in Selenium using Action Class?

ToolTip Text in Selenium: This is another continuation post of the Java Selenium tutorial series. In this post, we are going to learn how we can verify the tooltip text. Before the discussion about tooltip, I would like to share some basic information about tooltip so that a new learner could understand easily.

For our readers, those want to learn about the Selenium Tutorial, Core Java Tutorial and other testing related topics then you can follow the mentioned links.

What is the Tooltip Text?

The tooltips text is a hidden text which is behind the elements like images, buttons, link, etc. and when you place your mouse over those elements, then some text appears which shares some of the information about that element or object.

For example, if you open facebook.com in your browser and when you place your mouse over the Facebook image, then you may see a message “Go to Facebook Home.” which is displays after place your mouse over the logo. So that type of text messages called tooltips text.

Tooltips is traditionally implemented with the “title” attribute, so when you place the mouse of the element where the element is declared with the “title,” then whatever value is assigned to that element, that value will be displayed. Those elements are declared with the title tag. That element will display a static text which gives the pieces of information with no styling.

But nowadays, there are many plugins available for the tooltips implementation. With those plugins, you can create an advanced tooltip that having styling, rendering, images, and links with the help of JavaScript/JQuery plugins or using CSS tooltips.

You can handle the tooltip in 2 different ways:

• Using the “title” Attribute
• Using Actions class

Verify tooltip Using “title” Attribute

For those elements, implement the tooltip using the HTML “title” attribute. Then, in that case, you can use the getAttribute(“title”) method, which will return the information text. So to verify that you can compare the expected text with this text.

package com.selenium.practice.basic;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class TooltipExample 
{
   public static void main(String[] args) throws InterruptedException 
   {
      WebDriver driver;
      System.setProperty("webdriver.gecko.driver","Path Of Browser Driver");
      driver=new FirefoxDriver();
      driver.manage().window().maximize();
      driver.get("https://www.selenium.dev/");
      Thread.sleep(10000);

      WebElement SeleniumTooltipelEment = driver.findElement(By.id("gsc-i-id1"));
      String Tooltiptext=SeleniumTooltipelEment.getAttribute("title");
      
      System.out.println("The tooltip Text is: "+Tooltiptext);
   }
}

Output:

The tooltip Text is: search

Tooltip Text Verify Using Actions Class

Those tooltips which are created by using the advanced jQuery\JavaScript plugins. So whenever you place the mouse over such objects, the tooltip message will appear, and whenever you move the mouse, that message disappears. So it’s a challenging task to grab the tooltip text.

So, in that case, if you are thinking about the use of title attribute, then in many cases, there is no title attribute also. It was developed in such a way that when you place your mouse over there, it will generate a div tag, and inside that, you will find out the tooltip text message. So in those cases, you can not use the getAttribute() method. To handle such type of situation, we can take the help of the Actions class to verify the tooltip message.

package com.selenium.practice.basic;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
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;

public class TooltipExample2 
{
   public static void main(String[] args) throws InterruptedException 
   {
      WebDriver driver;
      System.setProperty("webdriver.gecko.driver","Path Of Browser Driver File");
      driver=new FirefoxDriver();
      driver.manage().window().maximize();
      driver.get("https://jqueryui.com/tooltip/");
      Thread.sleep(10000);

      JavascriptExecutor js = (JavascriptExecutor) driver;
      js.executeScript("window.scrollBy(0,350)");

      WebDriverWait wait = new WebDriverWait(driver, 5);
      wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector(".demo-frame")));


      WebElement element = driver.findElement(By.id("age"));

      Actions action = new Actions(driver);
      action.moveToElement(element).build().perform();
      WebElement toolTipElement = driver.findElement(By.cssSelector(".ui-tooltip"));

      String toolTipText = toolTipElement.getText();
      System.out.println("The Tooltip Text is: "+toolTipText);

      driver.close();
   }
}

Output:

The Tooltip Text is: We ask for your age only for statistical purposes.

If you saw the above example program you may be a little bit confuse that why we are using JavascriptExecutor. Let Us clarify that during writing this article in the Jquery website we have noticed one banner because of that our require element is not visible in the page.

But our required element is:

So to make available the required element in the visible area we have to implement the scroll option with JavascriptExecutor & Scroll. When you are practice at that time if the banner is not present then you can write the same program without using JavascriptExecutor.

If you want to learn more about scroll then you can refer the complete article of Scroll Down or UP a Page in Selenium Webdriver.

I hope this article will help you verifying the tooltip message on your application. If you are using any other way or If you are facing any difficulties, then feel free to drop a comment, and we are happy to help you.