Child Elements | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Interaction with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explored how to locate child elements in the DOM using Cypress . Here are the key concepts discussed: Finding Child Elements The find method is specifically designed to locate child elements. You can chain multiple find methods to navigate deeper into the DOM. Example: Finding a button within a grid layout involves identifying intermediate elements first. Using get and find When targeting elements, you can combine get and find for more reliable tests. Using a space between selectors in get allows Cypress to understand that you are looking for a child element. For direct child elements, use an angle brace ( < ) between selectors. Best Practices Keep selectors as short as possible while ensuring they are unique. Use the contains method to find elements by text. Be mindful of the structure of your DOM to effectively locate elements. In summary, to find child elements in Cypress, utilize the find method, chain it as needed, and consider combining get and find for improved reliability. Use appropriate syntax based on the relationship between parent and child elements.
Video Transcript
Hey guys, in this lesson, we're gonna talk about child elements. So I will show you different syntax that you can use in Cypress to locate child elements in the DOM. Let's get into it. So previously, in the previous lesson, we already used this line, CyContainsHorizontalForm, and find a button. Let me grab this as an example. And I mentioned before that method find in Cypress, created specifically to find the child elements. In this example, we found a button, which is sign-in button within a horizontal form. So that's example number one, and let me modify this. I open the test application, Form, FormLayouts. Instead of horizontal form, I will use different form, which is using the grid. And we'll use this as an example down the road. So in Cypress, you can technically chain the endless number of find element, like digging one step at the time deeper into the DOM to find the exact element that you need. So let me show you the example for that. So this is using the grid, and this is our buttons. Inspect, and let's look into the DOM. So nbCard element for using the grid is right here. And then we have a bunch of child element that kind of cascading down to our button. So we have nbCardBody, then we have a form, then this form has a several div, then this div has another div, and only after that we have a button. So let's say before targeting the button directly, we will find first the intermediate element within this route. For example, any of this divs right here, and the fourth row, row number one, two, three, and four. In the fourth row is actually our button is located. So let's take this class row, and I will do like this. So using the grid, and I put dot find one more time. Then we search the row by the class value, so I use the dot. And then within the row, one of the rows has a button. And then we find child element one more time, and we're calling the button. So let's run this test. This is the Cypress runner running the test, and look what happened. So we found using the grid, then we found four rows. You see a number of matched elements is four, and then the next child element was the button. All right, so moving on. So similar type of syntax would work if we would use, for example, sciget, and we would find, for example, just nbCard. We would find all nbCards on the page. And then let's say that within all nbCards, this is the test application. Let's say we want to target these radio buttons. So where are they located? Right-click Inspect, and this radio button located inside of nbRadioGroup. And then we have nbRadioTags right here. So let's then target, for example, nbRadioGroup. Then I type .find, and I'm looking for nbRadioGroup. And then within this group, I can find any child element, and I can use, for example, contains for that. And I want to find the radio button with the text option one. I remind you, contains is searching elements by text. And going back to the Cypress runner, and look what happened. So nbCard found six elements, because we have six different input cards on this page. Then only one nbCard on the page has nbRadioGroup, so it was identified successfully. And then contains option one, we found the radio button. So this is how the cascading down works. When you chain the commands like this, get and then find, you can actually use a slightly shorter and more reliable syntax combining two locators as part of the get. So let me show you how would you do this. So I'm copying this guy, pasting right here. And instead of using find, I will delete find, and I will take this locator and put it into the get, but using the space. So when I separate two locators inside of the get command or inside of the find command, it would work the same way. When you put the space between them, Cypress will understand it as looking for a child element. So first you find this element, and then somewhere down in the DOM, I want to find the nbRadio. And then after nbRadioGroup, we are looking for contains option one. So when you have a situation like this, that when you find first a parent element using get, and then you want to find child element using find, try to combine those into a single locator inside of the get. This makes your tests more reliable. And this related to retriability and auto weighting feature of the Cypress, how Cypress work. And we're gonna talk about it a little bit later. And this type of syntax would work if your child element's somewhere deep in the DOM in relation to the parent element. But sometimes you may need to find a child element that is in direct relation with the parent element, means that it is the very first level after the parent element. Sometimes you may need this. In this case, you would use a syntax like this. So let me copy this just to speed up. And instead of space, you would put this angle brace like this. And look, if I go back to Cypress one more time, and right now element is not found because we're telling Cypress, hey, find NBRadioGroup that is directly under NBCard. And that's not the case, so it didn't work. So let's find the example that would work for this situation. Let's say we're gonna use this inline form and right-click Inspect. And this is NBCard and the direct child element for NBCard is either NBCardBody or NBCardHeader. These are the direct child elements. So I take NBCardBody, for example, going back and putting here NBCardBody, like this, going back to Cypress. And here we go, right now, six NBCardBodies were found. And you can use this syntax with endless number of the child elements in this sequence of the elements within the get. So for example, that within this form, we want to find now the, let's say, this email, right? And we can target it, for example, by the placeholder. Let's take the placeholder, placeholderEmail, Ctrl-C. I'm going back and I provide this placeholderEmail. Going back to Cypress, and here we go, the element was found. And since we have five emails on this page, it found those emails for the five boxes, okay? But if we will replace with something more unique, for example, placeholderJaneDaw, I'm copying this guy and replace placeholder instead of email to the JaneDaw, going back. And now this element is uniquely identified as a input field with a JaneDaw. So that's about it. And one quick note that when you build your selectors, you not necessarily need to build these kind of long locators, including all the parent elements and so on. When you build selectors, try to make them as short as possible. So for example, in this particular case, I could safely remove this nbCard and then nbCardBody and just leave placeholderJaneDaw to target that input element because this placeholder is unique for this page. So I don't need all those other locators inside of the selectors to target this input field. But sometimes you may have more sophisticated UI interfaces when you need to find first a parent element that is unique. Maybe this is ID or some test identifier. And then from this unique element, you will target down the exact child element that you need. And this is the syntax that you can use. So let's quickly summarize what we did in this lesson. To find child elements in Cypress, you would use method find. You can chain as many find methods as you need to chain down the road the child elements. Method contains can be used to find child elements by text. And method find can be chained from method get to find elements as well. If you use get and find methods together, it is recommended to put all selectors as part of the get, separating them by space. If you want to find the direct child element in relation to parent element, you can use the angle brace separating two selectors. If you want to find any child element in relation to the parent element, just put the space. And you can put as many number of the elements in this sequence. For example, this is three elements right now, creating the sequence of search for the child elements. All right, that's it guys, and I'll see you in the next lesson.