Rough and Precise Location | Bondar Academy
Course: Mastering testRigor
Module: Locating Web Elements
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on using rough location techniques to find web elements on a webpage, particularly when traditional locators fail due to size or overlap issues. Key Concepts Rough Location : Allows for less precise element selection by indicating a general area (e.g., "roughly above radius"). Overlap Rule : The 30% overlap rule can hinder element selection if the bounding box is too large. Combining Locators : Using multiple locators can enhance precision when selecting elements. Examples Demonstrated Using the grid above radius failed due to size constraints. Adjusting the overlap to 15% allowed the test to pass. Selecting the password field to the right of another element successfully using a rough location approach. Combining locators, such as selecting an email input field to the right of radius and above the password label, demonstrated how to achieve precise targeting. Important Techniques Use roughly to indicate a general area for element selection. Combine locators with and for more precise targeting, where the first locator defaults to roughly. Utilize completely for exact positioning when necessary, particularly in complex UI scenarios. In summary, mastering these techniques can significantly improve your ability to locate elements effectively in automated testing environments. See you in the next lesson!
Video Transcript
In this lesson we will talk about how you can use more rough location to find the web elements on the web page and also how you can combine couple of relative locators to locate the web elements. So let me show you those tricks in this lecture. In one of the previous lectures when I showed you example with clicking on using the grid above the radius I mentioned that it will not work because using the grid has a bigger box above which is beyond the 30% overlap rule of the test trigger. So you will need to use a different tricks if you have the situations like that. So let me show you some of those and I will create a new test, new test case and I will call it rough location and the initial steps will be the same. We need to navigate to the form layouts page. Click forms and click form layouts. Okay so now let's try to click using the grid above radius and let's see what happened. The new test is setting up and it is running. And test has failed with the error message can't find element by descriptor using the grid and here is why. So even the using the grid is located above the radius since the box is bigger than this one it cannot be selected. So what are the workarounds? One of the workarounds I mentioned in the presentation is to adjust the percent overlap so we can type something like using the grid with at least 15% overlap above radius and execute this test again. Okay I made some misspell it should be percent overlap update and retest and running this test again. And now this test passed successfully. Now you can see that the box around the radius using the grid was selected. Okay so another example if we will not override this 15% overlap rule we can use another just locator and select the top right corner above the radius which is the bigger than the box of using the grid. So we can type something like to the top right of radius and we will look to the top right corner from the radius and it will select using the grid update and retest. And this worked as well so let's see and we can see the radius and the top right corner of was selected using the grid. But this is you may agree kind of counterintuitive because using the grid is this text but we are selecting to the right top of radius right and if we look at this scenario later on click using the grid to the top right of radius and when you look on the page to the top right of radius it just doesn't make sense because radius is definitely above using the grid. So from the test trigger perspective it makes sense but from the human eye perspective it doesn't make sense. So how we can make this better? In order to make this better we can use a different approach which called rough location and instead of calling using the grid above radius we can say roughly above radius. When we provide the keyword roughly we say something like hey fine for us using the grid somewhere above the radius it doesn't matter where exactly somewhere above the radius and we're good with that and I'm updating retest and I will show you how will it look like in the test trigger. All right test is completed successfully and now look at the screenshot. So when we use a keyword roughly test trigger creates the invisible line above the top of the box and search in the entire area of the viewport for the element that we are looking for and let me show you another example. For example we want to select the password field to the right of using the grid and since the using the grid is just this box we can tell hey somewhere to the right of using the grid we want to find the password field and this is the only one password field for the right section of the page. So this will work as well so let me show you this as well click password let's say we want to click into the input input field click input password roughly to the right of the using the grid and let's run this test. And here we go test is completed let's check the screenshot yeah and a screenshot is showing exactly what we told to do so we found the using the grid box of the our using the grid form and to the right of this box we found all the area in the viewport hey somewhere to the right of this using the grid find for us the password input and this input was selected. All right so moving on as you may think that rough location sometimes may helpful but sometimes you may have the issues because of that because you are targeting two wide areas on the page. In this type of example you can combine couple of locators together to locate the element more precisely. So let me show you example this one. So let's say that we want to find the email to the right of radius and we want to find this particular email input field. If we type something like click input email roughly to the right of radius it will select this email input field instead of this email input field. We need to select this one. So how would we specify that we want to select particular input field email input field to the right of radius. So we can provide two locators to help us doing this and for the second locator we can use this password label. For example we can say something find the email to the right of radius and above of label password because this label password is located to the left of the password field and this label is above password field and also this password label is located above the radius right. So if we say hey go to the right and go up from the password label to the email field this would work and let me show you how to do that. So click edit and let me add one more scenarios. For example we want to click on what action target we want to click input email to the right of radius and I put roughly to the right of radius and above label password. OK and let's run this test. Let's see what happened. OK the test is failed. Let's see why. And the reason is that password label has a very narrow location of the box. So if we put something to the right top off it will select the biggest part of the email and it will work. So let me quickly update this. So instead of above I change to the right top off label password update and retest. All right test passed successfully. Let's check out screenshot. All right. And now let's review this together. So first step was to find a roughly location to the right of radius. So this is this part of the screen and then within this rough location. So we cut off this password label because now we are looking into this right section of the screen. Then we used this label and find to the right top of the label password this locator. So this is how we combined two locators together to find this email input field in relation to the radio label. So and one more thing. So when you combine two locators together for the first locator over here you don't need to use the keyword roughly. It defaults by default in test rigor to roughly so you can replace it with click input email to the right of radius and to the right top of label password in it will work exactly the same. So let me demonstrate you this real quick. All right. You can see that test passed and test rigor did exactly the same thing as the previous one. So by default if you use two locators the first one defaults to roughly. If you need to override this default behavior you can do this by using the keyword completely. And let me show you an example with this scenario because if I add completely right here it will not work. Completely will work in the example when you need to find the section between the horizontal lines and vertical lines and they will create the box of the locator where you want to select the element. It's pretty rare case but can be very powerful when you have a complex UI. Unfortunately I don't have a very good example in this application to show you. But let's for example we want to click on this check me out radio buttons and let's assume that we have a bunch of check me out radio buttons over here and we want to select specifically which is located below the email. Let's do it something like that. And you want to say something like hey I want to select the check me out which is completely to the right of radius and below the email input field and combining the locators like that you can do the selection. So let me show you this example. So click check me out completely to the right of radius and below input email address and let's run this test. All right the test passed successfully. Now let's check it out. In this example test trigger will not draw the vertical or horizontal lines for us. So it's maybe a little bit difficult to understand what happened here. But if you imagine those lines. So for example a radius you draw the horizontal lines over here and vertical lines right here. This checkbox check me out exactly in the intersection of these two location of the element. So this is very very precise location of the web element. Pretty rare case but sometimes in the complex UI scenarios you may need this to happen and you will use a keyword completely to enable this. So let's quickly summarize what we did in this lesson. For the rough location on the web page when you need to find roughly above below to the right onto the left you can use roughly keyword to make not that precise selection of the element on the web page so can be pretty useful. Also you can combine two selectors at the same time using and keyword when you need more precise location. In this case the first selector will default to roughly either you specify roughly or you not specify roughly. It will be roughly and the second one will work as normal. If you need to override this default behavior of roughly for the first locator you can use a keyword completely. In this case it will be the most precise location of the web element that you can only trigger in the test trigger. So that's it. See you in the next lesson.