Hello everyone, in this video session, I am going to explain part nine of selenium four. That is let you locators in Selenium four. They have introduced a new concept known as layer two locators. So what is the purpose of this array to locators? Instead of name? Let's say there is a web page.

And there are few UI elements like this. And there are some other UI elements surrounding this UI element. Okay. Let's say you want to look at this UI element. Okay, let's say you want to look at this UI element. But unfortunately, due to some XYZ reasons, you are not able to look at this UI element directly.

Okay, the UI element which is in the center, directly, in the case, guys, we can look at this, we can, since we are not able to look at this directly, we can look at this UI element with the help of the other ones. Other UI elements surrounding it. So you can look at this required UI element with the help of a UI element, which is on the left side of this UI element or you can look at this UI element using the UI element which is on the right side of the required UI element or you can locate this required UI element using the UI element which is which is below this UI element or which is above this UI element. So using any of these UI elements, which are nearby this required UI element, we can look at this UI element with the help of with the help of this array do locators concept okay.

With the help of this later locators concept, we can look at the required UI element, which is not able to be located directly with the help of the nearby UI elements like the UI element which is on the top bottom left and right. So, for these guys in Selenium four, they are this related look at this concept is providing two things like one is class that is related locators plus other one is Another one is with tagname method. Okay. And along with that there are other things like.below.table.to write off, okay and there are different methods like left off. Okay to be used as part of this relative locate a sponsor that I will be practically demonstrating it to you right now. So let's switch to the practical board now.

Okay, let's switch to the practical mode, where I will radically demonstrate how to use this relay to look at a concept for the for locating the required UI elements using the nearby UI elements. So let's open Eclipse ID. So we have to create a Maven project and configure that navigate project with the Selenium for so right now when I'm explaining this video session, we have the Selenium for alpha version, the steps for creating an Mavin project and configuring that with the Selenium four and other stuff already explained as part of the first video of this Selenium four video series. Okay, you can go through that first video and come back here hoping that you have created this Maven project and configure that with this Selenium four. Okay, it's available in the repository guys, you can go to me and repost it and get this dependency fine and hoping that you're you did all these things.

Then let's create a new class here. And name these classes they were nine and select this public static Weidman and say finish. Now inside this main method, inside this main method, write some basic stuff like WebDriver manager dot chrome driver dot setup, and then WebDriver driver is equal to new chrome driver We'll open up Chrome browser. So I have to demonstrate driver Okay, for the most important driver interface and chrome driver class, then maximize a browser window using this command driver dot manage dot window dot maximize. Then implicitly wait for some time do some seconds, like time unit, or seconds after this basic steps have been written. Let's open the sample application here.

Let's see what my first example I would explain this. So I will take this sample application tutorial stranger.com slash demo. Okay, and I will go to this login page directly copy this URL The login page of this website, tutorials ninja.com slash demo and log in page and then provide that into the driver dot get URL. This will place the driver URL provided. Now, after opening this application after opening this application, what I'm going to do here is I am going to enter the email address here and password here. And let's say I want to click on the login button.

But assume that you are not able to click on locate this login button directly. So what I will do here is after entering the username password, then I will with the help of this related locators concept, I will click on this login button. Okay, let's say you're not able to look at this login button. But with the help of the surrounding us. Let's say this password you element. I'll click on this login button.

Okay, so let me practically demonstrate that for you so far now after going to this login page what to do how to enter the email address inspect this email address field so that it has some ID guys input email is ID copy this ID. And here say driver dot, find element by.id and provide the ID value. And say dot click the dot send keys and you have to give the email address here to enter the email address into this text field. So I will enter this email address that is Ravi dot Kiran one at the rate gmail.com. After that, I have to enter the password. Okay, after that I have to enter this password.

Inspect this password field and as you can see, it also has some ID copy this and say driver dot find element by.id or the password ID then sendkeys how to enter the password here. So let's say I have given the password here. Then guys, let's say After this entering this username and password here I have to click on this login button. Assume that you are not able to look at this login button directly with almost any type of locators. So I want to take a different approach here where Okay, I will say you see I will be using relay to locate us now, in this statement I'm going to use a relay to locate this concept for locating that button button. Okay, find element.

Here instead of saying buy or something I will say relay to locators. dot this is a locator it's okay not locator locator later locator dot. The method name is with the tag name inside the tag name. So, let's identify the tag name of this login button. It has a document diet name as input. So let's give the tag name as input here.

Okay input time they have to look at this button with the help of the nearby You element let's say I want to locate this login with the help of this password text field. Okay, this login button is below this login button that we have to click is below this password text field. So what I will do here is the tag name of this button I have given first Okay the first thing that what is the tag name of this login button it's input when I inspect this and use it the tag name is input I have given that already now say a lot which is below this UI element having the tag name as input is below by locator. Okay, here I'll give this locator of this login that is Password field, okay. So by that Id input password is nothing but the locator for locating this password field right?

And this and here saying that and here saying that this login button is below this password failed. So now we have what this driver dot find elements are later located with tagname of this login button which is below the which is veloza password field we are given so far right what we have to do on this what we have to do on this thing we have to perform click operation right click that's it. Now, now see guys it will enter the username and it will enter the password and it using this related locator it will locate the login button and click OK to see we have said that the login button has the target tag name as input and and it is below this particular UI element that is below this text field. Okay having the input field input tag. So now when you run this this will work guys.

Okay. This will work November application Then it will enter the username password and click on the login button. You see it has clicked on the login button and we got logged in. We got logged in. Okay, you can see the logout. So let me click on logout again.

Fine. So So this is how guys, we can use the related locators for locating the rig, look required UI elements with the help of the other UI elements which are surrounding it's like this is this UI element is there a bow this required UI element right? So or this UI element that we want to click is below this UI elements like that. So I have few more examples guys. So after I explained all these examples, one after the other one, your confidence will increase and we will be understanding this later. Look at this concept.

More. Okay. So the second one is how we're using to write off I will take a different application here. Let's say this one where.blogspot.com I'll copy this application URL and paste it into this driver dot get here. And then what I'm going to do here is I'll explain. So let's say I, let's say I will enter some text like this into the stock screen, and I want to click on the search button.

Okay, but I let's let's assume that you are not able to click on this search, you are not able to locate the search button directly. So you're going to take the help of this text field to locate this search button using the relay to locate us with the help of how to use this to write office, okay, because why because this search button is on the right side of this text field. So we will be using this to write off the previous example where I demonstrated relate to locator using dot below. Why because this login button was there below this text field, but now in this application in this app Application the search button is on the right side so we have to use a different thing like to write off Okay, let me practically demonstrate anyhow I will clear out all this stuff. We'll go to this will open this omega.blogspot.com now after going there okay after going there I will enter some text into this text field inspect this so it has some name is equal to Q.

Okay I'll copy this value of this name locator driver dot find element by dot name and a dislike q dot sendkeys I will enter some text into the text field first Foxtrot comm let's say after entering the text into this text field. Now I want to click on this search button. Okay I want to search this text on this website. So in order to click on this search button, I will look at the search button but let's say Given that you're not able to locate, so in that case, I'll use this text field, they'll pop this text field, I look at this as button with the help of the relay to locate us. So let's do that driver dot find element. Since I'm not able to locate this search button directly, what I'm going to do is I'm going to use layer two locator dot with the tag name.

So what is the tag name of the search button? We have to find it out first. So it has a tag name as input as okay this attribute and has a tag name as input this input so I'll use this input here the double quotes I'll just provide and say dot i am this is to the This button is on the right side of this text field right. So I will say to the right of and I will give the same locator here by now name you okay then dot Arctic if you're not able to look at this The Search button directly. So using the related locators concept with the with the by locating this text field, which is on the, okay, which is here, and this is what is on the right side offset field, we can locate the required search button and perform click coverage.

So let's run this and see whether this is working or not. So it will open the application it will enter text into this text field and click on the search button. You see the search button got clicked there. That's the reason you got the search result here. Okay, so guys, using the related locators, we can look at the UI element which is on the right side of the one, which is on the right side, okay, of the other UI element. Using this to right off now let's go with another example, where I'll be using the combination of two things like I'll be using both below and to left off Okay, I'll be using the combination of two things.

So let's say this is an example guys that I'm going to demonstrate now, let's say to left off, right. So let's say this text, I want to click on I want to, let's say get the text of the submit button. Okay, I want to retrieve the text between the HTML tags of this Submit button. So, for that, I have to look at the submit button and assume that you are not able to locate this Submit button. So what you will do is, you will locate this Submit button with the help of this one and this one, okay, just for the demonstration purpose, I am taking these two things, guys, okay, you can do the combination, this, this Submit button that you want to look at is below this text. And to the left side of this login button, right.

The submit button that you want to look at is below this text and to the left side of this login button. So I'll use the same thing, same concept. So you already seen I'll clear out this stuff. Now without waiting any way what I will do here is I will inspect this text okay the submit button is then below this text let's say inspect this and let me create a expert or something for this say, I will copy this text double slash to text is equal to view this Okay, this will look at this text and the submit button is below this text. So let me start writing driver dot find element. So what led you locator dot with the tag name?

The tag name for this button is this button guys. Okay, this is a submit button right button. Okay, so I'll give the tag name s. button which is which is below this petition. texts. Okay, this is a sea expat expression for locating the sticks. So I will use this copied I copied that expat expression dot which is below by dot expert.

I will paste that expat expression that I created just now. Fine. I and I will say enter and say dot Okay, and to list off to the left side of the left side of this login button the submit button is on the left side of this login button so let me inspect this login button and let's create it has no it doesn't have anything button with the text login. So I'll create another XPath expression here that is double slash button text is equal to login and okay this locating this login button copy and paste The left side of bi dot export is the locator for locating the login button, then semicolon and this will return you the web element as a web element. What is the development about Submit button element right. So, this so what we have done is the UI element that you want to look at has the tag name s button.

This is a button tag name, and it is below this below this text align to the left side of the login button. I have given all these things and this will result this will return a web element of Submit button. Okay, since you're not able to look at the submit button directly, we have user locators off the avoid UI element or to the right side UI element here to look at this web element of Submit button. Now, let's retrieve the text of the submit button. So System dot out dot print ln Submit button dot get text. Okay, this will retrieve the text so that when it prints you can see that this web element is nothing but we'll get another this web element is nothing but a submit button from the output.

So let's see whether the real Submit button has been located using this lady locators or not. If it retrieves the submit button text, then submits then it will it has located the required Submit button. Okay, if it comes on, let's run this code. Open application URL and that thing has been already done. As you can see the submit button text has been printed here okay. The text between the types of the submit button has been printed in the output.

That means that this UI element is nothing but Submit button. Right, we are able to locate the submit button with the help of the other UI elements which are there on the right side and on the label. Okay, we have used both combination this.below.to list two things we have used here. Similarly, I'm going to explain another example. That is to write off and do less stuff. Okay, I'm going to demonstrate to write off and do less stuff.

Let me take this example guys, where I want to look at this login button. Okay, but unfortunately, due to some XYZ reasons, assume that you are not able to look at this login button directly. Now I want to look at this login button with the help of Submit button and register button using this relay to look at this concept. Okay, this login button is to the right side of this Submit button to the left side of this register button. I'll be using this two UI elements health and with help of relative limits. I'll be locating this login button.

Okay. So for that, let's clear out that stuff and then say start with driver dot find Element Relative locator dot with the tag name. What is the tag name of the login button we have to find out first Okay. That you want to look at the button you want to look at what it has a tag name as button, pop it is and paste here. I now said dot the button is on the right side of the button is on the right side of the submit button. So inspect this create some locators for this button.

That is a double slash expat expression I am creating text is equal to MIT and Santa is locating the Submit so I am taking the explicit expression of the submit button and then say here by dot expert and then we will export expression of this Submit button. Then after that got to the off the left off to the left side of this register okay register. So inspect this register button and create sorry, this one okay. They start here and this will look at the Register button. So copy this export expression of for locating this register button and then by dot export paste it here okay to right side of the submit button and to the left side of register button locate the new element having the tag name s button. So that's the whole concept provide a semicolon here and then it will return a web element which is nothing but a login button login button element is equal to okay to find out whether the login habit has been really located or not.

What I'm going to do is I'm going to retrieve the space between the tacks of this located button. If log in is printed in the console, that means login button has been located with the help of the submitted waster buttons which are there on the left side and right side of these buttons. Okay? So, System dot out dot print ln login button element, dot get text. Okay, save it and run it. So the application is opening now.

So let's see whether the text of the login button got printed here or not. You see the texture between the dance of the login button got printed that means this is nothing but the login button. The UI element that got located is nothing but the login button with the help of the buttons which are there on the right side and left So here we have used to write off and do less stuff. Okay? things in relative look at concept. A few more examples guys to make you clear off this relatable Okay, this concept I'm going to use more examples here so that you can understand other stuff on how to use a relay to locate us.

Fine. So let's say I want to look at Okay, I want to look at all the hyperlinks which comes under this Compendium them. Okay, there are different number of hyperlinks here I want to look at all the hyperlinks under this Compendium they will link so let's use that. So, after going to the application after going through that application, what you have to do you have to say driver dot find element. Relate you locator dot with the tag name. So I want to look at all the anchor texts which come under this compendium of links Okay, all the hyperlinks which come after this companion do link I want to look at so here all the all the things that I want to look at should have the anchor tag, the hyperlinks I want to look at which comes under this Compendium new so that's the reason I have given anchor text because all the hyperlinks generally have the anchor text right will have the tag name as a so I have given a okay I want to look at all the texts which all the hyperlinks which have the which come after this will come below this companion.

So to state that, I have to say dot below okay dot below. And this hyperlink I want to provide that is anchor text having this text Compendium div. So I will copy this text and say by dot link text into the text between the tax so this is the tag name, amen. Every hyperlink will have the tag name I only write every hyperlink you see either this hyperlink or this hyperlink which is coming below this convenient new link all all these hyperlinks have the anchor text. So, here all the anchor text will be located hyperlinks will be located which come below this company name The only okay provide a semicolon here as you already know that there are multiple hyperlinks that are going to be located okay which are below this Compendium they will link it should not be saying find element you should be saying find element space okay.

So, this will look at multiple UI elements. So we have to say find elements and this will return a list of web elements list off that element. So I will say simply say list is equal Okay. Now, I will print out so import this from Java dot util. Now after that, what I will do is I will retrieve all this hyper In text text between the anchor texts for example, this hyperlink has some text like only testing block right? I would like to print all this stuff for that I will say for int i is equal to zero.

I want to print all the hyperlinks text of all the hyperlinks that got located with the help of this find elements i.is then listed dot size I will say okay since there are multiple hyperlinks located I will say I equals zero i less than this dot size i plus plus. Then inside that I will say System dot out dot print ln listed dot get off. I this will return the hyperlink one after the another one as part of the loop and I will retrieve the text of each and every hyperlink. Okay text between the tags of the hyperlink cells radio text points. So let's run this code to see whether all the hyperlinks are This Compendium deal got printed or not okay, run this has opened application and you have already done that. You see a lot of things have come here guys okay, so open a pop up new tools so here what are there let's find it out under Compendium we have new tools that new tools is there here only testing blood tests wisely jQuery automation desktop.

Okay. YouTube's only testing blood tests wisely jQuery automation test everything is there apart from these two things guys, you already got something like open a pop up window and blogger why we got these things. Because here you see this hyperlink is also below this companion. They only as part of this page under this Compendium do not only these hyperlinks, guys But also this hyperlink is also under this companion view. And if you can see there is another thing like blogger, this blogger link is there at the bottom of the page. Okay, this blogger link is also under the Compendium dealings, that's why it was printed.

Okay. So if you don't want all the hyperlinks are linked if you don't want this open a pop up window and a blogger and you want to only print these hyperlinks only okay which are there between the Compendium deal and automation desktop, you can filter that okay, how to do that simple guys. So here you said dot below and to this say dot table. Okay, below below Compendium deal but Abel table by dot link text table automation tester, okay, so I'll give this link next but locating that hyperlinked so all the hyperlinks which are below the Compendium do and about automation tester should be printed no okay that is the last example is below enable and giving. So here save it and run it this time it will not print all the hyperlinks which are there below the Compendium new hyperlink instead it will print only the hyperlinks which are there between the companion deal and automation tester hyperlinks Okay, so go to the Eclipse and see that new tools only testing blog despises jQuery okay only for this for hyperlinks, which are there between the Compendium deal and automation tester, but in today's, so, this is how guys we have to use a layer two locators for locating the UI elements which are not which are not able to look at directly with the help of the nearby UI elements.

Okay. In Selenium for fine. And as you can see here, after this radio locators, if you say dot i will after a year Sorry here not here after this week tagname if you say dot here you will get a lot of override and overloaded methods here. So Abel Abel below below like that are there we can we can experiment them yes okay a lot of methods are there Yeah, newer methods also, okay near the kind of default near near method is also built into the relay to look at a concept okay. So you can try everything guys a bow below near and do left off to write off all this methods of relay to look at the concept of selenium for for locating the UI element, which are not able to look at it directly. But that's it guys.

In the next video session, I am going to explain how to print the Chrome Dev Tools console locks. Okay, in Selenium four, they have given some options were using which you can print the Chrome Chrome browsers go to dev tools, console locks. So this thing I am going to explain in detail in the next video, guys So that's it guys see in the next video session. Thank you. Bye