Parent Element

In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar explains how to locate parent elements. This technique is essential when the direct locator for an element isn't unique. Here's what you'll learn:

1. **Introduction to Parent Elements**:
- **Understanding Parent Elements**: Understand the concept of parent elements and why they are useful for finding non-unique child elements.
- **Importance**: Learn the importance of using unique parent elements to locate the desired child elements accurately.

2. **Locating Parent Elements by Text**:
- **Example Setup**: Create a test named `locating parent elements` and navigate to the forms layout page.
- **Locating Example**: Use the `page.locator` method to find a parent element by text and then locate a child element.
- **Code Example**: `await page.locator('nb-card', { hasText: 'Using the Grid' }).locator('text=Email').click()` to find and click the email input field within the "Using the Grid" card.

3. **Using Locator Filters**:
- **Locator Filter**: Filter the parent locator using a unique child locator.
- **Code Example**: `await page.locator('nb-card', { has: page.locator('#inputEmail1') }).locator('text=Email').click()` to filter the `nb-card` by an ID inside it.

4. **Using the Filter Method**:
- **Filter Method**: Learn to use the independent `filter` method for more granular filtering.
- **Code Example**: `await page.locator('nb-card').filter({ hasText: 'Basic Form' }).locator('text=Email').click()` to filter by text.

5. **Chaining Filters**:
- **Multiple Filters**: Chain multiple filters to narrow down the locators further.
- **Code Example**: `await page.locator('nb-card').filter({ has: page.locator('nb-checkbox') }).filter({ hasText: 'Sign In' }).locator('text=Email').click()` to first filter by the checkbox and then by text.

6. **Using XPath for Parent Elements**:
- **XPath**: Use XPath to move one level up in the DOM.
- **Code Example**: `await page.locator('text=Using the Grid').locator('..').locator('text=Email').click()` to go one level up from "Using the Grid" text to its parent and then find the email input field.

7. **Best Practices**:
- **Avoiding Index-Based Locators**: Understand why it's better to avoid index-based locators and prefer more stable methods like text or attribute filters.
- **Combining Techniques**: Combine various locator techniques for precise and reliable element selection.

8. **Practical Examples**:
- **Locating Nested Elements**: Apply the learned techniques to locate nested elements accurately.
- **Real-World Use Cases**: Practice with examples such as locating email input fields within specific forms and clicking buttons within cards.

9. **Summary**:
- **Locator Methods**: Use text filters or locator filters to find parent elements and their child elements.
- **Filter Method**: Understand the benefits of using the filter method and chaining multiple filters.
- **XPath for Parent Elements**: Learn the specific use case for using XPath to go one level up in the DOM.

By the end of this lesson, you will be proficient in locating parent elements using various techniques in Playwright, ensuring precise and reliable element selection in your automated tests. See you in the next lesson!