Elements Location Rules | Bondar Academy
Course: Mastering testRigor
Module: Locating Web Elements
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on understanding how Test Trigger interacts with web pages, specifically how it perceives elements as a series of boxes . This foundational knowledge is essential for creating effective prompts. Key Concepts Web Page Representation: Test Trigger views a web page as various boxes, each containing elements like titles, input fields, and buttons. Element Inspection: Use Chrome DevTools to inspect elements. Right-click on an element and select Inspect to see its box representation and layout attributes. Relative Positioning: Commands can specify the location of elements relative to others using keywords like above , below , to the right of , etc. Overlap Rule: For Test Trigger to select an element, there must be at least 30% overlap with the targeted box. Attributes and Interaction Elements can be identified not only by visible text but also by attributes such as data-tid , id , or class . This is particularly useful when elements lack visible text. Types of Web Elements Test Trigger recognizes nine types of web elements, including: Text Label Button Link Input Dropdown Checkbox Radio Button File Input Prompt Structure The basic prompt structure consists of: Action Command + Action Target + Target Location Example: click button sign in below the password Understanding these principles will enhance your ability to create effective prompts for Test Trigger. The next lesson will involve practical activities to apply these concepts.
Video Transcript
In the previous lesson we created a sample script and I already showed you how using prompts test trigger can interact with the web page Creating the test automation, but there are certain rules behind those prompts that you need to know about So you need to understand how test triggers see the web page and how it interacts with the web page So you can efficiently build your own prompts and test trigger will understand your prompts immediately So in this lesson, we will talk about some theory behind the test trigger how test trigger work with the web pages So let's get into it So let's take this page from the test application as our example This is the form layouts page and for us as for the humans We see this page as like titles of the text some input fields menu items Those menu items has a little offset to the right We have radio buttons and so on but how test trigger see the web page It see the web page as a bunch of different boxes with the elements and content inside For example inline form is the box of size like this Every menu item also has own box using the grid is also a bigger box That has some contact and all those boxes has inner boxes as well For example the title for the form using the grid is also a bigger box inside of that Email input field and password also a box labels for email password is also boxes every option Radio button also box signing button is also a box So test triggers see the content of the page is a bunch of boxes bigger boxes and smaller boxes So let me show you another examples. This is the email and password input field and radio Buttons, so every radio button is the own box But the content inside of each box is also a smaller box inside of it For example option one has its own box But even the icon for the radio button even it is a circle it is within The box and you may be wondering how do I know about the size of those boxes? So if you go to the chrome dev tools So make a right click on the element that you are interested in make a right click and click inspect In the elements tab of the chrome dev tools If you hover over the mouse above the element that you are looking for, for example, we are interested in this label Particularly so it will highlight for us in the browser the box that is related to this particular element And also you can see this box has kind of two shadows, right? And why is that it's because how the layout of the page is Designed if you go to the computer tab and open the layout of this particular element You can find out that this is the element itself and it has the padding inside 6 pixels top and bottom padding and 24 pixels Padding to the right which pushes the border of the box a little bit out and that's why here In the chrome dev tools, you also see that 6 pixels top and the bottom and 24 to the right So the actual box for the option 1 radio button is this bigger box which test triggers see exactly like that Here's another example Radius label for the option 1 and option 2 radio buttons So the radius is actually a little text right but the box for this radio button is significantly Bigger it is covering a much bigger area and here's why it is important As I mentioned earlier test trigger see the web page as a bunch of boxes little boxes smaller boxes and so on And when you locate the element in relation to other element, for example We want to find some other elements in relation to radius text on the page Test trigger will create the invisible lines around the box where the element is located And then within the areas around these lines you can locate the target elements that you would like to find For example, let's say we want to click on the password label Above the radius button because we have password over here We have password over here and we need somehow to specify which exact password text We are interested on this web page and we can provide something like this Click password above radius. We can use a keyword above in our prompt And this will specify that we are interested in the password label Specifically above the radius and test trigger will look within the lines strictly above this box If you want to find some element below this box You just use keyword below if you want to find some element to the right you use to the right of for example We want to find option one radio button in relation to the label radius We would say something like click option one to the right of radius And test rigor will look to the right side of the box strictly within these horizontal lines And we'll select everything what is located inside of this area The same if you want to select something to the left and we have other corners such as on the right top off On the right bottom off. For example, you want to click on this sign-in button in relation to radius You can say something like click sign in on the right bottom off radius Test trigger will look into the lower right corner of the radius box and will select the sign-in button Then on the left top off and on the left bottom off Another command is near So if you're looking for the element which is near the target element that you are looking for Then test rigor will create the box 100 by 100 pixels around your target element And everything what is within this area can be targeted and located So let's talk about one more example So previously I mentioned that we can click for example Click the password above the radius, right? And it will work or click email above the radius and it will select this particular label But if we will try to click click using the grid above the radius, it will not work So even the using the grid located strictly above the radius and it is within these vertical lines That test trigger creates invisibly It will not work because the box for using the grid Is much bigger is this one? And it will not work because we have just partial overlap with the section that we are looking for And test rigor has a rule that at least 30 overlap should happen for the web element in order For it to be selected you so you just need to understand how the mechanism is working in the test rigor you may have a situation when the elements are overlapping and if you Trying to select the element and it doesn't work Maybe the box that you are targeting is bigger than the actual visible element that you see on the page So if we put the scale 1 to 10, we can see that this box is roughly about 20 25 Of the size so and the test rigor has the rule of 30 That's why using the grid will not be selected but you can override this command something like click at least 15 overlap above the radius and in this case it will work This command is pretty rare case that you're going to need but i'm showing you this example just for your Understanding how the grid system of the test rigor and locating of the elements in relation to other elements works in test rigor So moving on now, let's talk about attributes So this is the piece of html code related to email input field so we can see this is our label This is the text of email label and this is the input for the actual input field for the email and Div label this is html tags and what is inside such as class for Type and the input placeholder. This is all Attributes and from the test rigor perspective even label is a attribute. So why is that important? Because when you locate elements on the web page, you always should specify the elements from the end user perspective So usually you interact with different kind of text that displayed on the page. This is how users see the page, right? So if we want to click on the button You want to click on the text located on this button if you want to select the menu you want to select on the text Displayed on that menu, but sometimes it's not an option Sometimes you need to interact with the element that doesn't have any visible text For example, you need to click on particular icon or something like this in this case You can use attributes that are not visible for the human on the web page But visible for the test trigger for example data tid test id Regular id resource id if any of these attributes included into the html code of your application You can use those values of those attributes to interact with the web elements or for example, you can use area label Or css value of the class or alt source value for the web element So this is just an additional option that you have normally you should always use the text on the page and prioritize The visible to end user web elements, but if it's not the case, you can use ids css or other hidden Attributes also test trigger has different types It's nine types of different web elements and those elements are text label button link input drop down checkbox radio button and file input for example, you have on your page the button password and Input field password in this example You can differentiate them by specifying which type of the element you want to specify for example Input password it will click into the input element with the text password or click button password It will click on the button with the text password. This is how it works And here is the basic prompt template that you can follow in order to build your prompt So basic template should look like this So first is action command then you add action target and then the target location So here's the example click button sign in below the password Click is your action command button sign in is your action target because this is the element that we want to interact with And then below password is the location where the button that we're trying to interact with is located Another example enter hello into password enter is the action command. Hello is a target This is a text that we want to enter and into password. This is a location We can say something into input password if we want to specify that this is the input field In case we have for example button password displayed on the page So this is the main theory how test triggers see the web page how it interacts with the web pages How it's relatively to other elements locate other elements and this is the basic prompt template And in the next lesson We will perform some practice activities to enter some of those commands and you will see test trigger in action So see you in the next lesson