Child Elements | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Locators and Assertions
Instructor: Artem Bondar
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.
Video Transcript
In this lesson, you will learn how to find child elements. And if you're not sure what is child elements, please check the very first lesson of this section about HTML terminology. I explained the concept, what's the parent element and what is the child element. So Playwright has several techniques how to locate the child elements and I will show you those in this lesson. So let's get into it. So let me create a new test. Test locating child elements. So let's go back to our test application and this is forms layout and using the grid. So let's say we want to find the locator for this option one checkbox. I click inspect and look into the inspect console. So we have a few NB radio buttons, right? So this is not a unique elements and each of the four located inside of NB card. So if I collapse this, so we can find that this is NB card, this is NB card and also if I scroll down, so this is NB card and this is NB card. So what we can do, we can find the NB card, then inside of the NB card, we can find the NB radio buttons and then we want to find the radio button that only has text option one. So NB radio tag is a child element in relation to NB card. And this is what I want to show you how to find the child elements. So going back to the code and I'm typing await page dot locator. So first I want to find NB card. Then in order to find the child element within the same method locator, you just put space and put NB radio. And then inside of the NB radio, we want to find a text. Text is option space one. And we want to perform a click. So let's see how does it work. So I run test and we successfully were able to make a click on option one. Alternatively, how you can find the child elements is also chaining the locators one by one. So for example, await page dot locator NB card, then dot locator NB radio, and then dot locator. And let's say we will use option two, just for example, to click on the second radio button and then perform the click. So let me run this. Yeah, and option two was select. The example number one and example number two are doing exactly the same thing. The difference is that this kind of the syntax is like more compact. So the rule is simple. When you use a locator element and want to find a child element, just separate your locators, each of your locator by space within the string of your locator. And Playwright will search the child elements digging down into the DOM deeper and deeper and then you will find the child element. And Playwright will dig into the DOM deeper and deeper until it will find the desired locator. So let's move on. Another example, let's say we want to find a sign-in button. We already did this before. So where's our application? Here we go. So this is sign-in button and we have two sign-in buttons, button number one and button number two. So what you also can do in Playwright is to use the combination of the regular locator method and user-facing locator. So we can find page locator NBCard and then within NBCard, we want to find a button getByRole. We choose button with name sign-in. So we have two buttons like that on the page. We click first and then we say click and I run it. Yeah. And it worked. We can see that sign-in is selected. So you may be wondering here why we even didn't need to use NBCard over here, right? Here we were able to select this sign-in button just directly without using NBCard. Yes, NBCard in this particular example is not really needed because it doesn't make a difference, but it's just for your reference that if you need to find different elements, nested elements as your child elements, you can mix the usage of the regular locator method and user-facing locator. You can put the different order as well. For example, you can find the more parent locator using getByRole and then within this locator, using the locator method, find the child element that way. And the very last example of working with the child element, and I would say the least preferable approach, page.locator, we will use our NBCard again, is using index of the element, nth, and we provide the index. As we know, we have a bunch of NBCards on the page, and by providing the index of which particular NBCard we want to use, for example, index number three, it means it will be the fourth element from the top of the DOM. Index always start with zero. So zero, one, two, three, it means the fourth element. PlayWrite will find all NBCards, then it will find fourth card from the top of the list, and then we can do whatever we want within this card. For example, getByRole, and we can click on the button, and we don't need to even provide the name for this button because there is just a single button within that NBCard. And if I perform click, I even don't know which exactly card this index is. So let's see what PlayWrite gonna select for us. Okay, it selected the basic form submit button. So probably this one was first, this one second, this third, and probably basic form is the fourth card on this page, and that's why it's click submit. But as I mentioned, this approach, selecting by index, try to avoid this approach because sometimes the order of the web elements can be changed on the web page, and this may result into the wrong element or may result into the wrong element will be selected. The same thing using method first or using method last. Always try to find more unique elements without using index or the order of the web elements. And how to find more unique elements using a parent locators, I will show you in the next lesson. So let's quickly summarize what we learned in this lesson. In order to find the child elements using a locator method, you can simply provide all your locators such as tags, attributes, IDs, and so on inside of the locator string and separate them by the space. Each locator separated by space is considered a child locator in the relation to the locator is in the string before that. You can also chain your commands one by one. Locator find this, locator find this, locator find this, but this approach is not really compact. So if you need to chain few locators using locator method, try to just separate them by space. It looks just nicer. Also you can use combination of the user facing locator and regular locator method and chain those methods one by one as well. If nothing works, you can always find your elements by index, get the index of the element and then interact with this element. Try to avoid this approach as much as possible and index always start with zero. So in this example, it will be a fourth element selected on the page from the top. All right, that's it guys. And see you in the next lesson.