In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar explains how to locate child elements on a web page using various techniques provided by Playwright. Here's what you'll learn:

1. **Introduction to Child Elements**:
- **Understanding Child Elements**: Refresh your understanding of what child elements are in the DOM. Child elements are nested within a parent element.
- **Importance**: Learn why locating child elements is crucial for precise element selection and interaction in automated tests.

2. **Locating Child Elements by Space-Separated Locators**:
- **Example Setup**: Create a test named `locating child elements` and navigate to the forms layout page.
- **Locating Example**: Use the `page.locator` method to locate a child element by specifying parent and child elements in a single string separated by spaces.
- **Code Example**: `await page.locator('nb-card nb-radio', { hasText: 'Option 1' }).click()` to locate and click on the "Option 1" radio button.

3. **Chaining Locators**:
- **Chaining Locators**: Another way to find child elements is by chaining the `locator` method.
- **Code Example**: `await page.locator('nb-card').locator('nb-radio').locator('text=Option 2').click()` to locate and click on the "Option 2" radio button.
- **Comparison**: Understand that chaining methods can be more verbose but serves the same purpose as using space-separated locators.

4. **Combining Locators**:
- **Combining Methods**: Learn to combine different locator methods, such as mixing regular locators with user-facing locators.
- **Code Example**: `await page.locator('nb-card').locator('role=button[name="Sign In"]').first().click()` to locate and click on the "Sign In" button.

5. **Index-Based Locators**:
- **Using Index**: Locate elements by their index, which is less preferred due to potential changes in the DOM structure.
- **Code Example**: `await page.locator('nb-card').nth(3).locator('role=button').click()` to locate and click a button within the fourth `nb-card`.

6. **Best Practices**:
- **Avoiding Index**: Understand why it's better to avoid index-based locators and prefer more stable methods like combining locators or using user-facing locators.

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

8. **Summary**:
- **Locator Method**: Use space-separated strings to locate child elements efficiently.
- **Chaining Locators**: Understand the alternative method of chaining locators for element selection.
- **Combining Locators**: Mix regular locators with user-facing locators for precise element targeting.
- **Index-Based Selection**: Recognize the drawbacks of using index-based selection and use it sparingly.

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

Comments are closed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}