Tooltips | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
Lesson Overview: This lesson focuses on automating tooltips in web applications, addressing the challenges of locating and asserting tooltip text. What are Tooltips? Tooltips are small messages that appear when a user hovers over a button. They can be difficult to automate because they disappear from the DOM when not hovered over. Challenges in Automation Tooltips are not visible in the DOM when inspected directly. Right-clicking to inspect tooltips can lead to them disappearing, making it hard to find locators. Solution to Locate Tooltips To effectively locate tooltips, follow these steps: Open the Sources tab in the browser. Hover over the element to display the tooltip. Use the keyboard shortcut Command + \ (Mac) or F8 (Windows) to freeze the browser. Navigate to the Elements tab to explore the tooltip's structure. Automating Tooltip Validation To automate tooltip validation: Navigate to the tooltip page in your test framework. Create a locator for the tooltip card using: const tooltipCard = page.locator('NB card that has text'); Use the hover method to trigger the tooltip: await tooltipCard.hover(); Locate the tooltip using: const tooltip = await page.locator('NB tooltip'); Assert the tooltip text: expect(await tooltip.textContent()).toBe('This is a tooltip'); Key Takeaways To summarize: Use the freeze method to inspect dynamic tooltips. Utilize the hover method in Playwright to display tooltips. Assert tooltip text using locators or generic assertions. Thank you for watching, and see you in the next lesson!
Video Transcript
In this lesson, we will talk about how to automate tooltips. So tooltip is a very tricky type of the web element because it disappears from the page when you try to inspect this element and try to find the locator for this element. So in this lesson, I will show you how to overcome this and find the locator for the tooltip and as well as how to perform assertions of the tooltip text. So let's get into it. So what is the tooltips? Go into the model and overlays and we have a tooltip page. And tooltips are these little messages that pops up near the button like that when you hover over the button. So what's the difficulty to automating this? The difficulty is that I can't really click a right click and spec above this because it's just disappearing from the DOM. So if I make a right click and spec, it's just to try to find out where this tooltip is located in the DOM. So I'm scrolling it a little bit down and look what happens. So if I hover over this, for example, top button, we see that something happens in the DOM. The small div is highlighted. If I open this, I don't see anything related to the tooltip. I don't see any message. And if I hover over this again, this DOM collapses again. And I can't explore this deep enough and to understand, okay, where is it hiding? So how to overcome this? Find the element and then eventually automate the tooltip and the message that shows up on the tooltip. So here's the trick. You go to the sources tab, then hovering over mouse to shows up the tooltip and then click combination of command backslash or command on windows is F8 to freeze the browser. So that's it. Browser is freeze right now, it is in the debug mode. And then we can go back to elements and then we can explore this section for more details to find out what is it's actually inside and here we go. And this is our tooltip. It has NB tooltip tag and if we open a little bit deeper, we can find and this is our message. This is a tooltip. This is what we want to make an assertion for. So let's automate this scenario to validate the tooltip for the top button. Going back to our framework and creating a new test. So first thing we need to navigate the tooltip page and I will take the example from the previous lesson of the checkboxes, these two steps. And instead of toaster, we need to navigate to the tooltip page. Okay, then we need to create a locator for the NB card, which is this card. And then within this tooltip places box, we will find the button with the text top. So let me do this. Const tooltip card equals to page.locator NB cards that has text. And I'm copying this text from the page. Okay, and now we want to interact with this button, right? Click inspect and what is it? So this is just a button, right? And we can identify it by the text because top text is unique for this particular area. Wait, tooltip card.getPyrollButton that has name. That has name top. And in order to simulate the similar way how we do with the mouse, hovering over the mouse, we have a special method that's called hover. Hover, okay, that's it. So let me run this test. Tooltips. Okay, I think on this screenshot, it's not visible. We see that hover is happening, but tooltip is not displayed just because this is a snapshot. Let me run the actual browser. So, yeah, and we can see that tooltip was displayed. So I'm running this one more time. And if I'm not moving the mouse after the test, we see the tooltip is displayed. But once I start moving the mouse, it's displayed. So it is working. Usually, the way how you can identify the tooltip is using getPyroll and having a special role, which is a tooltip. It exists in the playwright. But it only would work if you have a role tooltip created. So your web element should have a role tooltip. Unfortunately, in our example, this role was not assigned to the web element, so we cannot use this getPyroll. So we will use just a regular allocator and be tooltip that we identified before. And I type const tooltip equals to await page.locator and be allocator. So we have page.locator and be tooltip. This is locator that we found in the DOM for our tooltip. And we want to take text content and make assertion. So let's say, tooltip equals this is a tooltip. Okay, that's it. Let me run this one more time. Okay, we see our tooltip and the test passed successfully. So everything is working as expected. And let me quickly summarize what we did in this lesson. In order to locate the tooltip, sometimes it's challenging to identify the right locator. So you can use a combination of command backslash on Mac or F8 on Windows to freeze the browser in order to find out the tooltip which is dynamically shows up and hiding in the DOM. In order to simulate the hover over the button to trigger the tooltip to show up, you can use method hover in the playwright. If the tooltip role is available in the DOM, you can use get by role tooltip to get the locator for your tooltip. And the assertion of the text is very simple. In our example, we use just generic assertion, but you can use locator assertion as well. All right, that's it guys, and see you in the next lesson.