Great. So we have a WebDriver, let's do something with it after loading a page, the very first thing we normally do is to find an element you're probably already familiar with the locators baked into Selenium for many years, finding by XPath, link text, CSS selectors and so on.
The problem with all of these is they require you to know an awful lot about the structure of the page, how the DOM itself is arranged. Sometimes wouldn't it be easier to be able to use more human language?
I want the image that is above this header and to the right of that paragraph of text. For example, this is where relative locators come into play. Let's see them in action.
The first thing we're going to do is we're going to show off relative locators. So let's take a simple page.
Here's the Wikipedia page for cheese and you will see there is a heading here. And underneath it, there are three images that we want that we're interested in. One, two, three, and obviously, down there, there are other images, but that's fine.
So what we want to do, we want to have the driver get there. Let's go to the cheese page. And what we want to do is we want to find this element here, so let's just inspect it and you'll see that it has an idea of first heading.
So I'm just going to grab that. First heading cool, great. So now we found the heading, what we want to do is we want to find the list of images that are applied. So what we're gonna do is we're going to say driver find element, using our relative locator with the tag name, image that is below heading.
And what we could do is we could have at the right, the left near above, so on and so forth. But this will be, this will be fine.
Great. So those are elements, and if we were to run this test, we would find the the three elements that we expect. One, two, three, and to demonstrate that what we're going to do is we will highlight these things and to do highlighting, I just have a useful, um, routine that I have talked to one side for highlighting all this does is to use these JavaScripts to iterate through a list of colors. One, two, three, four, five, six, seven, eight. I have many there. So it starts red, it goes to blue. Then it goes to green and it goes back and blah, blah blah, blah blah.
One thing that may not be familiar with is this use of arguments. So whenever I call the JavaScript executer, you get this, which creates that argument to one, which equates to that. So these are the bits we need.
So what I'm going to do is I will just demonstrate the first I'll highlight the first three elements, then at three for each highlight. Great. One, two, three. There we go.
So each of those three were found. That's nice, but maybe we want to do a bit more that, maybe we want to find another image above. So a test isn't a test for that assertion. So let's do driver find element, relative locator with tag name. That's what we want to do.
We want to find this Red Hawk cheese text here and we know it's above this image here so far. Inspect this element. We'll say it's contained within a div, so a whole file of divs. So let's go find the div that is above this, this element here. With TagName div that is above. Good. And what we'll do, we'll getText and we will assertEquals. So now I can never remember the order of these things, so I'm just going to check expected first. So. Redhawk cheese. OK, now we're going to run this test.
One. Two. Three.
Green button, that's a lovely.
But how do relative locators work? The main thing to realize is that every element on the DOM has what's known as a client bounding rect. The relative location is based on these.
We have a handy diagram for this and the Selenium source code itself. The key point is that Selenium 4 takes a look at the elements bounding rectangle and measures distances from the edge closest to the direction we're looking in, the bottom edge for below, the right edge for right and so on.
So you can see from this comment we have two boxes, one and two. As you can see, the right-hand edge of one is left of the leftmost edge of two. Top edge of two is actually at the same level as the bottom edge of one and one is above two and two is below one.
Let's keep this model in mind when you're working with a relative locators and everything will be fine. When we search for elements using relative locators, they returned by their proximity to the last thing that we searched for. How is proximity measured? It's simply measured as the distance between the center point of the client bounding rects.
If you remember Pythagoras from your math class, you're that. Relative locators seem incredibly useful. Why wouldn't you use them all the time? Well, there are several reasons, and I think it's only fair to discuss these limitations with you. Because of the way we've implemented relative locators and the way that proximity works, things are looked like they should be found, sometimes aren't. And that's because the client bounding rects don't quite line up how we think they do.
Also, be aware that relative locators are very sensitive to page layout, as you'd imagine, this can cause problems on responsive sites if the window size isn't what you think it is.
This can be a particular issue when running on a remote WebDriver on a machine somewhere else in the world. You just don't know the size of the screen and therefore something that looks like it should be easy to find on your local machine, maybe in a completely different place on the remote machine. Always worth taking a look at the video if you can.
Comments are closed.