Tooltips | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to automate tooltips using Cypress, a popular testing framework. Tooltips are challenging web elements because they often disappear when you try to inspect them. Here's a breakdown of the process: Understanding Tooltips A tooltip is a small message that appears when you hover over a button. However, inspecting the tooltip directly is not possible since it disappears on mouse hover. Steps to Automate Tooltips Set Up Test: Create a new test for tooltips under Models and Overlays. Locate the Button: Use a unique combination of the button tag and its text to find the button. The method cy.contains is useful here. Trigger the Tooltip: Since Cypress lacks a hover method, use the trigger method to simulate the event that shows the tooltip. Identify the event by checking the button's event listeners. Identify the Event: Most likely, the tooltip is triggered by the mouse enter event. Run the Test: Execute the test to ensure the tooltip is visible. You can then inspect the DOM to find the tooltip's location. Validate the Tooltip: Use cy.get to select the tooltip element (e.g., NB tooltip ) and validate its text. Key Takeaways Cypress does not have a direct hover method. Use the trigger method to simulate events, such as mouse enter . Explore the DOM in Cypress to find the tooltip for validation. This approach allows you to effectively automate tooltip testing in your applications. See you in the next lesson!
Video Transcript
Hello, guys. In this lesson, we will talk about how to automate tooltips. It's quite a tricky web element. So let's jump into it. On our test application, under Models and Overlays, we have a page tooltip, and this is the resection. So let's automate this tooltip placements, and the tooltip you see is a little message that shows up when I hover over the mouse above the button. The tricky part with the tooltip, that technically I cannot make right-click inspect above this tooltip to find where this tooltip is located. So once I try to move mouse over it, it's kind of disappearing. And if I just look into the DOM like this, look, this message is not available anywhere. So we just have four buttons, but where is this, this is tooltip is located? I don't know, but I need to validate this tooltip message somehow. And let me show you how to do this. So going back to our test application, I set up a new test, tooltips, models, and overlays. And first of all, we need to find the locator for this button. This will be easy. So we can use just, this is a button tag and text top. It is enough unique combination. So going back, I use sci-contains. I will look for the button with that text. That's it. Now, how to trigger a tooltip? Unfortunately, Cypress does not have method hover, like you know, hover over the mouse, but there are workaround. You can use method trigger and then trigger the event that this button listening to, to show up this tooltip. How to find this event? I am looking at, so this is our button, it's currently is selected, and I'm looking at this event listeners. And this is all event listeners that we have for this element and other elements. And I will remove ancestors. And here we go. This is the list of the events that this specific buttons listen. So it listens for click event, mouse enter event, and mouse leave event. And most likely the tooltip is triggered by this mouse enter event. So I just use this name of the event and the trigger method. So going back, and I use method trigger and use the event name, mouse enter, like this. And let's try to run this test. So going back to Cypress, and you can see the tooltip was selected, it is visible. But if I try to mess around on this page, here we go, it's disappeared. But because it was selected, so like this is the final expanded state of the tooltip, I can gently hover over it and explore the DOM where exactly this tooltip is hiding. So let me refresh this test one more time. And then I carefully hovering over and inspecting element right here in the Cypress. And here we go. This is where it is hidden. So let me do it one more time. Right click, inspect. Here we go. This is this guy. So it is hidden under the NB tooltip tag, couple of spans and right here. So we can safely take this NB tooltip and this is the text. This is a tooltip. So we can take this NB tooltip and use it as our validation. So going back and I use sci-get. This is the NB tooltip and validation should have text. And text is, this is a tooltip like this. Let's go back and running this and test pass successfully, validation pass successfully. So that's pretty much it. So let's quickly summarize what we did in this lesson. Cypress does not have method hover, but you can trigger different events for the button triggering your tooltip. So you would use method trigger and you need to search in the Chrome DevTools, the right event name that is triggered for this tooltip. In our example, it is mouse enter. And then Cypress freezing the DOM at the last step of the execution. And you can explore right in the Cypress runner, this element and find the right locator for the tooltip to validate the message. So that's it. And see you guys in the next lesson.