Tooltips | Bondar Academy

Lesson Summary

In this lesson, we explored the concept of tooltips and the challenges associated with automating them. Tooltips are small messages that appear when hovering over elements, but they can be tricky to inspect and automate due to their transient nature. Key Points Covered Tooltips appear next to buttons when hovered over, but disappear when the mouse is moved away. Inspecting tooltips directly is not possible since they vanish quickly. To inspect a tooltip, you can freeze the DOM in your browser: Navigate to the Sources tab. Hover over the tooltip to display it. Freeze the DOM using F8 on Windows or Command + Backslash on Mac. Once the DOM is paused, you can explore the elements to find the tooltip structure, typically identified as nb-tooltip . Automation Techniques To automate the tooltip, use the getByRole method if a role is assigned to the tooltip. Alternatively, use a regular locator, such as nb-tooltip , which is likely unique on the page. To trigger the tooltip, interact with the button using the hover method instead of click . Perform locator assertions to validate the tooltip text once it is displayed. In summary, to automate tooltips, freeze the DOM to inspect them, use the appropriate methods to trigger and validate their display, and ensure to use correct locators for assertions. This wraps up our lesson on tooltips!