Скачать или смотреть Playwright with Typescript|UI Components|Tooltips | 20

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.