How to Verify Tooltip with Selenium WebDriver using Java

How to Verify Tooltip with Selenium WebDriver using Java

Table of Contents

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.

Tooltips usually a ‘title’ attribute to an element. The attribute value will be shown as a tooltip on mouse-hover which is a static text that gives information about the element with no styling. 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 by using 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.

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

S1: The following Packages/Classes need to be imported in order 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.

  1. One is with the simple HTML
  2. 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.

facebook.PNG

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.

title.PNG
//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.

File.PNG

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

demo.PNG

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.

buffer.PNG

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.

title.PNG
//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

  1. Find the WebElement representing the “Facebook” icon.
  2. Using the getAttribute() method getting its “title” attribute
  3. 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 the display. But when you observe the HTML, it doesn’t have any title attribute. Whenever the user mouse hover, it will show a div tag in which tooltip text resides.

Tool.PNG

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

toolinspect.PNG

After mouse hover, the tooltip is displayed as

mouse.PNG

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.
  • The Second one is with the implementation like JQuery which requires Interactions API to create the mouse hover effects.
  • Advanced User Interactions API
  1. Actions class moveToElement(element) is used to mouse hover an element.
  2. Build() method builds the sequence of user actions.
  3. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share this article
Subscribe
By pressing the Subscribe button, you confirm that you have read our Privacy Policy.
Need a Free Demo Class?
Join H2K Infosys IT Online Training
Enroll Free demo class