Child Elements | Bondar Academy

Lesson Summary

In this lesson, you will learn how to find child elements using Playwright. If you're unfamiliar with the terms, refer to the first lesson on HTML terminology for definitions of parent and child elements . Locating Child Elements Playwright provides several techniques to locate child elements. Here’s a step-by-step guide: Create a new test for locating child elements. Inspect the application to identify the structure of elements, such as NBCard and NBRadio . To find a specific child element, use the following syntax: await page.locator('NBCard NBRadio:has-text("option one")').click(); This command finds the NBRadio element with the text "option one" inside the NBCard . Alternative Methods You can also chain locators: await page.locator('NBCard').locator('NBRadio').locator('option two').click(); This method achieves the same result but is more compact. Using User-Facing Locators Another approach involves combining regular locators with user-facing locators: await page.locator('NBCard').getByRole('button', { name: 'sign-in' }).click(); Index-Based Selection While you can select elements by index, such as: await page.locator('NBCard').nth(3).getByRole('button').click(); This method is less preferable due to potential changes in element order. Always aim for more unique identifiers. Summary Use space to separate locators for child elements. Chaining locators is possible but less compact. Combine user-facing and regular locators as needed. Avoid index-based selection when possible. In the next lesson, you will learn how to find more unique elements using parent locators.