Tooltips | Bondar Academy
Course: Mastering testRigor
Module: Interation with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we focus on the automation of tooltips within a test application. Tooltips are elements that display messages when hovering over buttons, but they can be challenging to inspect directly. Key Concepts Tooltips : Messages that appear when hovering over UI elements. Relative Location : Essential for automating tooltip interactions since direct inspection is not possible. Automation Process To automate tooltip validation, follow these steps: Navigate to the Models and Overlays section and select the tooltip page . Use the command hover over to interact with the desired button. Make assertions to check the tooltip message is displayed correctly. Example 1: Tooltip Above a Button For a button labeled top , the following command is used: hover over top Assertion: check that page contains "this is a tooltip" above top Example 2: Tooltip to the Left of a Button For a button labeled left , the command is: hover over left Assertion: check that page contains "this is a tooltip" to the left of left Both tests passed successfully, confirming that the tooltips were displayed as expected. This approach simplifies working with tooltips by using the hover over command and making assertions based on their relative positions. That's it for this lesson. See you next time!
Video Transcript
In this lesson, we will talk about automation of the tooltips. So let's get into it. So here is our test application. And if we navigate to the Models and Overlays, there is a tooltip page. So the tooltip is this type of the element. So when I hover over different buttons, you see the little message pops up. And when I remove the mouse, it goes away. So the problem with this type of the element that I cannot, let's say, right-click and inspect on this to find out where is it located, maybe find out some attribute or something like this. So to automate this type of the elements, we need to use just a relative location. And let me show you a quick example how to do that. So I create a new test. And we need to navigate first to our page, which is Model and Overlays. And click on the tooltip page. So now, let's say that we want to hover over this top button and validate that this is a tooltip message is showed up. How to do that? So the prompt is very simple. So you have a command, hover over the tooltip page. And then we need to make the assertion that the text, this is tooltip, displayed. Check that page contains, this is a tooltip message. And then we need to make the assertion that this is a tooltip message. Check that page contains, this is a tooltip text above top. And this is exactly what is going on. The button with the text stop and above this button, we have a text, this is a tooltip. And look at the prompt for the assertion. We check that entire page contains this above this particular button. So, TestRigor will look into the page above the particular element to perform the assertion, and let's run this test. All right, test passed successfully, now let's look at the screenshots. So, hover over top, we can see that the correct button was identified, and then assertion worked as well. So, we validated that page above the top has message, this is a tooltip. So, pretty simple, pretty straightforward approach. And let me show you one more example, just to demonstrate it a little bit. So, now let's say we want to hover over the left button, and the tooltip, this is a tooltip, should be on the left from this button. And let's do this. So, I just copy-paste for simplicity, hover over left, and then we validate that page contains, this is a tooltip, to the left of left, and let's run this. All right, test pass successfully, let's check it out. So, this is a previous screenshot when we validated this is tooltip above the top. And the next screenshot is the tooltip to the left of the button left. So, it worked as expected. So, working with the tooltip is pretty straightforward process. You just use command hover over, and then make assertion on the entire page using page contains and location of the tooltip in relation to other elements. All right, that's it, guys, and see you in the next lesson.