Cypress Locator Methods | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Interaction with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore Cypress locator methods , which are essential for locating web elements on a page. There are three primary methods: get , find , and contains . 1. Method Overview get : Locates elements globally on the page. find : Targets only child elements of a specified parent. contains : Finds elements based on their text content. 2. Detailed Explanation The contains method is particularly useful for locating elements by their text. For example, to click on a "Sign In" button, you can use: cy.contains('Sign In') However, it is case sensitive , meaning the text must match exactly as it appears in the DOM. You can disable this sensitivity by passing a second argument: cy.contains('Sign In', { matchCase: false }) Additionally, contains allows for partial matches . For instance, searching for just "sign" will still locate the "Sign In" button. 3. Using Method Find The find method is used to locate child elements. For example, to find a button within a form: cy.get('form').find('button') In contrast, get searches the entire page regardless of context. 4. Summary Method contains : Finds elements by text, supports partial matches, and is case sensitive. Method find : Locates child elements. Method get : Searches globally across the page. Understanding these methods enhances your ability to effectively interact with web elements in Cypress tests.
Video Transcript
Hey guys, in this lesson, we're gonna talk about Cypress locator methods. So Cypress has three methods to locate web elements on the web page. This is method get, method find, and method contains. So let's review all three. And for that, I will start a new test, and I type it.only, because I want to run only this test in this lesson. Cypress locator methods. Okay, my callback function, and here we go. And first of all, let's start with some theory. So method get is created to find elements on the page globally. So we already used this method before, and you already know the syntax that we have to use. So second method is find. This method is used to find only child elements. And the last method called contains. And this method is to find web elements by text, like this. And out of those three, I would like to start with method CyContains. And let me show you some examples about it. So going back to our test application, and let's say that we want to click on the Sign In button by the text Sign In. And keep in mind that this page has two Sign In buttons. This is Sign In 1, and in the bottom of the page, we have Sign In 2. So let's try this method in action. And I type Sign In, and this is the text of the button that we want to click. So let's run the Cypress and see what's gonna happen. So new terminal, npx cypress open. Running the runner, and running the test. Let's see. So Sign In button was found successfully. So if I click on this, you see this button highlighted. But there are several nuances about how this method works. So first of all, CyContains, unlike CyGet, will find a first match on the page for the Sign In button. Unlike Get method, we'll find all elements related to the locator. Even we have two Sign In buttons on the page, you see that Cypress found first match on the page instead of the second Sign In button. The second important detail is what we need to put as a text. You see here we have a Sign In all capital case. But I actually typed here a Sign In like S capital case and the rest is lowercase. But if I try to type something like Sign In and try to run this test again, where's my runner? Here we go, and we have a problem. Expected to find content Sign In, but never did. Why did it happen? Because method contains is case sensitive. It is looking for exact match of the text in the DOM. But you may wondering, but we have all uppercase. Why didn't work right now and work in the previous case? Because we need to look into the DOM, I make right-click, inspect, and look how exactly this text displayed in the DOM. And look, in the DOM, it is displayed as Sign In, like this. So, S capital case and in lowercase. But you can disable this functionality for the contains method. You can pass the second argument over here. So I put comma, put the curly braces, and then there is a match case property, and you can type as false, like this. In this case, you're disabling the matching of the case. And Cypress will search for this text regardless of the case. So let's go back, and right now, the text perfectly found. The same button was identified. Okay, so let me remove this. And also, method contains is looking for not necessary by the full text. You can provide just a partial match for the text. For example, if I just type sign, like this, and let's go back to the Cypress. Look, the same button was identified, because text sign is a part of the bigger phrase sign in. That's why we have a match. So let's try another example. For example, I want to target the email label. We see we have a bunch of email labels over here. And if I type partial match email without email, going back, and look, email label was found. And another interesting detail. You may be wondering, why did it find this email label, but it skipped this email input field? Even this email input field is the first in the page, so contains should pick up the first element on the page, right? But it did not, even the email is visible. Because this text email inside of the input field is not actually a text. This is a property, HTML property. Remember, I mentioned before that some text that you see on the page can be hidden inside of the properties. And particularly, this one is the property, so right-click, inspect. This property called a placeholder email. So if I type, for example, look, hello and updated, and you see the text hello updated inside of the input field. But this is not HTML text, and method contains will not be able to search visible text values like that. What you're looking for is like, for example, remember me, inspect. And look, this is clearly HTML text because we see it in the DOM. So method contains will be able to find it. So, going back to the method contains method, let's go with this sign in with the previous example. And what is also super cool about contains method, that it also accepts the second argument as their locator. So the same syntax that we used before in the previous lesson for the method get. So you can use two arguments, locator and text to locate your web elements more precisely. And here's a good example for that. So on our page, we have two sign in buttons, button number one and button number two. You see they are different colors. So if I check this button, it has the property status primary. And this button, the right click inspect, this has property status warning. So it has a different attribute. So by combining the text and the attribute, we can match the exact button that we are looking for. So let's do this. So if I select status warning, I'll copy this guy. So going back to the code, let me type the second example. So, site contains, and then the first argument will be the status warning. And then I put comma, and the second argument will be sign. It should be in the single quotes. Sign in like this, and let's go back to Cypress. And here we go, this button was found. Yeah, unfortunately, it did not highlight right here because it did not scroll. What if I comment this out? Will it be able to select like this? No, unfortunately, it's not showing that it was selected, but it actually did. So it found this button successfully. But wait a second, if I, no, it's actually selected. Look, if I choose highlights on or off, you see the sign in button also highlighted. So this button found successfully, and this button sign in, the first one was skipped. So everything worked as expected. So what else? Let me uncomment this one. And you can use this feature of two elements provided together for a different locator strategy. For example, let's say that I want to find the entire form. So let me make it bigger. So let's say I want to find the entire form where the sign in button is located by the header of the form. And if I make right click, inspect, and let's see. So look, the header of the form, so let me make it like this. So the header of the form and the actual form, you see nbcard-header and nbcard-body are sibling elements. So if I just target this header, I will not be able from this header to select the, for example, button or input fields within this form, because they are siblings. In order to target the children elements, I need to find more parent element first, like nbcard, for example, and then find other elements inside. So for that, I can find this nbcard based on this horizontal form. So I'm looking like, hey, find for me nbcard that have somewhere text horizontal form, and I combine those things together. So nbcard is HTML tag, and horizontal form is that text. Let's combine those two things together. So I'm typing sci-contains. First argument will be the nbcard HTML tag name, like this. And the second argument will be a text horizontal form. You see, I always trying to copy paste the exactly how values are displayed in the DOM to avoid the mistakes. So horizontal form, and yeah, I guess this should work. Let's go back to Cypress, and here we go. The horizontal form is highlighted. The entire form was selected. And let me unpin this. So this is how powerful the method contains is. You can find by exact match, by partial match. You can combine text and the additional argument to find the exactly element you are looking for. And now let's talk about method find. So method find is used to only file child elements. We're gonna talk about child elements in the next lesson, but this is just the beginning. So let's say that within this form, we know that this is our horizontal form. We already found a big parent element. And then within this form, we want to click on this sign-in button. And since we know that this form has just a single button, we can target it just by the tag name button, and it just should work. And for that, method find will work perfectly fine. So I use method find, and then provide the tag name button like this. And let's go back to Cypress. Here we go. And button, button, you see, it was selected. Sign-in button was selected. All right, what else? The similar trick will work if you would use site contains as well. And we'll try to find the child element by the text, like sign-in. This would work exactly the same way. So first, you would find the horizontal form by mbcard. And as a child element, you chain method contains again. And then within horizontal form, you find the button by text. If in this example, we were looking by tag name, this is searching by text. But this would not work if I would try to use method get. Because method get, it is different from method find. That method get, no matter where you chain this method from, it will always search web elements on the entire page. And look, if I go back to Cypress, and look, it found eight matched elements. So for site contains sign-in, it found just a single element. But for the get button, it found all elements. So all buttons on the page were identified. Even we chain it from the sign-in page. And that's pretty much it about Cypress Locator method. So let's make a quick summary. Method site contains look elements by text. You can use a partial match as well. And site contains always match the very first element on the page. It is important to be a case sensitive for site contains. But you can disable this sensitivity. Site contains also can accept two arguments, such as locator and text you are looking for. Method find is used to find a child elements on the web page. And you can use regular locators for that. You can also chain method contains as find child elements as well by the text. But if you would use a method get, method get always search web elements globally on the entire page. And you use standard locator syntax for those methods. All right, that's it guys, and see you in the next lesson.