Context Location | Bondar Academy
Course: Mastering testRigor
Module: Locating Web Elements
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on using context location to find web elements within a specific area of a web page. The instructor reviews previous concepts such as relative location , rough location , and strict location using the keyword completely method. Key Concepts Context Location : Refers to searching for web elements within a defined area or "box" on a webpage. Web elements can be identified by their class or other attributes in the Document Object Model ( DOM ). Using context helps in accurately locating elements, especially in complex forms or layouts. Example Walkthrough The instructor demonstrates how to: Navigate to the form layouts page. Identify the inline form using its class inline form card . Click on elements like Email , Remember Me , and Submit buttons within the form. After correcting a typo in the Submit button locator, the test successfully identifies and interacts with the elements. Challenges with Non-Unique Classes In cases where elements share the same class (e.g., CallMD6 ), the instructor suggests: Adding unique identifiers or attributes to the HTML for better automation. Specifying which element to select when multiple elements share the same class. The lesson concludes by emphasizing the importance of context location for web forms and tables, with a promise to cover web tables in future lessons.
Video Transcript
All right, so far you already know how to use relative location in a test trigger, how to use rough location, and how to find web elements using two relative locators, and how to use keyword completely to use more strict location or more precise location of web elements. And I wanted to show you one more example, how to use context location to find web elements. So let me show you this example. Navigating to the form layouts page, and remember, initially in our presentation, I talked about the test trigger, see web page as a bunch of boxes. Bigger boxes, smaller boxes, and so on. And if I click, for example, right-click, inspect right here, so this entire form is also a box, right? Or this inline form is also a box. So if we able to define the locator for the entire box we are looking for, we can search for the web elements inside of that box. And this is what it means, searching within the context or in the context. So what we can do for the locator of the inline form, for example. So let's look into the DOM. So I expanded a little bit more and a little bit more. And what we have, so we have a header, which has a text inline form, and the actual card body, which is this one, the form with the input fields. So we cannot use text inline form as a locator for this entire form section. But what we can use, if we go to one level up, we can see that this particular form has class inline form card. And the value for this class can be used to define the context, where we want to find the web elements. So now we can take this class value and then find the values inside of this box to interact with. So let's say we want to click on Email, Remember Me, and Submit button within this form. So let's do this. And I create a new test, Context Location. And as from the previous lessons, we need to repeat the same steps. Click Forms, and click Form Layouts to navigate to this page. And now let's say we want to click on Email, Remember Me, and Submit. So I will copy the value of this class, which is the class for this entire form, and type this. Click Email, and my prompt will be in the context. And I will click Off, and provide the locator, that's it. And now let's do the same for all other three fields. So now I want to click Remember Me, and the last one would be click Submit. So and that's pretty much it, so let's run this test. All right, test completed, and the last step failed because I made a misspell in the Submit text, but we will fix it real quick. So let me show you these screenshots. So now we were able to click Email inside of the form. And also you can see that Test Trigger highlights the section or the context where we find this element, so it is selected for us. And now we can select Remember Me, Remember Me was selected, but Submit was not selected because I made a misspell, so let me fix this. Submit, and Update and Retest. All right, and this time test passed successfully. The Submit text highlighted the section, and this time test passed successfully, the Submit button was clicked successfully. With this inline form, it was pretty simple because this inline form has dedicated class, but how about other form? For example, using the grid, so I make right-click in spec. So this form has a title, but if I go up, it doesn't have a dedicated class, for example, or any other identifiers that we can use. So if we go a little bit level up, we have this class CallMD6, and this one is CallMD6. And if you can see, there are two problems. So first of all, this column has a wider scope, and also the second column has exactly the same class. So a better way in situations like that, if you want to use a context location, is to add your own IDs or attributes into the source code of your application, which you can use later on in test automation. For example, the AttributeDataTestID or any other test-related HTML attribute. But if you don't have this option, you can also use this kind of not unique locators, but just specifying which one you would like to use, first or second one. So let me show you this example as well. So I make quick edit, and let's say that I want to click on email, related to the context of CallMD6, and instead of this, I provide this. And by default, Test Trigger will select the first CallMD6 element that it will find on the page, and also I put that this is the input field, because we have a label over here, email, and we want to click on the input. And let me run this test. All right, test is passed. You can see that entire context of this box was highlighted, and email field was selected. And if I change, for example, context from the first to a second CallMD6, and run this test again, let's see what happened now. All right, let's check a screenshot. And now we can see that the second context was selected. It is highlighted by this square box, but this email input field was selected instead of this one. So let's make adjustment to our locator. And let's say that I want to change the context from the first to the second CallMD6, and instead of this, I provide this. And you can see that the email input field was selected instead of this one. So let's make adjustment to our locator, for example, using the label email address to select this. Quick Edit, Input, Email, Address. And I remind you, Test Trigger will associate the label related to the input field to correctly select the web element. And let's run this test one more time. All right, and this test passed as well. Let's see, an email was selected in the basic form. All right, so that's all I wanted to share with you today. This is how you can use a context location if you want to find elements within the context. A good use case for this kind of prompt in the context of, is for any kind of the web forms or for the web tables. And about the web tables, we will talk later in this class. So see you in the next lesson.