How to Verify Tooltip with Selenium WebDriver using Java

Introduction to Verify Tooltip

A tooltip is a message that appears when a cursor hovers over an object like an image, link, or button on a web page. It provides additional information about the object it appears on. To verify tooltip functionality, testers ensure that the tooltip displays the correct message when the cursor is positioned over the designated object. Verifying tooltips is essential in ensuring that users receive the intended information in a clear and accessible manner, enhancing user experience on web interfaces. With Selenium software testing, you can efficiently validate tooltips, ensuring they function correctly and contribute to an intuitive and user-friendly design.

Tooltips usually use a ‘title’ attribute for an element. The attribute value will be shown as a tooltip on mouse-hover, which is a static text providing information about the element with no styling. To verify tooltip functionality, we often check this attribute value. To implement these ‘tooltips,’ there are many plugins available. With advanced tooltips, we can implement styling, images, links, and rendering by using JavaScript/JQuery plugins or CSS Tooltips.

To verify or access the static tooltips that are implemented using the HTML ‘title’ attribute, we simply use the method getAttribute(“title”) of the WebElement. For verification, we compare the returned value of this method (tooltip text) with an expected value.
For other tooltip implementation forms, we have to use “Advanced User Interactions API” which is provided by the Webdriver to create the mouse hover effect and then retrieving the tooltip for the element.

A brief introduction about Advanced User Interactions API:

It provides the API for user actions like mouse hovering, drag and drop, keypress, key release, multiple selections, and other keyboard or mouse actions on a webpage. Testers can also use this API to verify tooltip functionality, ensuring tooltips display the correct information during user interactions.

Let’s see how to use the API for couple of classes and methods.

S1: The following Packages/Classes need to be imported to use the API.

import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

S2: Create an “Actions” class object and build the sequence of user actions like dragAndDrop(), moveToElement(), etc.

Actions builder = new Actions(driver);
builder.clickAndHold(slider).moveByOffset(40, 0).release();

S3: Creates an Action Object using the method build() and Call the perform() method to execute all the actions that are built by the Actions object.

Action Actionslide = builder.build();
Actionslide.perform();

How to get the Tooltip Text in Selenium Webdriver

There are multiple ways of showing the tooltip to the user.

One is with the simple HTML
The Second one is with the JQuery Tooltip

Scenario 1: HTML ‘title’ Attribute

In this case, let’s consider an example of https://buffer.com/library/social-media-icons.

From the above link, we try to verify the tooltip of the “Facebook” icon.

To get the Tooltip of the Facebook icon we will first find the element and gets its attribute ‘title’ and verify with our expected tooltip text.

Since we are assuming the tooltip is in the “title” attribute, so we retrieve the attribute’s valve using the “getAttribute” method.

String expectedTooltip = “Facebook”

WebElement facebook = driver.findElement(By.xpath(“.//*[@id=’post-14586’]/section[1]/div/div[2]/div[2]/a[3]”);

Right-click on the Facebook icon to get the title attribute.

//get the value of the “title” attribute of facebook icon

String actualTooltip = facebook.getAttribute(“title”);

//Assert the tooltip value is as expected

Assert.assertEquals(expectedTooltip, actualTooltip);

Now, we will create a test case step by step to understand how to verify the tooltip.

Step 1: Launch Eclipse IDE.

Step 2: Go to File > New > Click on Java Project.

Step 3: Right-click on the src folder and click on the New > class.

Give your Class name as “Test_ToolTip” and Select the checkbox “public static void main(String[] args) and click on the “Finish” button.

Step 4: Invoke the Google Chrome browser and set the system property to the path of your chromedriver.exe file.

Here is the sample code to set Chrome driver system property:

// System Property for Chrome Driver   
System.setProperty("webdriver.chrome.driver", “ D:\\Drivers\\geckodriver.exe ");

After that, we have to initialize the Chrome driver using ChromeDriver Class. Below is the sample code to initialize Chrome driver using ChromeDriver class.

// Instantiate a ChromeDriver class.      

WebDriver driver=new ChromeDriver();

We will get the below code to launch Google Chrome browser after combining both of the above codes.

System.setProperty("webdriver.chrome.driver", “ D:\\Drivers\\geckodriver.exe ");  WebDriver driver=new ChromeDriver();

After that, we need to navigate to the desired URL.

Below is the sample code to navigate to the desired URL:

// Launch Website  
driver.navigate().to("https://buffer.com/library/social-media-icons");

Here is the complete code for above scenario:

import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.chrome.ChromeDriver;  
  
public class Test_Dropdown {  
  
    public static void main(String[] args) {  
          
        // System Property for Chrome Driver   
 System.setProperty("webdriver.chrome.driver", “ D:\\Drivers\\geckodriver.exe ");  
  
        // Instantiate a ChromeDriver class.      
    WebDriver driver=new ChromeDriver();  
  
        // Launch Website  
driver.navigate().to("https://buffer.com/library/social-media-icons");  
     
    }    
}

Step 5: Now we will try to locate the Facebook icon by inspecting.

WebElement facebook = driver.findElement(By.xpath(“.//*[@id=’post-14586’]/section[1]/div/div[2]/div[2]/a[3]”);

Right-click on Facebook icon to get the title attribute.

//get the value of the “title” attribute of facebook icon

String actualTooltip = facebook.getAttribute(“title”);

Now, our final test script will look something like:

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

public class Test_ToolTip {

public static void main(String[] args) {
// TODO Auto-generated method stub
System.setProperty("webdriver.chrome.driver", "D:\\Drivers\\geckodriver.exe");

        WebDriver driver = new ChromeDriver();
        
    // maximize browser
      driver.manage().window().maximize();
      String expectedTooltip = "Facebook";
      
      // Find the Facebook icon
      WebElement facebook = driver.findElement(By.xpath("..//*[@id=’post-14586’]/section[1]/div/div[2]/div[2]/a[3]"));
      
      //get the Facebook icon value of the "title" attribute
      String actualTooltip = facebook.getAttribute("title");
      
      //Assert the tooltip value is same as expected
      System.out.println("Actual Title of Tool Tip"+actualTooltip);
      if(actualTooltip.equals(expectedTooltip)) {
          System.out.println("Test Case Passed");
      }

      driver.close();

}

}

Code Explanation

Find the WebElement representing the “Facebook” icon.
Using the getAttribute() method getting its “title” attribute
Compare the value against the expected tooltip value.

Scenario 2: Let’s take JQuery example for the tooltip.

Whenever the user will mouse hover on the text field, the tooltip will get displayed. But when you observe the HTML, it doesn’t have any title attribute. To verify tooltip functionality in such cases, testers can check the dynamically generated div tag where the tooltip text resides whenever the user hovers over the element.

When we try to inspect the ‘Your age’ field, it will give the input id as

After mouse hover, the tooltip is displayed as

To get the tool tip text, we need to use the actions class.

Syntax:

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

Now, our final test script will look something like:

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;
import org.testng.Assert;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class ToolTipTest {

public static void main(String[] args) {
// TODO Auto-generated method stub
System.setProperty("webdriver.chrome.driver", "D:\\Drivers\\geckodriver.exe");

        WebDriver driver = new ChromeDriver();
        
    // maximize browser
      driver.manage().window().maximize();
driver.get("https://jqueryui.com/tooltip/");
// Explicit wait for the frame. 
WebDriverWait wait = new WebDriverWait(driver, 5);
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector(".demo-frame")));
WebElement element = driver.findElement(By.id("age"));
// Actions class to mouse hover
Actions action = new Actions(driver);
action.moveToElement(element).build().perform();
WebElement toolTipEle = driver.findElement(By.xpath("//*[@id='ui-id-118']/div"));
// Get the Tool Tip Text
String toolTipText = toolTipEle.getText();
              // verify the expected and actual value using assert
Assert.assertEquals("We ask your age for statistical purposes.", toolTipText);


}

}

Conclusion:

There are multiple ways of showing the tooltip to the user.

One is with the basic implementation based on HTML’s ‘title’ attribute. Using getAttribute(title) gets the value of the tooltip. To verify tooltip functionality, testers can retrieve and validate this value against the expected text.
The second one is with the implementation like JQuery, which requires the Interactions API to create the mouse hover effects. To verify tooltip functionality, testers can simulate mouse hover actions and validate the displayed tooltip text or behavior.
Advanced User Interactions API

Actions class moveToElement(element) is used to mouse hover an element. It is commonly utilized to verify tooltip functionality by triggering the tooltip display and validating its content or behavior during testing.
Build() method builds the sequence of user actions.
The Perform() method will execute all the sequences of user actions all at once.

To verify a tooltip, first, we have to mouse-hover the element, then find the element and get its text and verify against the expected values.

Verifying tooltips with Selenium WebDriver using Java is a straightforward process that ensures accurate and accessible information for users. By leveraging Selenium’s advanced features, you can efficiently locate, validate, and enhance tooltip functionality. This approach improves user experience and ensures a polished web application. Master these skills to seamlessly verify tooltip behavior during your testing!

Call to Action

Mastering the art of verifying tooltips with Selenium WebDriver using Java is a crucial skill for any aspiring QA professional. At H2K Infosys, we offer comprehensive Selenium training designed to equip you with the knowledge and hands-on experience to tackle real-world challenges in automation testing. Learn to write efficient scripts, verify tooltip functionality, handle complex scenarios, and ensure seamless user interactions, all under the guidance of industry experts.

Take your testing expertise to the next level with H2K Infosys’s career-oriented programs. Whether you’re a beginner or looking to enhance your current skill set, our flexible learning options, practical projects, and job placement assistance ensure you’re industry-ready. Enroll now and unlock your potential with Selenium WebDriver using Java and learn to verify tooltip integration effectively!