[Selenium+java] Verify Tooltip Using Selenium webdriver

Original URL: https://www.guru99.com/verify-tooltip-selenium-webdriver.html

Verify Tooltip Using Selenium webdriver

The ToolTip is a text this appears when a mouse hovers over an object like a link, an image, a button, text area, etc. A Web page. The text often gives more information about the object on which it appears.

ToolTips were traditionally implemented as a ' title ' attribute to an element. The value of this attribute is shown as a tooltip on Mouse-hover. This was a static text giving information of the element with no styling.

Now, there is many plugins available for ' tool tips ' implementation. Advanced ToolTips with styling, rendering, images and links is being implemented using Javascript/jquery plugins or using CSS tooltips.

• For accessing or verifying the static tooltips which is implemented using the HTML "title" attribute, we can simply use T He getattribute ("title") method of the webelement. The returned value of this method (which was the ToolTip text) is compared with a expected value for verification.
• For other forms of the ToolTip implementations, we would have the ' Advanced User Interactions API ' provided by the Web D The mouse hover effect and then retrieve the tooltip for the element.

A Brief of the Advanced User Interactions API:

Advanced User Interactions API provides the API for User actions like drag and drop, hovering, multi selecting, Key press and release and other actions using the keyboard or mouse on a webpage.

You can refer this link for more details on the API.

Https://seleniumhq.github.io/selenium/docs/api/java/index.html?org/openqa/selenium/interactions/Actions.html

Here, let's have a couple of classes and methods we would need to move a slider element by an offset.

Step 1) In order to use the API, the following packages/classes needs to be imported:

Step 2) Create an object of the "Actions" class and build the Sequence of the user Actions. The actions class is used to build the sequence of the user actions like Movetoelement (), Draganddrop () etc. Various methods related to user actions is provided by API.

The driver object is provided as a parameter to its constructor.

Step 3) Create an Action Object using the Build () method of "Actions" class. Call the Perform () method to execute all of the actions built by the actions object (Builder here).

We have the seen-some of the user Actions methods provided by the Api-clickandhold (element), Movebyoffset (10,0), Release (). The API provides many such methods.

Refer to the link for more details.

Verifying Tool Tips

Let's see the demonstration of accessing and verifying, the tool tips in the simple scenario

• Scenario 1:tooltip is implemented using the "title" attribute
• Scenario 2:tooltip is implemented using a JQuery plugin.

Scenario 1:html ' title ' Attribute

For this case, let's take the example site-http://demo.guru99.com/test/social-icon.html.

We'll try to verify the tooltip of the "GitHub" icon on the top right of the page.

In order to do it, we'll first find the element and get its ' title ' attribute and verify with the expected tool tip text .

Since, we are assuming the tool tip was in the "title" attribute, we were not even automating the mouse hover effect but SIM Ply retrieving the attribute ' s value using the ' getattribute () ' method.

Here is the code

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

public class ToolTip {				
    public static void main(String[] args) {									
     
        String baseUrl = "http://demo.guru99.com/test/social-icon.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        driver.get(baseUrl);					
        String expectedTooltip = "Github";	
        
        // Find the Github icon at the top right of the header		
        WebElement github = driver.findElement(By.xpath(".//*[@class=‘soc-ico show-round‘]/a[4]"));	
        
        //get the value of the "title" attribute of the github icon		
        String actualTooltip = github.getAttribute("title");	
        
        //Assert the tooltip‘s value is as expected 		
        System.out.println("Actual Title of Tool Tip"+actualTooltip);							
        if(actualTooltip.equals(expectedTooltip)) {							
            System.out.println("Test Case Passed");					
        }		
        driver.close();			
   }		
}		

Explanation of code

1. Find the webelement representing the "GitHub" icon.
2. Get its "title" attribute using the GetAttribute () method.
3. Assert the value against the expected ToolTip value.

Scenario 2:jquery Plugin:

There is a plenty of JQuery plugins available to implement the ToolTips, and each one have a slightly different form of IM Plementation.

Some plugins Expect the ToolTip HTML to being present all the time next to the element for which the ToolTip is applicable WH Ereas the others create a dynamic "div" tag, which appears on the fly while hovering over the element.

For we demonstration, let's consider the "JQuery Tools tooltip", the "a" of the implementation.

Here in the url–http://demo.guru99.com/test/tooltip.html can see the demo where on mouse hovering over ' Download now ", we get a advanced ToolTip with an image, callout background, a table and a link inside it which is clickable.

If you are in the source below, you can see that the div tag representing the ToolTip was always present next to the ' Down Load Now "link ' s tag. But, the code inside the script tag below controls when it needs to popup.

Let's try to verify just the link text in the "the" and the "ToolTip for our demonstration" here.

We'll first find the webelement corresponding to the ' Download now '. Then using the Interactions API, we'll move to the element (Mouse-hover). Next, we'll find the webelement that corresponds to the link inside the displayed tooltip and verify it against the EXPE CTED text.

Here's the code

import org.openqa.selenium.interactions.Action;		
import org.openqa.selenium.interactions.Actions;		
import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.*;		

public class JqueryToolTip {				
    public static void main(String[] args) {									
     
        String baseUrl = "http://demo.guru99.com/test/tooltip.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");	
        
        WebDriver driver = new ChromeDriver();					
        String expectedTooltip = "What‘s new in 3.2";					
        driver.get(baseUrl);					
        		
        WebElement download = driver.findElement(By.xpath(".//*[@id=‘download_now‘]"));							
        Actions builder = new Actions (driver);							

        builder.clickAndHold().moveToElement(download);					
        builder.moveToElement(download).build().perform(); 	
        
        WebElement toolTipElement = driver.findElement(By.xpath(".//*[@class=‘box‘]/div/a"));							
        String actualTooltip = toolTipElement.getText();			
        
        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 that corresponds to the element ' download now ' that we'll mouse-hover.
2. Using the Interactions API, mouse hover on to the ' Download now '.
3. Assuming the ToolTip is displayed, find the webelement that corresponds to the link inside the ToolTip i.e. the "a" tag.
4. Verify the link's ToolTip text retrieved using the GetText () against an expected value we had stored in "Expectedtooltip"

Summary:

In this tutorial, you have learnt how to access tooltips using Selenium Web driver.

• Tool Tips is implemented in different ways–
  • The basic implementation is based on the HTML ' title ' attribute. GetAttribute (title) Gets the value of the ToolTip.
  • Other tool tip implementation's like JQuery, CSS tooltips require Interactions APIs to create mouse hover effect
• Advanced User Interactions API
  • Movetoelement (Element) of the Actions class is used to mouse hover an element.
  • Build () method of actions class builds the sequence of the user Actions into an Action object.
  • Perform () of Action class executes all the sequence of the user's actions at once.
• In order to verify a ToolTip, we had to first mouse-hover the element and then find the element that corresponds to the tool Tip and get its text or other values to verify against the expected values.

[Selenium+java] Verify Tooltip Using Selenium webdriver