Tooltips

In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar explains how to automate interactions with tooltips. Here's what you'll learn:

1. **Introduction to Tooltips**:
- **Overview**: Learn how to find and automate tooltips, which can be tricky as they disappear when trying to inspect them.
- **Setup**: Navigate to the Tooltip page in the test application.

2. **Challenges with Tooltips**:
- **Inspection Difficulty**: Tooltips disappear when attempting to inspect them, making it hard to locate their DOM elements.
- **Freezing the Browser**: Use a trick to freeze the browser to inspect the tooltip.

3. **Freezing the Browser to Inspect Tooltips**:
- **Freezing the DOM**: Use the browser's debug mode to freeze the DOM and inspect tooltips.
- **Steps**:
1. Hover over the element to display the tooltip.
2. Press `Command + \` (Mac) or `F8` (Windows) to freeze the browser.
3. Inspect the frozen state to locate the tooltip element in the DOM.

4. **Automating Tooltip Interaction**:
- **Navigating to the Tooltip Page**: Set up navigation to the Tooltip page in your test.
- **Locating and Hovering Over Elements**:
- **Example**:
```javascript
const tooltipCard = page.locator('nb-card').filter({ hasText: 'Tooltip positions' });
await tooltipCard.getByRole('button', { name: 'Top' }).hover();
```
- **Creating Locators**: Create locators for the tooltip card and buttons.

5. **Performing Assertions on Tooltips**:
- **Finding the Tooltip Text**:
- **Example**:
```javascript
const tooltip = await page.locator('nb-tooltip');
await expect(tooltip).toHaveText('This is a tooltip');
```

6. **Practical Examples**:
- **Interacting with Tooltips**: Demonstrate how to hover over buttons to display tooltips and verify their content.
- **Handling Tooltips Without Roles**: Use regular locators when tooltips do not have ARIA roles assigned.

7. **Summary**:
- **Freezing the Browser**: Use browser freeze techniques to inspect dynamic tooltips.
- **Using Hover**: Employ the `hover` method to trigger tooltips.
- **Locator Assertions**: Validate tooltip text using locator assertions.

8. **Key Techniques**:
- **Freezing the Browser for Inspection**: Use `Command + \` or `F8` to freeze the DOM and inspect tooltips.
- **Simulating Hover Actions**: Use the `hover` method to interact with elements that display tooltips.
- **Validating Tooltip Text**: Use locator assertions to verify the content of tooltips.

By the end of this lesson, you will be proficient in automating interactions with tooltips, ensuring your automated tests accurately reflect user interactions with these elements. See you in the next lesson!