What is Locator | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Interaction with Web Elements
Instructor: Artem Bondar
Lesson Summary
Introduction to Locators in Test Automation If you're new to test automation, understanding what a locator is can be crucial. A locator is essentially a combination of attributes that target a specific element or group of elements on a web page. Finding Locators To find locators, you typically inspect the DOM of the web page. Here are some examples: Email Input Field: Right-click and inspect the element. If it has a unique ID , such as input-email-1 , you can use this as your locator. Basic Form Input: Similar to the email field, if this input also has a unique ID , it can be used directly. Inline Form Email Field: If the element lacks unique attributes (e.g., only has a placeholder ), you need to find a unique value nearby. For instance, using the header text of the form can help you build a locator down to the specific input field. Building Complex Locators For scenarios where you need to locate a group of elements, such as users with a specific age in a table, you can combine several attributes to create a locator that returns only the desired rows. This is the essence of locators in test automation: finding unique attributes around the target element and combining them to build effective locators. Next Steps: In the following lesson, we will discuss locator syntax rules and how to use Cypress to locate different web elements on a web page.
Video Transcript
If you're new to test automation, you may be wondering what locator actually is. I don't have a book definition for you what locator is, but I would call that locator is the combination of the attribute or group of attributes that would target a specific element or group of elements on the web page with a particular properties. Let's look into our test application and I will show you a few of the examples how are we usually looking for locators for web elements. So let's jump into it. So this is the test application and let's say that we want to find the locator for this e-mail input field right here and type something into this field. For that, I need to look in the DOM, of course. So right-click inspect and looking into the DOM. When I look into this, I immediately see ID with the value input e-mail one, and once I found the ID, most likely it's a win because this is a unique element, and I can use the ID as part of my locator to target this element on the web page. So let's see another example. Let's say we take this input field for the basic form. Right-click inspect, looking into this guy, and we see that, hey, this element also has ID, so we're all set. We can pretty much take this ID, making sure that this is unique and use it as our locator. But if I scroll a little bit down and try to locate this element, for example, e-mail field for this inline form, right-click inspect, I look into this guy, and unfortunately, this does not have anything unique. So it's just generic attributes that don't have anything. So it has placeholder, Jane Doe, the next element, this e-mail placeholder is e-mail. I cannot use class because look, the class values are exactly identical for this input field and this input field. So this is also not unique. What would I do in this case? In this case, I need to find something unique around this web element, the target element that I'm looking for, and then from this unique value, traverse down or up to the element that I need. So for example, I can scroll a little bit up and look what I have. For example, inline form. So this is a text that defines my header for the web form. If we scroll down the entire page, we see that this is actually unique value for the entire page. So I can use this header and from this header of the form, build my locator down to the specific input field. This is how the locators technically work. So you find some unique attributes around the element that you are looking for, and combining several attributes here and there, you build the locator. Another example, let's say you want to find a group of the elements. So I'm going to the smart table, and let's say that you need to find a locator that would find for you all users with the age 48. So in our example, we have two users with the age 48, and it is also possible. So combining several attributes here and there, you can build a locator that will return for you only two rows from the entire table. For whatever scenario you may need return two tables, it is possible using the locator strategy. This is what locators are about. So in the next lesson, we will talk about locator syntax rules and how to use Cypress, locate different web elements on the web page. So see you in the next lesson.