A tooltip in Selenium is a text that shows up on a web page when the mouse is over an object. The item may take the form of a button, picture, text field, link, etc. When the user hovers the mouse cursor over an object, further information is frequently displayed in the tooltip text.
Traditionally, tooltips were applied to elements as a “title” attribute. When the cursor was over this attribute, a tooltip with its value was displayed. This text is static and provides element information without any styling.
Currently, there are a ton of plugins available for using “tooltips.” Plugins for JavaScript and JQuery or CSS Tooltips are used to construct advanced tooltips that include styling, rendering, images, and links.
We can utilize the getAttribute(“title”) method of the WebElement to retrieve or validate the static tooltips that are implemented using the HTML “title” attribute. For verification, the tooltip text, the value returned by this method, is compared to the expected value.
We will need to build the mouse hover effect and then retrieve the tooltip for the element using the “Advanced User Interactions API” that the Web Driver provides for other tooltip implementations.
It is a typical occurrence on many web pages for links, text, or occasionally images to appear when hovered over. For instance, when a user hovers over the menu selections on the right side of their Gmail inbox, a little text-filled “hover box” appears. We refer to this as a tooltip of web elements.
This text often provides a succinct explanation of the object’s functionality, however occasionally it provides a more in-depth description. It might occasionally just show the object’s entire name. In summary, a tooltip’s main function is to give the user some context for the object. It is often necessary to confirm that this text description is being shown as intended.
It is necessary to retrieve and validate the text within the tooltip due to the above-mentioned reasons. There are various ways to accomplish this depending on how the tooltip is added to the HTML. Check out the Selenium training online to learn more.
A Brief of the Advanced User Interactions API
The API for Advanced User Interactions allows users to perform keyboard and mouse operations on a webpage, including drag and drop, hovering, multi-selection, key press and release, and other similar operations.
Let’s look at the classes and methods we’ll need to employ in order to move a slider element by an offset now.
Step 1: The following packages and classes must be imported in order to access the API.
Step 2: Build the user action sequence by creating an object of the “Actions” class. The user action sequence, such as dragAndDrop() and moveToElement(), is constructed using the Actions class. API offers a variety of functions pertaining to user actions.
The constructor of the driver object takes the driver object as an argument.
Step 3: Use the “Actions” class’s build() function to create an Action Object. To run every action created by the Actions object (builder in this case), call the perform() function.
We have now demonstrated the usage of a few of the API’s user Actions functions, including clickAndHold(element), moveByOffset(10,0), and release(). The API offers a ton of these techniques.
Let’s examine the following cases:
Case 1: When the ‘title’ attribute contains the tooltip. We can get the tooltip from here. By tactic
Case 2: When ‘div’ has the tooltip accessible. Here, we can use the Actions class methods to fetch the tooltip.
We’ll talk about both cases. First, let’s examine the case where the tooltip appears in the title attribute.
When a user hovers over an HTML object, ToolTip appears. This is also evident when using the browser’s Developer tool, where the tooltip text is displayed as a value assigned to the ‘title’ attribute.
Most of the time, getting the tooltip text is rather simple. Finding the site Selenium element for which a tooltip has to be retrieved is all that is required.
WebElement webElement = driver.findElement(Any By strategy & locator);
Any By technique, such as discovering an element by its id, name attribute, etc., can be used in this situation to find the WebElement.
Now, get the webElement’s “title” attribute value.
String tooltipText = webElement .getAttribute(“title”);
The text from the tooltip will be saved in the tooltipText variable after the aforementioned statement is executed.
How to capture a tooltip in Selenium using Actions Class?
The HTML page can display ToolTip in a variety of ways. It can be positioned inside the title tag, as was previously described. In a similar manner, it can be removed in many ways. Above, we simply used Selenium’s GetAttribute function to locate the title element and read its property. The Div element can also be used to show data in the same manner.
However, this time we make an effort to emulate the actions of every other user on the page. Try to read the tooltip’s explanation by hovering your cursor over the object. And the only way to accomplish this is with Selenium’s Actions Class.
Conclusion To learn more about ToolTips, check out the Selenium online training.