Tooltips usually use a \u2018title\u2019 attribute for an element. The attribute value will be shown as a tooltip on mouse-hover, which is a static text providing information about the element with no styling. To verify tooltip functionality, we often check this attribute value. To implement these \u2018tooltips,\u2019 there are many plugins available. With advanced tooltips, we can implement styling, images, links, and rendering by using JavaScript\/JQuery plugins or CSS Tooltips.<\/p>\n\n\n\n
- \n
- To verify or access the static tooltips that are implemented using the HTML \u2018title\u2019 attribute, we simply use the method getAttribute(\u201ctitle\u201d) of the WebElement<\/a>. For verification, we compare the returned value of this method (tooltip text) with an expected value.<\/li>\n\n\n\n
- For other tooltip implementation forms, we have to use \u201cAdvanced User Interactions API\u201d which is provided by the Webdriver to create the mouse hover effect and then retrieving the tooltip for the element.<\/li>\n<\/ul>\n\n\n\n
A brief introduction about Advanced User Interactions API:<\/p>\n\n\n\n
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. Testers can also use this API to verify tooltip functionality, ensuring tooltips display the correct information during user interactions.<\/p>\n\n\n\n
Let\u2019s see how to use the API for couple of classes and methods.<\/p>\n\n\n\n
S1: <\/strong>The following Packages\/Classes need to be imported to use the API.<\/p>\n\n\n\n
import org.openqa.selenium.interactions.Action;\nimport org.openqa.selenium.interactions.Actions;<\/code><\/pre>\n\n\n\nS2:<\/strong> Create an \u201cActions\u201d class object and build the sequence of user actions like dragAndDrop(), moveToElement(), etc.<\/p>\n\n\n\n
Actions builder = new Actions(driver);\nbuilder.clickAndHold(slider).moveByOffset(40, 0).release();<\/code><\/pre>\n\n\n\nS3:<\/strong> 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.<\/p>\n\n\n\n
Action Actionslide = builder.build();\nActionslide.perform();<\/code><\/pre>\n\n\n\nHow to get the Tooltip Text in Selenium Webdriver<\/strong><\/h2>\n\n\n\n
There are multiple ways of showing the tooltip to the user.<\/p>\n\n\n\n
- \n
- One is with the simple HTML<\/li>\n\n\n\n
- The Second one is with the JQuery Tooltip<\/li>\n<\/ol>\n\n\n\n
Scenario 1: HTML \u2018title\u2019 Attribute<\/strong><\/p>\n\n\n\n
In this case, let\u2019s consider an example of https:\/\/buffer.com\/library\/social-media-icons<\/a>.<\/p>\n\n\n\n
From the above link, we try to verify the tooltip of the \u201cFacebook\u201d icon.<\/p>\n\n\n\n
<\/figure>\n\n\n\n
To get the Tooltip of the Facebook icon we will first find the element and gets its attribute \u2018title\u2019 and verify with our expected tooltip text.<\/p>\n\n\n\n
Since we are assuming the tooltip is in the \u201ctitle\u201d attribute, so we retrieve the attribute\u2019s valve using the \u201cgetAttribute\u201d method.<\/p>\n\n\n\n
\nString expectedTooltip = \u201cFacebook\u201d\n\nWebElement facebook = driver.findElement(By.xpath(\u201c.\/\/*[@id=\u2019post-14586\u2019]\/section[1]\/div\/div[2]\/div[2]\/a[3]\u201d);<\/code><\/pre>\n\n\n\nRight-click on the Facebook icon to get the title attribute.<\/p>\n<\/div><\/div>\n\n\n\n
<\/figure>\n\n\n\n
\/\/get the value of the \u201ctitle\u201d attribute of facebook icon\n\nString actualTooltip = facebook.getAttribute(\u201ctitle\u201d);\n\n\/\/Assert the tooltip value is as expected\n\nAssert.assertEquals(expectedTooltip, actualTooltip);<\/code><\/pre>\n\n\n\nNow, we will create a test case step by step to understand how to verify the tooltip.<\/p>\n\n\n\n
Step 1:<\/strong> Launch Eclipse IDE<\/a>.<\/p>\n\n\n\n
Step 2:<\/strong> Go to File > New > Click on Java Project.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Step 3:<\/strong> Right-click on the src folder and click on the New > class.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Give your Class name as “Test_ToolTip” and Select the checkbox \u201cpublic static void main(String[] args) and click on the “Finish” button.<\/p>\n\n\n\n
Step 4:<\/strong> Invoke the Google Chrome browser and set the system property to the path of your chromedriver.exe file.<\/p>\n\n\n\n
Here is the sample code to set Chrome driver system property:<\/p>\n\n\n\n
\/\/ System Property for Chrome Driver \nSystem.setProperty(\"webdriver.chrome.driver\", \u201c D:\\\\Drivers\\\\geckodriver.exe \");<\/code><\/pre>\n\n\n\nAfter that, we have to initialize the Chrome driver using ChromeDriver Class. Below is the sample code to initialize Chrome driver using ChromeDriver class.<\/p>\n\n\n\n
\/\/ Instantiate a ChromeDriver class. \n\nWebDriver driver=new ChromeDriver();<\/code><\/pre>\n\n\n\nWe will get the below code to launch Google Chrome browser after combining both of the above codes.<\/p>\n\n\n\n
System.setProperty(\"webdriver.chrome.driver\", \u201c D:\\\\Drivers\\\\geckodriver.exe \"); WebDriver driver=new ChromeDriver();<\/code><\/pre>\n\n\n\nAfter that, we need to navigate to the desired URL.<\/p>\n\n\n\n
Below is the sample code to navigate to the desired URL:<\/p>\n\n\n\n
\/\/ Launch Website \ndriver.navigate().to(\"https:\/\/buffer.com\/library\/social-media-icons<\/a>\");<\/code><\/pre>\n\n\n\n
- For other tooltip implementation forms, we have to use \u201cAdvanced User Interactions API\u201d which is provided by the Webdriver to create the mouse hover effect and then retrieving the tooltip for the element.<\/li>\n<\/ul>\n\n\n\n
![\"buffer.PNG\"](\"https:\/\/lh5.googleusercontent.com\/tshEMAuO-7JOxG3DLwQvIx80NdAoCZsKDckWDq-7dw1NzwOJR5zf8oCWbY2BpHX4UjUKdlHunWdWmOb7sYUuaml6XnBW-KbRxH0Rfbux4UYJiHuTUakK1mQ3s5QrEzfGfCaEbiDy3OgabwZUuQ\" "\\"\\"")
<\/p>\n\n\n\n![\"Tool.PNG\"](\"https:\/\/lh3.googleusercontent.com\/gZ1QjOha9W-nYX1Geqmm4Gp0Oko4M1FqIp50VXfoWoCk0fU6Lvw5gjny1tIV5-LLQ6pEPPppnsijsl_FZuiI0_ESCYMDLZJ4O0yb42drluvLO0UzSEijOw7WqaCfAHGiCyTIgLixzOHQLZPe2g\" "\\"\\"")
<\/figure>\n\n\n\n![\"toolinspect.PNG\"](\"https:\/\/lh4.googleusercontent.com\/1zX7vZWXZo-FrdYJhXqf5_FVvm46XJvY0wW2VLnhk_KStE4fZzXyaLdwlYT2Xbfqcmec0iR_PmkOiFyzfye7PJZB40DuKd59NkSCX-sn1WILTDeQjZbKs_X2istvhzgdOwoQqzt7_jwPo2pdoA\" "\\"\\"")
<\/figure>\n\n\n\n![\"mouse.PNG\"](\"https:\/\/lh4.googleusercontent.com\/449GJu4zPsx8nrPovPhhRdYzAcbkm8_5kjzH-tr3hJjM4Gl4VnGhYa9jGeYqI9UDHHyv-kwO7zm1YtZdiesM3V2ZKPY7FxvkTDX1LD80nQ5M2DHFj8-IGqd-csP47i55NdN7pLQCWmfxwJhZ-w\" "\\"\\"")
<\/figure>\n\n\n\n