Verify toolTip using Selenium Webdriver

In this post, we will see how to verify toolTip using Selenium Webdriver.

Tooltip is the text that appears when mouse hovers over an object like link, button, image etc. Sometimes, it is a requirement in the project to read the tooltip text. This tooltip text provides information related to the object on which it appears.

Objects have different attributes in HTML i.e. object properties and one of them is ‘title’ which contains tooltip text. Selenium’s job is to read that text (title attribute) of the object. Tooltip can appear in static and dynamic way, and both can be seen by mouse hover on the object. Dynamic tooltip  is usually hidden in HTML of the page, and can appear on mouse hover over the object. As mouse cursor is moved away from the object, toolTip entry will also disappear from HTML.

We will see example of both one by one. Let’s start with static tooltip.

Static Tooltip:

Selenium can capture the tooltip by simply calling “getAttribute(‘title’)” method of WebElement and return the text of title which will be nothing but the tooltip.

Let’s take an example from my website. Go to page Selenium Tutorial and you will see the image as shown below. When you will hover the mouse over the image you will see the tooltip that says ‘Selenium Webdriver, Eclipse‘.

If you will inspect this image in browser  ,you will see object title has tooltip text as shown in the snippet below.

 

Selenium Code snippet:

We will use class attribute to make the image object(WebElement) and then we will use getAttribute method.

Output: 

Dynamic ToolTip:

Dynamic toolTip in applications is usually created by jQuery\Javascript plugins. When you hover mouse over the object, tooltip object appears in html and as soon as you take out the mouse from the object, it disappears. So, how will grab the toolTip text then?

The getAttribute(‘title’) will not simply work here as it worked in the above example. In this case, we have to use the ‘Actions class’ of Selenium. Let’s see the example below to capture toolTip.

We have the below application for demo. Click Demo Application Link.

Tooltip

 

If you will Inspect ‘Tooltip Example’ link in HTML, you will see only object related to this link but nothing for toolTip(Highlighted line below).

 

tool tip html

 

Now, once you will hover the mouse over the link, you will see a new entry in html(div tag ) which is nothing but the tooltip and when you will take he mouse out of the link, below div tag will disappear.

You can also click show button to see the toolTip.If you will expand the div tag, you will another child div tag having toolTip text.

 

Tooltip text

 

 

 

 

 

Let’s see the code to get the dynamic tooltip.

Output: 

I am the example of Tooltip.

 

 

HTMLUnit Driver
Shekhar Sharma

Shekhar Sharma

Shekhar Sharma is founder of testingpool.com. He is an automation engineer having more than 8 years of experience who loves troubleshooting in automation and finding innovative ways to solve the problems. His other leisurely activities includes playing harmonica, paintings, sketching portrait, watching movies and travelling etc.

You may also like...

Leave a Reply

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