Relative Location | Bondar Academy
Course: Mastering testRigor
Module: Locating Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to find web elements on a webpage using Test Trigger . We will practice the concepts discussed in the previous lesson through hands-on activities. Finding Web Elements To locate web elements, follow these steps: Right-click on the desired element and select Inspect to open Chrome DevTools . In the Elements tab, observe the DOM structure of the webpage. Hover over elements to see their highlighted boxes and details, such as padding and size. Performing Click Operations To interact with elements, we can use unique identifiers. For example, to click on the radius button , we can create a custom test case: click forms click form layouts Since "forms" and "form layouts" are unique, Test Trigger can identify and interact with them directly. Using Relative Locators When clicking on elements like labels or input fields, ensure the identifiers are specific: click password above radius click email above radius To specify an input field, use: click input password to the right top of radius Advanced Element Selection In cases with multiple similar elements, such as submit buttons, use additional context: click submit to the right of remember me For elements without visible identifiers, utilize attributes like ID or CSS selectors : click status danger Conclusion This lesson demonstrated how to locate web elements relatively and effectively using Test Trigger . By leveraging unique identifiers and understanding the DOM , you can enhance your testing accuracy.
Video Transcript
In this lesson we will perform some practice activities and I will show you how you can find web elements on the web page using Test Trigger. So all the examples that we discussed in the previous lesson we will put into some practice. So let's get into it. So this is our test application and first of all let me show you how you would find the boxes for the web element. For example you would like to know what's the box size for the user in the grid. You perform the right click, inspect and then in the Chrome DevTools on the elements tab you can observe the DOM structure of the web page. And when you hover over the mouse above the different elements the Chrome browser highlights for you the boxes for each of the element. And when we hover over above using the grid you can see this box is highlighted. And if you go to the right to the computer tab you can find the details about this box. That this element is this one. It has a padding which is pushing the box out. So the ultimate box for this web element will be this size of the box. And for example the radius. Right click, inspect and the same thing. Here is the label for the radius button and the box is highlighted. So now let's perform some click operations to the different web elements on this particular web page in relation to the radius button. For example clicking on the labels, on the input fields buttons and so on. Why would we use a radius? Because it has a bigger box for the nice demonstration and also radius text is a unique text on the web page. So when you locate the web elements on the web page you always want to find something unique on the web page and it can be your target element that you find other elements in relation to it. So let's do this. We go to the test trigger and we click on this button add a new custom test case and provide the name for the test case. For example relative location of web elements. And first of all we need to navigate to this form layouts page. So what we need to do is click first on forms to expand the menu and then form layouts page. So I type click forms and then click form layouts. So I provided the command and in the double quotes the text that I want to interact with. And as you can see that's all that I have provided. I don't need to provide any other relative locator information because forms and form layouts text are unique text for this page. There are no other forms or form layouts on this page. So test trigger will identify this as a unique element and click it right away. So pretty easy. And now the next step let's for example select email label and password label above the radius and just perform the click on those labels. Let's see what happens. So I type command click password above radius and click email above radius. That's it. And let's run this test. So I click the button add and run. New test case will be created and immediately will begin execution. So we see it is in the progress. Here we see the status setting up. If I click on this arrow down we can see the execution will show up in a second. So all the test executed in the cloud and here the test trigger will show us the screenshots of the test execution. Here we go. This is the execution in the progress. And test was successfully finished. So now let's review the screenshots one by one. So I click on the screenshot zoom in. So the application was opened. Then we click on the forms. Then expand that menu. We click on the forms layout. Then forms layout page is opened. And now look at this interface. So when you look at the screenshots test trigger highlights the details how it acted on the page for you to easier to debug. So test trigger identified the box for the radius element. It's highlighted by these lines. We specified that we want to click on the password above the radius. And it's highlighted those vertical lines which gives you the idea of the direction where test trigger looked to to find the password label. And now it click on the password. And also look where the click happened. It did not click on the password text itself. The click was performed in the middle and in the center of the box that is related to this element. Okay so this is important to understand. And make the next screenshot. And the next screenshot we clicked on email label above the radius. And again test trigger highlights the vertical lines to give us the context where the click was performed and why it was performed over here. And that's it. Now let's look into the second example. So let's assume we want to click into this password field. Because we have password field over here. Password over here. And we want to click specifically on this one. And we want to do it to the right top of the radius label. We don't want to interact with this one. So let's write this code as well. And for this purpose I can update the existing test case by either clicking edit test case. So the new tab will be open with the steps that I can edit over here. And then see the rounds of execution. Or the quickest way which I like to do is just click quick edit to update the test. So now let's create one more action over here. So click password to the right top of radius. And now let's see what happened. Update and retest. Test trigger setting up a new test run. And we will see a new test execution in a second. All right. Test was completed. So let's look what just happened. If we look into these screenshots we see the radius box was selected. Then the corner top right off was selected. But the password which was selected is this label. Not the input field that we wanted to select. Why did this happen? Because test trigger prioritized the text values over other visible values on the web page. Password for this input field is not the text. It's a placeholder for the input field. And you can find this out by looking into the DOM. For example right click inspect. And if I look into the details of the input field you can find this placeholder attribute password. You can always find the elements by the placeholder. As I mentioned in the previous lecture placeholder is one of the attributes that test trigger will look into it as well. But the text has a higher priority. And since this area has two password text we have actual text and placeholder. Test triggers select the text over the input field. And if you want to specify hey we want to select this input field instead of this label we can update our prompt. Make it a little bit more specific that we want to select the input field specifically. So let's make a quick update. Instead of click password to the right of radius we type click input password to the right top of radius. Update and retest. Alright test was completed. Let's check it out. And now password input field was selected successfully. And one more time look that click was performed in the middle of the input field box. So this is how you differentiate between the types of the elements adjusting your prompt selecting the type of the element that you are looking for. Alright so let's move on to the next example. Let's say we want to click on this submit button because we have several submit buttons on the page. We have submit over here. We have submit over here. We have submit over here. So if we say just click submit it will not know what to do and most likely we'll select the first available button which is this one. But if you want to select this specific button we can say something click submit to the right of remember me. So let's try this out. Click edit and for example click submit to the right of remember me and update and retest. Alright let's check it out on the screenshot and we see the picture that we expected. So first we found the remember me and we click submit to the right of remember me. You also see those horizontal lines where test trigger was looking for to find the submit button. Alright so that worked also successfully. So now let's look into one more example. So we have again submit button like this like this and like this. Imagine that you have some other scenario where you don't have any relative locator like text or something near the submit button that you want to select. But you also can use the locator which is not visible to you such as ID, CSS selector or other attributes. So you can see that these buttons has a different color and if we look into the properties of this button so for example looks inspect and to submit and we see CSS has status primary class over here status primary and if we hit over here inspect this one has class property status danger. So we can say something click on status danger to select this button and it will work because test trigger will first of all search for status danger text anywhere on the page and when it will not find the text status danger it will look to other types of the properties on the web page including CSS to locate this web element and let me show you this example. So let's say we type click status danger so we provide the value of the CSS and we not necessarily need provide the entire value of the class we can provide just partial value we can provide just danger and it also work so I will put status danger for this example and also we can provide that this is a button so let's type this is a button status danger and let me run and retest. And let's check the screenshot here we go we can see submit button was clicked so again you can use attributes that are not visible to you for example ID or CSS in using those attributes in some corner case scenarios you can interact with the web elements as well and let's do one more example so let's say we want to interact with this email label right here but we may have a confusion with but we may have a confusion because we have placeholders over here inside of the input fields and by providing the type of the web element we can specify which one we want to select so for example we want to click on this label and then we want to click on the input field email as well so how would we do this so I would type something like click label label email and the same click but input email but for the second email if I will try to run this command just like that most likely it will select this email because it's in the top of the page it's also input field but we need to specify the email which is in user in the grid form over here so we can say below using the grid in this case only this email will be selected so let's type here click input email below using the grid and let's run this test so all right the test was completed and let's check into these examples so first we clicked on email label it was selected correctly and then we clicked on input field and one more time you can see that box for the form was found and then horizontal lines define the section where we wanted to look for the email input field so everything worked correctly all right that's it for this lesson I showed you the examples how you can relatively locate the web elements in relation to other unique elements how the lines horizontal lines around the box created by the test trigger and how you can use those lines to define where exactly on the page you want to find the web elements see you in the next lesson