Tooltips | Bondar Academy

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!