12/13/2018 How to Verify Tooltip using Selenium WebDriver

(https://www.guru99.com/)

Home (/) Testing

SAP Web Must Learn! Big Data

Live Projects AI Blog (/blog/)

How to Verify Tool p using Selenium WebDriver

The tooltip is a text that appears when a mouse hovers over an object like a link, an image, a
button, text area, etc. in 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 was shown as a tooltip on mouse-hover. This is a static text giving information of
the element with no styling.

Now, there are many plugins available for 'tool tips' implementation. Advanced tooltips with
styling, rendering, images and links are being implemented using JavaScript/JQuery plugins
or using CSS Tooltips.

For accessing or verifying the static tooltips which are implemented using the HTML "title"
attribute, we can simply use the getAttribute("title") method of the WebElement. The
returned value of this method (which is the tooltip text) is compared with an expected
value for verification.
For other forms of tooltip implementations, we will have to use the "Advanced User
Interactions API" provided by the Web Driver to create the mouse hover effect and then
retrieve the tooltip for the element.

A Brief of the Advanced User Interac ons 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 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
(https://seleniumhq.github.io/selenium/docs/api/java/index.html?
org/openqa/selenium/interactions/Actions.html)

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

https://www.guru99.com/verify-tooltip-selenium-webdriver.html 1/10
 Step
12/13/2018 1) In order to use the API, the following packages/classes
How to Verify needs to be imported:
Tooltip using Selenium WebDriver

(/images/2-

2017/072717_0606_VerifyToolt1.png)

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

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

(/images/2-2017/072717_0606_VerifyToolt2.png)

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

(/images/2-2017/072717_0606_VerifyToolt3.png)

We have seen how to use some of the user Actions methods provided by the API -
clickAndHold(element), moveByOffset(10,0), release(). The API provides many such
methods.

https://www.guru99.com/verify-tooltip-selenium-webdriver.html 2/10
 Refer to the link (https://seleniumhq.github.io/selenium/docs/api/java/index.html?
12/13/2018 How to Verify Tooltip using Selenium WebDriver

org/openqa/selenium/interactions/Actions.html) for more details.

How to get Tool p Text in Selenium Webdriver

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 ' tle' A ribute

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

We will try to verify the tooltip of the "github" icon at the top right of the page.

(/images/2-

2017/072717_0606_VerifyToolt4.png)

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

Since, we are assuming the tool tip is in the "title" attribute, we are not even automating the
mouse hover effect but simply retrieving the attribute's value using the "getAttribute()"
method.

(/images/2-2017/072717_0606_VerifyToolt5.png)

Here is the code

https://www.guru99.com/verify-tooltip-selenium-webdriver.html 3/10
12/13/2018 How to Verify Tooltip using Selenium WebDriver
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 are a plenty of JQuery plugins available to implement the tooltips, and each one has a
slightly different form of implementation.

Some plugins expect the tooltip HTML to be present all the time next to the element for
which the tooltip is applicable whereas the others create a dynamic "div" tag, which appears
on the fly while hovering over the element.

https://www.guru99.com/verify-tooltip-selenium-webdriver.html 4/10
 For our
12/13/2018 demonstration, let's consider the "jQuery
How to Tools
Verify Tooltip Tooltip"
using Selenium way of tooltip implementation.
WebDriver

Here in the URL – http://demo.guru99.com/test/tooltip.html

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

(/images/2-2017/072717_0606_VerifyToolt6.png)

If you look at the source below, you can see that the div tag representing the tooltip is always
present next to the "Download now" link's tag. But, the code inside the script tag below
controls when it needs to popup.

(/images/2-2017/072717_0606_VerifyToolt7.png)

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

We will first find the WebElement corresponding to the "Download now". Then using the
Interactions API, we will move to the element (mouse-hover). Next, we will find the
WebElement that corresponds to the link inside the displayed tooltip and verify it against the
expected text.

https://www.guru99.com/verify-tooltip-selenium-webdriver.html 5/10
12/13/2018 How to Verify Tooltip using Selenium WebDriver

(/images/2-2017/072717_0606_VerifyToolt8.png)

Here is the code

https://www.guru99.com/verify-tooltip-selenium-webdriver.html 6/10
12/13/2018 How to Verify Tooltip using Selenium WebDriver
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 will
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
have stored in "expectedToolTip"
https://www.guru99.com/verify-tooltip-selenium-webdriver.html 7/10
 Summary:
12/13/2018 How to Verify Tooltip using Selenium WebDriver

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

Tool Tips are implemented in different ways –

The basic implementation is based on HTML's "title" attribute. getAttribute(title) gets
the value of the tooltip.
Other tool tip implementation's like JQuery, CSS tooltips require Interactions API to
create mouse hover effect
Advanced User Interactions API
moveToElement(element) of Actions class is used to mouse hover an element.
Build() method of Actions class builds the sequence of user actions into an Action
object.
Perform() of Action class executes all the sequence of user actions at once.
In order to verify a tooltip, we have to first mouse-hover the element, then find the
element that corresponds to the tool tip and get its text or other values to verify against
the expected values.

 Prev (/introduction-testng-groups.html) Report a Bug

Next  (/flash-testing-selenium.html)

YOU MIGHT LIKE:

SELENIUM SELENIUM SELENIUM

(/handling-dynamic- (/scroll-up-down-selenium- (/upload-download-file-

selenium-webdriver.html) webdriver.html) selenium-webdriver.html)
(/handling-dynamic- (/scroll-up-down- (/upload-download-
selenium- selenium- file-selenium-
webdriver.html) webdriver.html) webdriver.html)
Handling Dynamic Web Scroll UP or Down a page in How to Upload & Download
Tables Using Selenium Selenium Webdriver a File using Selenium
WebDriver (/scroll-up-down-selenium- Webdriver
(/handling-dynamic- webdriver.html) (/upload-download-file-
selenium-webdriver.html) selenium-webdriver.html)

SELENIUM SELENIUM SELENIUM

(/sikuli-tutorial.html) (/find-broken-links- (/object-repository-

(/sikuli-tutorial.html) selenium-webdriver.html) selenium.html)
(/find-broken-links- (/object-repository-
File Upload using Sikuli in
Selenium Webdriver selenium- selenium.html)
webdriver.html) Crea ng Object Repository
(/sikuli-tutorial.html)
https://www.guru99.com/verify-tooltip-selenium-webdriver.html
in Selenium WebDriver: 8/10
12/13/2018 How to Find
How All/Broken
to Verify links WebDriver
Tooltip using Selenium XML & Proper es file
using Selenium Webdriver (/object-repository-
(/find-broken-links-selenium- selenium.html)
webdriver.html)

Selenium Tutorials
42) SSL Certificate Error Handling (/ssl-certificate-error-handling-selenium.html)

43) Handling Ajax call (/handling-ajax-call-selenium-webdriver.html)

45) Execute JavaScript based code (/execute-javascript-selenium-webdriver.html)

46) Using Selenium with Python (/selenium-python.html)

47) Use intelliJ & Selenium (/intellij-selenium-webdriver.html)

52) Flash Testing with Selenium (/flash-testing-selenium.html)

54) Core Extensions (/selenium-core-extensions.html)

55) Using Apache Ant with Selenium (/using-apache-ant-with-selenium.html)

56) Using Selenium with Github (/selenium-github.html)

57) Handling Cookies (/handling-cookies-selenium-webdriver.html)

58) Using SoapUI with Selenium (/using-soapui-selenium.html)

59) XSLT Report in Selenium (/xslt-report-selenium.html)

60) Firefox Profile (/firefox-profile-selenium-webdriver.html)

61) Breakpoints and Startpoints (/breakpoints-startpoints-selenium.html)

62) Selenium Interview Questions (/top-100-selenium-interview-questions-answers.html)

63) Cucumber Selenium (/using-cucumber-selenium.html)

64) Drag & Drop Selenium (/drag-drop-selenium.html)

65) Selenium C# Webdriver (/selenium-csharp-tutorial.html)

66) Creating Object Repository (/object-repository-selenium.html)

67) Scroll UP or Down a page (/scroll-up-down-selenium-webdriver.html)

68) Sikuli Tutorial (/sikuli-tutorial.html)

71) Selenium vs HP UFT (QTP) (/alm-qtp-selenium-difference.html)

72) Selenium Alternatives (/selenium-alternatives.html)

https://www.guru99.com/verify-tooltip-selenium-webdriver.html 9/10
12/13/2018 How to Verify Tooltip using Selenium WebDriver

 (https://www.facebook.com/guru99com/) 
(https://twitter.com/guru99com) 
(https://www.youtube.com/channel/UC19i1XD6k88KqHlET8atqFQ)

(https://forms.aweber.com/form/46/724807646.htm)

About
About US (/about-us.html)
Advertise with Us (/advertise-us.html)
Write For Us (/become-an-instructor.html)
Contact US (/contact-us.html)

Career Sugges on
SAP Career Suggestion Tool (/best-sap-module.html)
Software Testing as a Career (/software-testing-career-
complete-guide.html)
Certificates (/certificate-it-professional.html)

Interes ng
Books to Read! (/books.html)
Suggest a Tutorial
Blog (/blog/)
Quiz (/tests.html)
Review (/best-ergonomic-mouse.html)

Execute online
Execute Java Online (/try-java-editor.html)
Execute Javascript (/execute-javascript-online.html)
Execute HTML (/execute-html-online.html)
Execute Python (/execute-python-online.html)

© Copyright - Guru99 2018

Privacy Policy (/privacy-policy.html)

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