Locator Syntax Rules | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Interaction with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore locator syntax rules for using Cypress to locate web elements on a webpage. The demonstration utilizes the Playground application, focusing on the Form and Form Layouts page. Key Locator Methods in Cypress The primary method for locating elements is cy.get . This method allows you to search for web elements using various attributes: By Tag Name: Use cy.get('input') to find all input elements. By ID: Use cy.get('#input-email-one') , where the hash sign indicates an ID. By Class: Use cy.get('.input-full-width') , where the dot signifies a class. By Attribute: Use cy.get('[full-width]') to find elements with a specific attribute. By Attribute with Value: Use cy.get('[placeholder="email"]') for attributes that have values. Combining Attributes: Combine multiple attributes without spaces, e.g., cy.get('input[placeholder="email"]') . Using Data Attributes: It's recommended to use data-cy attributes for better test automation, e.g., cy.get('[data-cy="input-email-one"]') . Best Practices When writing locators: Use single quotes in Cypress to avoid conflicts with double quotes in HTML. Ensure there are no spaces when combining attributes. Utilize data-cy attributes for unique identification of elements. In summary, understanding these syntax rules will enhance your ability to effectively locate and interact with web elements in Cypress. This lesson concludes with a successful execution of the tests, confirming the functionality of the locators.
Video Transcript
Hey guys, welcome back, and in this lesson, we're gonna talk about locator syntax rules. How using different HTML properties locate web elements on the page using Cypress, all right, so let's jump into it. And for that, we will use our Playground application, and I will open Form and Form Layouts page. And we'll open the same HTML snippet that I showed you previously in the presentation for this email input field. So I make right-click, Inspect, and this is the input field. And let's assume that we want to locate this input field, or just overall input fields on this page, using different properties related to this web element. So we have different attributes, we have tags, we have IDs, and so on. So how would you do this using Cypress? Let's go back to the code. So this is Visual Studio Code, our test hello world one. And let's start writing here. So how would you find all input fields on the web page by tag name input? So how about that? So by tag, I will make this annotation. And for that, you will use command cy.get. So method get in Cypress is one of three main methods related to searching web elements on the page. And we're gonna talk about those methods a little bit later. But the main methods to search for the web elements is method get. And then inside of this method, as the argument, you provide the expression of a combination of HTML attributes to locate the web elements. And to find element by tag, you simply type the tag name over here into the string, and that's it. So after you execute this code, Cypress will find for you all input elements on this page. All right, moving on. So the next example, how to find by ID. So if we go back to application, look, this input field also has ID and the value is input email one. So I'll double click and copy the value to the clipboard, going back. And to find by ID, I type cy.get, then string with a single quotes. And to tell Cypress that it's gonna be ID, I need to provide hash sign and then value of the ID, right? So you already see the difference. If no hash sign, it's just the tag name. If with hash sign, it means that this ID value, okay. The next example, how to find by class value. So cy.get, and going back to the application. So we have a class and we have a bunch of values over here. Input full width, size medium, status basic, and so on. And we can take any of this class values or all of them if we want. But let's, for example, relocate all elements that have input full width. So I take the value of this class. And to tell Cypress that it's gonna be a single value from the class, I put dot and paste this value. So that's the syntax how to find by the class. Moving on, how to find by attribute. So cy.get and single quotes. So going back into application, and I remind you that attributes are all those values. So it can be input, full width, ID, data CY, placeholder, all those are attributes. Some attributes has values, some attributes don't have. You can search either or, with values or without. Let's say we will search by just full width. So all elements on the web page that have this attribute, Cypress will find those for us. So going here, and to find elements by attributes, I will provide a square braces like this, and just put the attribute name. That's it. Then the next example, how to find by attribute with value. All right, and I type again, cy.get. And inside, and let's say we will take this placeholder email. So I take the attribute and the value. So I take all the thing all together, Ctrl C, and the syntax will be the same. So I just provide the square braces and put this guy, the entire expression. And by the way, the reason why I'm using single quotes over here instead of the double quotes, to avoid the conflict of the quotes over here. Because in the DOM, values for the attributes provided in the double quotes. But if I will put, let's say, double quotes right here, and right here, you see the whole thing is messed up. Because Cypress and VS Code doesn't know, okay, where do I have to stop, over here or over here, and the syntax is broken. So that's why I always use a single quote to avoid those types of conflicts. All right, moving on. How would you find the web element by entire class value? So class, remember, is also an attribute. And a cy.get, and we can take the entire class attribute with all its values and use this as allocator as well. So I copy the whole thing, going back, and I'm using exactly the same syntax, just square braces like this. And Cypress will look for the exact match of the class with all those values. And all elements on the page that have this specific number of values with the class will be returned to you. All right, so what else? How to combine several attributes? So let's say you want to search element by several properties within the same element, so cy.get. And let's say I want to find element by placeholder, and the second attribute by the full width. And what you do is just put them all together, and that's all you have to do. But keep in mind, you don't have to put a space over here. Because if you put space, it's gonna behave differently, and we're gonna talk about it a little bit later. But if you want to combine several attributes as part of the single locator, make sure you don't have a space. And you may have several combinations of that, for example, cy.get. And let's say I will use the tag input, and I will use placeholder email, like this. So this type of combination is also possible. In this case, you will search by the tag input, and you will find all input fields that have placeholder email. All other input fields will be ignored. And the final example is find by data cy attribute. So it is considered a good practice to have in your application the dedicated test IDs specifically for the test automation. I know that sometimes developers don't have time to add it, then it's fine. But if you can add those properties to your application by yourself, or maybe you can ask developers, add those properties, that helps a lot. And in our application, this field has this property, data cy, and, oops, I need to refresh. Data cy, this is this guy, data cy input email one. And the syntax will be exactly the same, because data cy is just the regular property, so I use a square braces. Now, let's try to run all this to see if it is actually working. And for that, we need to make a little adjustment as well. So this page is located on the form layouts page. So before clicking into this input field, we need to navigate to this page. So we need to click on the forms and on the form layout. So let me update the script real quick. And here I will put those steps into the before each. I will use for that method cy contains. So this method is to find elements by the text. Later, I will talk about this method in details. So far, I just put it right here to perform this operation. So I put forms and dot click. Click, and then the next step cy contains. And I will use form layouts. Click, like this. So I hope it's gonna work. So let's run cypress, terminal, new terminal, npx cypress open. All right, using Electron, here we go. Cy test, and let's see what's gonna happen. So yeah, and test pass successfully. Look, we navigated to the form layouts page. Let's quickly review the steps. So look, get input. Number 10 is next to it. It means that cypress found 10 input fields on the form layouts page. Then we go to finding by ID. And ID, of course, a unique element on the web page. That's why we don't have any number over here. Then input full-width, we found 14 properties like that. Full-width, 14 properties as well. Placeholder email, just five input fields. We see number five, and all placeholder emails were selected. Then by class, we found 14 elements like this. Then by combination of two elements, five elements as well. And input with email, five elements as well. And data cy is also a unique element. And you see the input field is highlighted in the browser that it was found successfully. So everything working as expected. Now, let's quickly summarize what we did in this lesson. I will close this, close this. So if you want to find elements by the tag name, you just provide the value of the tag into the method get as the argument. If you want to find by ID value, put the hash sign in front of the value, and cypress will look by ID. If you want to find by class value, put the dot in front of the value. If you want by attribute, make sure you use a square braces and put attribute inside. And the same syntax if you would use attribute with value, use square braces. Class is also the attribute. Remember, we talked about it. So if you want to use by entire class value, use the square braces. You can combine several elements together as part of the single locator. For example, two attributes in the square braces or tag plus attribute. But make sure that you don't have space between those attributes. It should be kind of a single expression. And if you can add data CY attributes to locate your web elements to make them more unique as possible, use this option and add data CY, and also use the square braces to search those attributes. All right, that's it guys, and I'll see you in the next lesson.