Session 39 – Selenium with Java | Handling Broken Links… — Transcript

Learn how to identify and handle broken links in web applications using Selenium with Java by checking HTTP status codes.

Key Takeaways

Broken links are identified by HTTP status codes 400 or higher.
Presence of href attribute is essential before testing a link.
Automation can efficiently detect broken links by iterating through all links and checking responses.
Understanding server responses helps in validating web application link integrity.
Handling broken links improves user experience and application reliability.

Summary

Definition of broken links as URLs that do not have corresponding resources on the server.
Explanation of client-server communication when a link is clicked and how resources are fetched.
Common error responses like 404 Not Found or Bad Request indicate broken links.
Importance of the HTTP status code in determining if a link is broken, with codes >= 400 indicating broken links.
Step-by-step approach to verify broken links: checking href attribute, sending request, and validating status code.
Automation techniques to identify broken links in web pages using Selenium with Java.
Handling multiple links on a page by iterating through each and checking their status codes.
Examples of broken links and normal links demonstrated through a sample web application.
Emphasis on the href attribute presence as a prerequisite for sending requests to the server.
Clarification that a normal link returns a valid resource with status code < 400.

Full Transcript — Download SRT & Markdown

Speaker A

All right, so in today's class, the first topic is how to handle broken links. Broken links. So first of all, let us try to understand what is a broken link. Sometimes, when you click on any link on the web page, you will not get the target page. That means the page doesn't have a resource in the server.

Speaker A

page doesn't have a resource in the server so normally in the web applications uh what will happen is you will hit that URL right so suppose you whenever you hit the URL or whenever you click on the link normally what happens is the request the client request will go to server and it will

Speaker A

So normally, in web applications, what will happen is you will hit that URL, right? So whenever you hit the URL or whenever you click on the link, normally what happens is the request, the client request, will go to the server and it will fetch that particular resource.

Speaker A

to find a resource from the server and once it is found the resource and then it will return to the client sometimes what happens is you will send a request to the server but in the server it could not find any resource then it will give you some kind of an error page not

Speaker A

And whatever you requested from the server, once it is found out from the server, then it will return to the client. So client and server communication will happen like that. So whenever you hit a URL or whenever you click on the link, it will try to find a resource from the server.

Speaker A

of links are called broker links means that link is doesn't have a corresponding resource in the server so such type of links we can call them as a broken links let me show you an example so I'm taking uh one small application so we can see so many broken links on this but it is

Speaker A

And once it is found the resource, then it will return to the client. Sometimes what happens is you will send a request to the server, but the server could not find any resource. Then it will give you some kind of an error page, not found or resource not available, okay? Or 404 error, something like this.

Speaker A

links are there now I'm just clicking on one link here first link and now we got a bad request that means whenever you send this URL to the server I'm not getting proper data or resource from the server I'm getting simple bad request so this is one type of broken link okay and suppose if you

Speaker A

So whenever you hit or whenever you click on a link or whenever you send a URL, you will not get proper resource from the server because the resource is not available in the server. In that case, we can call those types of links broken links.

Speaker A

this message this is also another type of broken link and the main intention of this is there is no resource in the server whenever you hit a URL or whenever you hit a link to the server in the

Speaker A

That means that link doesn't have a corresponding resource in the server. So such types of links we can call them broken links. Let me show you an example. So I'm taking one small application so we can see so many broken links on this, but it is difficult to find out the web pages these types of examples.

Speaker A

which one is a broken link which one is a normal link okay so the best normal uh basic condition is if that link is having a resource in the server that resource will be returned if the link doesn't have any resource in the server that link will return some status code remember this

Speaker A

So we have to practice only on this page. Okay, now we can see this page. In this, I have so many links present here. These are different links. Now I'm just clicking on one link here, first link, and now we got a bad request.

Speaker A

you send some request to the server the server will send the resource and that is normal link but whenever you send some request to the server if the server is not giving any response server is not having any resource then that is a broken link okay but how we can find that whether it's

Speaker A

That means whenever you send this URL to the server, I'm not getting proper data or resource from the server. I'm getting a simple bad request. So this is one type of broken link, okay? And suppose if you click on something and these types of errors most of the times we will notice when you're working with the web application.

Speaker A

tell that particular link is broken or not okay that link is broken or not so the first condition the main condition before that we need to check multiple conditions but the main condition is the status code should be greater than or equal to 400 okay so if the status score should be

Speaker A

So for example, I'm clicking on this. See, most of the times, you can see this 404 not found, file or directory not found. So when you send this link, you're getting this message. This is also another type of broken link.

Speaker A

400 it is having some resource in the server if the status code is greater than or equal to 400 then that is a broken link so this is a major condition we have to validate first thing we have to hit the URL to the server and if the server is responded with some status code if the

Speaker A

And the main intention of this is there is no resource in the server whenever you hit a URL or whenever you hit a link to the server. In the server, there is no resource corresponding to this particular request, and that is called broken link. That is called broken link, okay?

Speaker A

okay so this we have to achieve step by step so first thing is suppose let's say I have one Link in the web page and before hitting this link to the uh server this link should have HF attribute

Speaker A

Now how we can find out which one is a broken link, which one is not a broken link? So that is our concept today. So through automation, how we can find which one is a broken link, which one is a normal link, okay?

Speaker A

because this is the URL which we are going to send to the server Okay so before sending this URL to the server that link should have HF attribute and corresponding value suppose HF attribute is there but it doesn't have any value like this can we check is this broken link or not can we check

Speaker A

So the best normal basic condition is if that link is having a resource in the server, that resource will be returned. If the link doesn't have any resource in the server, that link will return some status code. Remember this point, status code is very, very important here.

Speaker A

the server okay we Second Step this is the first verification what is the first step verification is the link should have href attribute because this will decide what is the request we have to send to the server and second step is what we have to hit the URL if the first step is satisfied

Speaker A

Suppose when you click on this link, suppose I'm clicking on some link here and then request will go to the server and server will respond with some resource. Resource in the sense it can be web page, it can be content, whatever it is.

Speaker A

code and all I will show you once you hit this URL to the server that will return the status code so we'll hit the URL to the server then server will return the status code this is second and

Speaker A

Whenever you send some request to the server, the server will send the resource and that is a normal link. But whenever you send some request to the server, if the server is not giving any response, server is not having any resource, then that is a broken link, okay?

Speaker A

broken link if the status code if the status code less than 400 then it's not a broken so these are the three conditions we need to verify whether it is a broker link or not first thing the link

Speaker A

But how can we find that whether it's a broken link or not? It will return the status code. Based upon the status code, we will find out. Suppose here there are multiple links and the condition is whenever you hit a link to the server, if the server responded with some status code,

Speaker A

broken so these are the three conditions we need to check on the links if you have a 10 links or 20 links or 30 links on your web page for every every link we have to repeat the same process for

Speaker A

and based on the status code, we will tell that particular link is broken or not, okay? That link is broken or not. So the first condition, the main condition before that, we need to check multiple conditions, but the main condition is the status code should be greater than or equal to 400, okay?

Speaker A

special classes and methods are there anyway we can capture this URL from the href attribute we have a method called get attribute of Value method get attribute of HF when I say HF in get attribute that will return the URL this is fine but once you get an URL how we can hit this URL to the

Speaker A

So if the status code is greater than or equal to 400, that is a broken link. If the status code is less than 400, that is not a broken link. So if the status code is returning less than 400, it is having some resource in the server. If the status code is greater than or equal to 400, then that is a broken link.

Speaker A

status code because if you open this URL in the browser you won't get any status code you will get the just a response message but you won't get the status code so we want to get the status code

Speaker A

So this is a major condition we have to validate. First thing, we have to hit the URL to the server and if the server responded with some status code, if the status code is less than 400, less than 400, that is not a broken link. If the server status code is greater than or equal to 400, that is broken.

Speaker A

code is greater than equal to 400 that is a broken link if it is less than 400 it's not a broken so these are the three things we have to repeat for every Link in the web page okay so everybody's

Speaker A

So that is the main condition we want to verify, okay? So this we have to achieve step by step. So first thing is suppose let's say I have one link in the web page and before hitting this link to the server, this link should have href attribute, https and so and so, some xyz.com, something like this, right?

Speaker A

status code before getting the status code we have to capture the HF attribute URL it to the server then we'll get the status code once you get the status code we can easily compare this and all these things we have to repeat for all the links which are available in the web page okay now

Speaker A

So we need to have this particular href attribute. So the first condition what we need to check through automation is whatever link we want to check whether it's broken or not, that particular link should have href attribute value because this is the URL which we are going to send to the server.

Speaker A

multiple U request we have in the apis but here we are just sending the request okay so now uh yeah so let's create web driver okay I'll put the steps here okay same steps we are going to implement

Speaker A

Okay, so before sending this URL to the server, that link should have href attribute and corresponding value. Suppose href attribute is there but it doesn't have any value like this, can we check is this broken link or not? Can we check?

Speaker A

then launching driver. getet and this is a URL I'm going to launch okay now I'll try to put implicit weight and maximiz also against the driver dot manage dot timeouts dot implicitly wait duration dot of seconds 10 and also driver. manage. window.

Speaker A

No, why? Because first of all, it doesn't have any target URL. So we cannot check this type of link is broken or not. It's not possible. Suppose if you have some link href attribute having some value, then next step is what?

Speaker A

out there we want to capture HF attribute value of every link okay now tell me how to capture HF attribute value from that link how to write HF attribute for every link we have to capture every link so first of all let's capture all the links okay so how to capture all the links

Speaker A

We will hit this URL, we will capture this URL and hit to the server, okay? We second step. This is the first verification. What is the first step verification? The link should have href attribute because this will decide what is the request we have to send to the server.

Speaker A

so this will return all the links right so I can say links and what is the type of this variable is list of web element so now we captured all the links from the page all the links from the page

Speaker A

And second step is what? We have to hit the URL. If the first step is satisfied, then we will capture this URL and we will hit the URL to the server. And once you hit the URL to the server, then we will get a status code. We have to get the status code. How to get the status code and all, I will show you.

Speaker A

capture this HF attribute for every link okay but before capturing we that link should have right HF attribute value should present and only those links we required otherwise we have to do some filter here so there are three levels of filters first level filter is before cap

Speaker A

Once you hit this URL to the server, that will return the status code. So we'll hit the URL to the server, then server will return the status code. This is second.

Speaker A

is what HF should have some value here then only we can check right so I'll put one condition here what I'm condition I put is if okay so what I can do I can take one F Loop okay I going to take one

Speaker A

And now based on the status code, we need to check one condition. Third step, if the status code is less than or greater than or equal to 400, greater than or equal to 400, then we have to decide that is a broken link.

Speaker A

Loop now take this link element dot get attribute get attribute of which attribute value we have to capture which attribute value href attribute so that we have to specify okay so this will return this will return HF attribute value for example normally this URL will be there inside

Speaker A

If the status code is less than 400, then it's not broken. So these are the three conditions we need to verify whether it is a broken link or not. First thing, the link should have href attribute along with the value.

Speaker A

element I'm getting the attribute of HF attribute and then I'm storing this value now what is our first condition this Val the HF attribute should have some value otherwise we cannot check is a balink or not so I'll put One initial condition if the first filter if this HF attribute value

Speaker A

And second step, if the value exists, then we will capture the href attribute value and we'll hit this URL to the server and capture the status code. And if the status code is greater than or equal to 400, that is a broken link. Less than 400 is not broken.

Speaker A

not possible to check so we need to write a message like this not possible to check see again I'm repeating first we have captured HF attribute value into this variable so if this variable value is equal to null or if it is empty if it it should not be null actually right it should not be null

Speaker A

So these are the three conditions we need to check on the links. If you have 10 links or 20 links or 30 links on your web page, for every link we have to repeat the same process. For every link, we have to repeat the same process, okay?

Speaker A

condition is verified and uh we need to continue with the next link suppose I'm getting the first link here not having any value so simply I put this message then we have to take another link right so I will put continue statement here so what continue statement will do it will skip the

Speaker A

This is a concept what is broken link and how to verify. Now let us put this in automation. Through automation, how we can do this? So there are special classes and methods are there. Anyway, we can capture this URL from the href attribute. We have a meth...

Speaker A

if HF attribute value doesn't have any value so here itself one filter is done L suppose if this condition is not matching then what does it mean the HF is having some value if this condition is not matching what does it mean this HF attribute having some value that means it is possible to

Speaker A

verify whether is a broken link or not so we will continue the process else is not needed actually else is not needed if the condition is not matching then obviously the next statements will execute right so if the condition is matching then it will go to the next link it will skip the

Speaker A

current link and it will go to the next link that's the logic now if this condition is not matching that means what this H attribute value variable having some URL some value now we'll start the second process this process we have to start so we whatever capture the value we have so

Speaker A

that we have to hit to the server then we'll have to get the status code so now we capture the H HF attribute value we have to send this URL to the server how to send this URL to the server so here

Speaker A

we have certain method is there so here this is the first condition is done now second thing we already captured the H attribute value we verified whether is null or empty if it is a null or empty we are skipping it and getting the another link now let us assume now this HF attribute values

Speaker A

having some URL and now we have to hit this URL to the server how to hit this URL to the server hit URL to the server how to hit it so here currently this URL is in string format currently this URL is

Speaker A

in the string for URL in the sense HF attribute value that is there in the string format so if it is there in string format we cannot hit this to the server now it should be in url format URL

Speaker A

format string to URL format you have to convert so how to convert this in url format is very simple first we need to create an URL class object URL link URL equal to new URL of we have to pass this

Speaker A

HF attribute value so what the statement will do is this particular statement will convert this href attribute value into URL format URL format if it is not converted still it is in string format that we cannot send to the server so whenever you want to hit to the server it should be in

Speaker A

url form now this URL class we have to import from java. net package now this is converted into URL format this will throw some exception just I will add that later so this particular URL the string type of HF attribute is converted into URL format that I have stored in link URL now we have to send

Speaker A

this to the server we have to hit the server using this URL so that's the next statement so for that you have to take this link URL dot there is a method called open connection open connection so what this method will do is this method will open connection to the server okay this connection

Speaker A

will this method will open connection to the server once you open connection to the server this will return a connection object a connection object so what we need to do is we need to create one connection object like this HTTP URL connection connection link URL equal to link

Speaker A

URL this is a major step sorry link url. open connection see in the first step we converted this hedf attribute value or this URL into URL form once you converted this URL form format by using that URL format do

Speaker A

open connection so this will basically opens the connection to the server because before hitting the URL to the server the connection should be established so this will open connection to the server so how we can understand this open connection to the server for example if you want

Speaker A

to travel from one place to another place first we need to establish the way or road right then only we can travel so this method will do that so we have that URL there is a server and if you want

Speaker A

hit the URL to the server we need to establish the connection so this open connection method will do that by using this link URL we are opening the connection to the server but when you open connection to the server this will return that connection and that connection we have to store

Speaker A

in a variable here we need to create one variable called connection and what is the type of this variable is HTTP URL connection so this HTTP URL connection we have to import from java.net package and here it will ask you the type casting so we need to put that in the type cast this link url.

Speaker A

open connection htdp connection and then it will store in HTTP connection so this step we convert I'm writing all the comments so that you can understand later converted HF value from string to URL format and here what you have done we

Speaker A

have send this we have open the connection to the server using this link Ur So once you open the connection we have to hit the URL how to hit the URL connection Dot connect this is a method so this particular method will connect to the server and hit the

Speaker A

URL or send the request and send request to the server so these are the major steps okay so first I have converted the HF attribute value in the string format uh string to to URL format then we open the connection to the server then we send this URL to the server we send the request to the

Speaker A

server so these are the three steps so once you connected once you connected so this connection is there right so this connection will return something actually so the open connection will return lot of things and all of them stored in this variable from this variable we can

Speaker A

extract the status code so how to extract the status code from this variable we will extract it so connection variable dot so HTTP connection HTP connection is a basically a class predefined class in Java these are all from java itself not from s web driver okay these are all new methods

Speaker A

which are come from java itself and URL is also a class predefined class okay so now from this connection we have to get the status code so what we have done so far we capture the HF attribute and we have checked here HF is having the value or not if doesn't have any value we'll skip it if it

Speaker A

is a value then converted into URL format open the connection hit to the server and once hit the server we have to capture the status code so connection dot get status code there is a method called sorry get Response Code dot get Response Code so this will give the response code and

Speaker A

what we will do with the Response Code we have to compare right if con. connection. getet Response Code what is the condition if the response code is greater than equal to 400 then only it is a broken link so the response code is greater than or equal to 400 okay then what we should

Speaker A

say system.out.print and it is a broken link is a broken link else else system. println it's not a broken that's it so this is a condition now let us try to import all the uh we can put everything in

Speaker A

the recash so because these statements will throw some exceptions so what I can put is everything I'll put in the rec so whatever I'm doing here everything I will put in the TR catch block so from here to here if else because sometimes when this URL hit to the server okay and this

Speaker A

will throw some exception suppose if the proper resource is not available in the server it will return the exceptions so we can put in the TR catch block so here I will end catch block see this is a this everything I'll put in the tri block and this Tri block even if El condition

Speaker A

also I put in the tri block and this Tri block I'm handling is catch exception you can put exception class because we can get different type of exceptions and you don't need to put anything here you can just leave empty so this catch block will handle this okay so this is how we need to hit the

Speaker A

URL to the server like this and get the response code if it is greater than or equal to 400 we say it is a broken link else it is a not broken also so response code is an integer type yes

Speaker A

the response code is always integer type okay now just displaying this message I will also display the link instead of saying just a broken link but which which link is broken right that also I will def I will print how we can print it take this HF attribute value you can print like this and

Speaker A

then conc with this message so I can say like this Arrow Mark output and it's a broken same thing if it is a not broken link also I will first print the HF attribute value okay and then uh I will

Speaker A

say it's not broken so that it will be more clear which link is broken which one is not broken okay so this is how we need to handle so let me repeat once again first thing we have have to capture all

Speaker A

the links from the web page this is Step number one capture all the links from website and here in this looping statement what we are doing we are reading each and every link and capturing the HF attribute value and if it is a null or empty skip it if it is not null or empty then cap come

Speaker A

uh convert this uh convert this attribute value into URL format open the connection connect to the server get the Response Code if it is greater than or equal to 400 print it is a broken link if it is not print it is a not a broken link and exit so this is how we need to

Speaker A

do it okay and I want to find okay this will print which one is a broken link which one is a not broken link but I want to count it I want to count number of broken links instead of just

Speaker A

printing all the broken links are not broken or broken or not broken I just want to find out how many broken links are there so before starting the looping statement I take one variable number of broken links initially I'm taking zero now as soon as I found this broken link here if

Speaker A

the condition is matching I'm saying is a broken link right then I'll increase this broken links value by one so then what happens after after completing this F Loop finally this variable is contains a number of broken links because as soon as I found broken link I'm just printing

Speaker A

it also I'm counting that so this I can print After exiting from the for Loop so for Loop this is the if condition and this is a TR catch block and this is the ending of the F Loop so

Speaker A

here I will print system. out. print Ln number of broken links equal to number of broken so I can also print number of broken after completing the entire F this is a step bystep process okay so now let us try to execute and see how it is going to work so run as Java application

Speaker A

now let me go to Eclipse now you can see it is just printing the link then also it is saying broken link or not it is printing and based on the status code you can see all the status codes

Speaker A

are what 417 420 423 these are all status code which are greater than or equal to 400 so they are all broken links see there are some links which are not broken in between we are getting some links they are not broken see so totally how many broken links are there 42 broken links

Speaker A

are there totally 42 broken links are there and which one is a broken link which one is not a broken link we have already applied the logic and you can see some of them are not broken and most

Speaker A

of them are broken links and these are not these are all broken links and this these are two also not broken links and these two also not a broken links okay so this is how we can find out links

Speaker A

are broken or not so what is the definition of broken link if anybody ask you in interview what is broken link what is an answer for that broken link is a link which doesn't have any resource in the server simple definition theoretical definition if the broken link is a link which

Speaker A

it doesn't have any resource in the server if it is doesn't have any resource in the server that it will return status code that should be greater than or equal to 400 okay first condition is what that doesn't have resource in the server but how we will know whether it is having resources or

Speaker A

not based on the status code if the status code is greater than or equal to 400 that is a broken link if the status code is less than 400 that is not a broken link okay everybody's understood so

Speaker A

here the tricky thing is only this part these are only three statements are tricky thing because we are using different classes here but rest of them are simple logic right we captured all the links right and then we repeated each and every link by using for Loop and capture the

Speaker A

HF attribute value this is also we already done many times and we verified whether it's null or empty not possible to verify then skip it then you converted this HF attribute value string to URL format then we open the connection then connected to the server get the status codee

Speaker A

comparative is greater than 400 greater than equal 400 is a broken link less than 400 is not a broken link and we have taken another variable to count number of broken links and whenever I found a broken link here I just increased the value by one and once the F Loop is completed finally we

Speaker A

will get a number of broken LS so this is how we need to handle broken links in the web page so whatever the status code you are getting greater than or equal to 400 all are broken links all are broken links so all the server related issue is nothing but what resources not

Speaker A

available in the server so in those cases only you will get the server related issues so if I go back to this page if I click on any link so you are getting these kind of a messages client browser does not accept M type different conditions and different messages will be R but

Speaker A

if you consider all of them together there is a prop there is no proper resource in the server corresponding to that link then you will get these type of uh messages in the browser and based on the status code we have to decide even all 500 series also comes under broken

Speaker A

links okay if I don't use continue what will happen it's very basic Java question if I don't use continue then what will happen so if this condition is matching we are just printing this message okay and if I don't

Speaker A

use continue then what happens it will start executing the rest of the code it will not skip this current HF attribute value if I don't use continue what will happen is the condition is true for example condition is true and we are printing not possible to check but rest

Speaker A

of the statements also will execute for the same link that should not happen right so if it is not possible to check we have to skip it if it is a possible to check then rest of the code will execute but if you don't put continue then what happens if condition is not matching

Speaker A

it will print not possible but for that link it will also do all these stuff it shouldn't happen right if the URL is present then only this should happen if the URL is not there this should not happen okay there's a uh there's a reason we should use continue just keep the current

Speaker A

one okay just try one round of execution and very simple but you need to remember these conditions this is most important the first condition the h attribute should have some URL second condition when you hit this URL you will get the status code if the status code is great than equal to

Speaker A

400 which is a broken link less than 400 not a broken so these are the conditions everybody's clear on this so if anybody ask you what is broken link can you explain you should explain all these things and espe the even though if you're not able to write the code no problem

Speaker A

at least you have to explain the logic during interview that's the most important nobody asks you to write the code at least you should say what is broken link how to capture how to validate these things are most important okay now let's move on to the next one another most important

Speaker A

topic Shadow Dums how to handle Shadow Dum Okay so before dealing with the shadow Dam so we need to First understand some terminology what is Shadow Dam what is a shadow root what is Shadow root element so we need to understand

Speaker A

some terminology in this so it is purely related to web technology okay so we need to understand this theoretically and uh then we will see how to handle this Shadow di elements so we already know what is Dom what is Dom Dom is nothing but a document object model document

Speaker A

object model when the Dom will be created for the web page whenever you are browsing some website or whenever you're loading some page in the internet the Dom will be created suppose uh let me open the browser and here I'm typing google.com and as soon as you hit the URL the page is got

Speaker A

loaded and where we can see the Dom when I right click and inspect so here whatever you can see these are all this is called Dom structure so this will be created at the run time so whenever you

Speaker A

hit this URL this Dom will be created this is just a normally Dom but what is a shadow D and what is a shadow root and Shadow root element these are the things we need to understand so let me explain this with an example very carefully listen this this and let me take my pen

Speaker A

yeah so let us say this is a web page so this is our web page so for this particular page let's say we got some Dom okay so let's say this is my dom so document object model so for this web page

Speaker A

we got some do it will create at the run time okay so sometimes what happens is after loading this Dom after loading this entire web page in the same web page there will be some another sections there will be some another we can say this is a sub Dooms okay and this particular Dom

Speaker A

will be loaded so this Dom is having another Dom and this is is having another do so this is a kind of a web technology so instead of loading everything first they will load a basic Dom and inside this they will load another Dom inside this there is there is another Dom will

Speaker A

be loaded okay and this is called main document or we can say main Dom or we can say root okay root Shadow we can say okay and this is called these two are called These are root Shadow and

Speaker A

these two we can call as a shadow Roots these are the main Dom here so this is your main Dom and here these are all called Shadow Doms Shadow Doms means what a Dom contains another Dom which is called a shadow Dom and if this Shadow Dom is also can have another Shadow dump okay and

Speaker A

for all the shadow dumps there will be one root Ro document that is called as a root Shadow Dam root Shadow Dam so I will show you the picture so that you can clearly understand so let me open the

Speaker A

picture yeah so look at this yeah so in this uh in this particular Dom this is architecture of the Doms and everything so normally when when I see any web page this will be the structure so main document will be there

Speaker A

inside the shadow Host this is hierarchy first first one document document in the sense web page the document contains a shadow host Shadow host and and now Shadow host contains a shadow root so this is the hierarchy so document document contains a shadow host Shadow host contains

Speaker A

a shadow root okay and inside the shadow root we can find some elements some elements can be there inside the shadow rout so if you look at this picture so this is a combined one actually this is a document so the document contains a shadow host and the shadow host contains a shadow root

Speaker A

and Shadow root contains a elements these are all elements Shadow tree we can call this is all Shadow Tree Shadow tree okay so this is the hierarchy so this is a kind of a web technology so what is the problem in this using sh Dom suppose if you see the elements you can see

Speaker A

this in the Dom itself so shadow Tree Shadow uh Shadow route Shadow uh host so these three things we can see in the Dom itself document document contains a shadow host Shadow host contains a shadow roote inside the shadow root we can find the element so what is a problem in this shadom

Speaker A

is whenever you write an xath for this element or any locator we cannot directly locate this first of all X paath cannot go into the shadow route or Shadow D if the elements are present inside the shadow D if the elements are present inside the shadow D those elements we cannot locate using

Speaker A

xath this is the only place where xath won't work in every place xath will work that is an ultimate no question about it but there is only one place where xath doesn't work that is called Shadow if any element is present inside the shadow D that element we cannot find using X paath only by using

Speaker A

CSS selector we can locate an element okay so the main Dom is nothing but a document so whatever you can see here this is a document right this is called main Dom document object model and inside the Dom if you find any Dom here another Dom this is called Shadow Dom a Dom contains another Dom

Speaker A

is called simply Shadow Dom okay so let me repeat once again so take this one uh final picture so no don't consider this this is a split actually so if you consider this entire thing this document is the actual do whatever you can see in the HTML in the web page by inspecting the page this is

Speaker A

the document we can see Dom inside this we can see Shadow host inside the shadow host we can see Shadow tree means these are the different elements we can see in the shadow tree this is a hierarchy Dom document contains a shadow host Shadow host contains a shadow tree okay and what

Speaker A

this Dom is also called as a shadow root this Dom is also called as a shadow root okay so in the web page we will try to understand so who is host here Shadow host is also a kind of an

Speaker A

element which can host Shadow tree I'll show the web page so that you can understand okay so let me take one web page so that you can understand yeah so this is the web page uh I'm trying to use so here there are three elements first one is a

Speaker A

shadow element second one nested Shadow element Shadow element is nothing but that element is present inside the shadow D that element is present inside the shadow D which is called Shadow element and again there are three kinds just a shadow element nested Shadow element multi

Speaker A

nested Shadow Element no difference there are multiple Shadow Dums are there I'll show you the hierarchy so that you can understand let me take the first one I'm inspecting the first one Shadow element actually where is that element this is element span is a tag ID is Shadow element shadow

Speaker A

iph element so this is the actual element and this element is a part of what shadow root okay this is a element this element is a part of Shadow root and this is hosted by what this one this is

Speaker A

a shadow host we can say this is a shadow host according to the picture what is a shadow host here Shadow host contains the shadow elements if I this particular picture let me take the pen so this is the actual element this is the element because this is the shadow element message is

Speaker A

there right this is the element so this element is part of what shadow root and who is holding who is holding the shadow root this particular element this one this div is holding it so whichever element is holding the shadow root that is called Shadow Host this is called Shadow host so who is

Speaker A

hand who is holding the shadow root element which is called as a shadow host that means Shadow host can hold Shadow root Shadow root contains the element okay Shadow host contains a shadow root Shadow root contains a shadow D element so this is a hierarchy okay now currently this is the only

Speaker A

one Shadow route we can find that is hosted by what this particular Shadow host now let me show you another element nested Shadow element next one let's highlight this nested Shadow element second element pink color element okay now if I look at this this is the actual element span ID equal to

Speaker A

nested Shadow element right this is actual element and this element is a part of Shadow root you can see this Shadow route and who is holding it this element inner Shadow D ID is there this is the shadow host so this Shadow host is having Shadow root and Shadow root is having this element this

Speaker A

is a shadow root this is a shadow host Shadow host is hosted The Shadow roote and again this Shadow host is a part of another Shadow route and that is also having another Shadow host you can see this

Speaker A

this is nested Shadow element that means this is the actual Shadow roote this Shadow roote is having another Shadow root which is having another Shadow host and this is also having another Shadow root so basically this is the hierarchy let me draw this so that you can understand

Speaker A

stand okay Shadow host contains a shadow root and which contains a element okay this is one set now this is also part of another Shadow rout this is also having another element this is hosted by another host that means one Shadow host can have another Shadow host okay so this is

Speaker A

hierarchy now let me show you another one third one multin nested Shadow element take this one so this is the actual element this is the actual element multin nested Shadow element this is the part of what shadow route and this is hosted by what nested Shadow to so this is the first host

Speaker A

and again this is hosted in another Shadow route and this Shadow root is hosted in this element so this is a second Shadow host again this is a part of another root and this is holded by this one and this is the first Shadow host how many Shadow hosts are there in this there are

Speaker A

three Shadow hosts and in each and every host there is one shadow room root and where is the element in the Last Shadow root we can find this element okay this is the hierarchy everybody's understood so we need to understand Shadow host Shadow root then Shadow element these

Speaker A

are all part of Shadow do okay Shadow host is nothing but this is Shadow root Shadow root contains actual element and whenever is say shadow root that should be part of some host that's called Shadow host now for this route this is a host and for this Shadow route this is a

Speaker A

host for this Shadow do this is a host now if you highlight Shadow hostes these are three hostes are there see this is so this is one Shadow host and this is another Shadow host and this is another

Speaker A

Shadow host three Shadow host so this Shadow host contains the shadow root another Shadow host is also contains a root and this Shadow host is also contains the root element and here we can find that element okay suppose if you want to locate this element if you want to locate this

Speaker A

element how we can locate this element xath won't work here so first we need to get this particular Shadow host from this we have to extract inner Shadow host from this we have to extract another Shadow host and from this host we have to get this element this is how we need to navigate if

Speaker A

it is a nested multi nested Shadow Doms okay for example if you want to go back to the previous one again second one nested Shadow do is there let me highlight this okay so now just observe I'm taking the second element so this is actual element so

Speaker A

this is actual element we are looking for and this is a part of what shadow root and where is the shadow host of this this is a shadow host First Shadow Host this is contains a shadow root Shadow root contains this element now again this is the part of another Shadow root this is

Speaker A

a part of Shadow H so this is another Shadow host because this Shadow host contains another Shadow rad right so this is a second so if you want to reach till this element first we need to get this

Speaker A

Shadow root element that mean Shadow host from that we have to extract another Shadow host from that we have to extract this particular element this is nested Shadow element now go back to the first one just one Shadow root element let's inspect this element so now we can just look at

Speaker A

this this is the actual element so this is the actual element this is a part of Shadow root that is hosted by this element so this is a shadow Host this is a shadow host which contains a shadow root which contains the L So based on this what we

Speaker A

have understood Shadow host contains a shadow root Shadow root contains a element and again this is the part of another Shadow host and Shadow root and Shadow root El so now let me try to make more simple how the hierarchy will be let's go back to the notes

Speaker A

okay so first Shadow Host this Shadow host contains what shadow root and Shadow root contains what element okay now this is also having this element is also having another Shadow Po and this is also having again Shadow root this is having some so

Speaker A

this is a hierarchy if you want to reach till this element how we can read first we need to get the shadow host by using this Shadow host we have to get another Shadow host by using this Shadow host we have to capture the element so this is a

Speaker A

hierarchy okay so this is first host this is second host simply the definition is Shadow host is an element which contains a shadow root the shadow root contains a shadow tree so first it will come to the host host contains a root root contains a tree the tree is nothing

Speaker A

but an elements group of elements so Shadow host contains a shadow root what is Shadow root Shadow root is actually having the shadow tree or multiple Shadow Dum elements so to reach this element we have to get the shadow host then go to Shadow root then we can get the elements so

Speaker A

this is a iron so X paath we cannot handle xath cannot work on the shadom elements only the CSS selector will able to handle the elements okay now let me show you how we can identify elements using shadam suppose if those elements are part of the Shadow how we can locate so let me clear this

Speaker A

even first of all any xath is won't work even it is absolute or relative whatever type of xath xath cannot go into the Shad okay that's a fundamental thing only CSS will work so what is the purpose of

Speaker A

using sham is a kind of a web technology that's what I said at the beginning if the developers are using this kind of a technology they don't put all the elements in one section so they will first load the Dom main Dom then they will uh load another Dom and then they will load another do so

Speaker A

step by step they will load there's a kind of a web technology instead of loading everything in one shot okay then what what is the main problem with this if you want to store everything into one shot the load will be very high okay a simple understanding Suppose there are there is let's

Speaker A

say five cages of rice okay if you hold five cages of rice in one shot it will be difficult and if you split them into parts let's say two cages another 2 cages another two cages then it is very easy to hold right but ultimately we'll get five cages even though if you split so same

Speaker A

thing they apply in the web Technologies instead of loading the entire Dom into one shot they will load the main Dom and then load another Dom and load another Dom first it will load the main Dom then Shadow root which contains another Shadow root which contains the elements so

Speaker A

is a kind of a technology actually and what is the purpose of this is to make website faster improve the performance by reducing the load on the pages okay so elements will be there elements will be loaded with one request all the Doms will be loaded but it will load step by step one after

Speaker A

another it will not it will not load all the Doms all the elements in one shot is a kind of a web Technologies okay so we cannot handle them directly using X paath so we need to use only C

Speaker A

okay now we'll see how to handle the shadow elements so to handle the shadam elements uh let's go to this page let me handle the first one take this element so in this selector Hub will help us a lot I'll show you how selector Hub will automatically generate the code otherwise

Speaker A

it will be little bit difficult because there are multiple levels of Shadow roots and Shadow DS are there getting that information is very difficult so let's go to selector Hub it is very very simple and as soon as you inspected this element it clearly says this element is inside the shadow

Speaker A

Dom which cannot be accessed through X paath use CSS selector for it it clearly saying that message we don't need to bother about anything simple it is giving one alert is the element is inside the shadow Dom which can't be accessed through exper PA so any of the Shadow di element

Speaker A

we cannot access through xath only through CSS it is possible but we cannot directly access the element by using CSS before accessing this element we need to first go to Shadow rout first we need to go to Shadow host then go to Shadow root then we can get the element so the good

Speaker A

thing is the selector Hub itself is generating the code here in the bottom you can see here this is the code is automat I Ally generated to access this element okay now let me copy this code and show me how it exactly it is I'm pasting this code here so let us try to understand this

Speaker A

what exactly it is this element is inside the single Dom okay so what is this hash Shadow root if I go back and see the page uh what is the element we are looking for this is the element

Speaker A

so the first element so highlighted the first element so this is the element so where is this element is present this is the shadow roote who is holding the shadow root this is a holding so what is an ID of this Shadow ien root Shadow iph root is an ID so

Speaker A

first we have captured this Shadow ien rout this is a CSS how we can use a CSS with ID hash symbol right hash ID so this is a ID of the root Shadow root that we are storing in

Speaker A

the string format now the second command driver. find element by. CSS selector so Shadow root element we are using right so this is a shadow root do get Shadow root what this command will do is this particular command so forget about this this is not needed actually

Speaker A

so this is not needed so here driver. find element by. CSS selector we are getting the shadow host here from the shadow host we are extracting the shadow root get Shadow root is a method through which we are extracting the root from the shadow host means what we are first directly writing

Speaker A

the CSS for the shadow host from that we are extracting the shadow root element in inside the shadow root actual element is present so in the statement we are extracting the shadow root uh Shadow root is ID actually this is a shadow host from this Shadow host we are getting the shadow

Speaker A

root element that we are storing in the variable that variable should be search context and once you get the shadow roote from the shadow root you are getting the actual element so what is an idea of the actual element here span right so Shadow iph element so by using this ID CSS I'm locating

Speaker A

this element so this is the element everything is CSS ID is available ID I'm using as a CSS how we can use in CSS ID by using hash tag is option so first we need to get the root from the shadow host

Speaker A

from that root we extracted the element this is a code actually everybody's understood on this so the code is understood everyone so by using this particular script so this is the actual element we need this a span element you need so this span element

Speaker A

is a part of Shadow rout and the shadow root is a part of Shadow host so first we need to get the shadow host from that shadow host we have to extract the shadow root from the shadow root

Speaker A

we have to extract the element this is hierarchy so if you look at the code first we have this is the shadow host from the shadow host we extracted the Shadow roote by using this method we got the

Speaker A

shadow root from the shadow root here we have extracted the element using CSS select search context is a written type so this get Shadow root written type is search context so this variable is a search context whenever you get the Shad root that we can store in a variable so that variable

Speaker A

type is search context okay once you get the shadow root from the shadow root element we are extracting the actual element actual element okay this code is automatically given by the selector okay everybody's understood this now I'm going to show you nested Shadow host let's go back to the

Speaker A

next one first one is done so this is the code for the next uh Shadow element this is the first element now let's see the second one search context is an interface that is a root interface of web driver web driver is also extended from the search context we discussed this earlier

Speaker A

many times yeah now let's go to the next one nested Shadow element so without using selector Hub we will try to create our own code nested Shadow element see this this is the actual element this is the actual element ID is there okay and this element is holded

Speaker A

by what this is Shadow root this is a part of this host now we need to write a CSS for this particular host okay CSS for this particular host and from this host we have to extract the shadow root from this Shadow Ro we have extract the element again this Shadow host is a part of

Speaker A

another Shadow root this another Shadow root is Again part of another Shadow host and this is the host we need to extract so let me extract the code so let's try to understand this this is the second one so this element is inside the two nested Shadow dumps so I can remove this

Speaker A

two yeah now understand this so driver. find element CSS select Shadow root do get Shadow root what is this Shadow root get Shadow root this is the first Shadow D this is second Shadow D and this is the element so first we need to go to the upper one so if I go back to the web page

Speaker A

Shadow iph rout Shadow iph root this is the actual element this is the root element this is a nested one actually so this is a shadow root that is a part of this this is hosted by this so

Speaker A

we need to start from here we need to start from here so what is an IDE of this Shadow host Shadow iph root so that we specified here Shadow root this is the first Shadow host from that we need

Speaker A

to get the shadow route so from this host we are getting the shadow route this is the first Shadow root we are getting and that we are storing into the variable okay Shadow Zero is a variable from the Shadow Zero we will get another Shadow host so from this Shadow root we have another Shadow

Speaker A

host is this one inner Shadow Dom inner iPhone Shadow iPhone Dom so that we are going to host here from the previous Shadow do we are again getting the another host inner Shadow down from the host again we are getting the shadow route so from this we're able to extract this element from

Speaker A

the shadow one we are going to extract this element so this is a nested Shadow down this is nested Shadow down now let us look at the third one this one so this is the element so how many hosts are there for this this is the one Host this is the element this is the part

Speaker A

of one Shadow root this is having one host and this is Again part of another Shadow root which is also having one host and again this is a part of another Shadow root that is also having one host totally three hosts are there from these three hosts we have to get three Shadow roots

Speaker A

and from The Last Shadow root we have to extract the element so we will start from here what is an ID of this host Shadow iph root that's a first host so let's go and capture the code so the last

Speaker A

element third one I just put the statements in separate so now this is the higher one so Shadow iph root I look at here this is the first element inspect this and this is one Shadow route this is another Shadow root and here we need to start from

Speaker A

here Shadow I route is a main host which contains a shadow route so first we need to extract this so the first statement is extracted driver. find element Shadow root get Shadow Ro so this will give the first one first host and again by using the first host we need to go to the second one

Speaker A

where is second one here it is Shadow root what is the parent this one inner Shadow iph Dom that we have to extract so this one inner Shadow Dom and get Shadow route this will get the another Shadow and by using this we have to get another Shadow down go back to here and by using this

Speaker A

inner Shadow D we got this root and again go to the root what is the host of this this one nested ion Shadow I Dom is a host of this one so here nested I Shadow Dom and get to Shadow Host this

Speaker A

will get the last one from this last one we have to extract the element so Shadow to find element by. CSS selector and what is an idea of this element here is multi nested Shadow element that is we specified everything is a CSS there is no expert or nothing okay so this is how we need to

Speaker A

write our code to get the what is an ultimate goal is to get this element to get this element we have to navigate from the beginning what is a main host and that is hosted by another one that is again

Speaker A

hosted by another one so we need to start from the beginning we need to go deep into each and every host and roote then finally we get this element okay if the single element in single Dom you can

Speaker A

directly get the poost from that extract the root and find that element okay so this is the process of handling shom elements and selector Hub will help us if if we do not have selector Hub we need to write our own code like this okay why they put sleep command for every Dom because every Dom will

Speaker A

be loaded one by one step by step so in by loading step by step there will be definitely some delay okay that's the reason thread doly we put for every do that is mandatory if if you do not put

Speaker A

this thread dot sleep at least one second delay sometimes it will not work it will throw some exception okay so that is a point so let me show you another example this is one page you guys can try this but practically I will show you another one some other

Speaker A

application yeah take this so here I have one input box if you if you want to use send case method directly in this input box it won't work so if you inspect this element it is a part of Shadow root and this input the input is actual

Speaker A

element which is a part of Shadow root and who is hosting this Shadow root the Shadow reach is hosted by this one book input decorator and that is again hosted by another Shadow root this is this is a hosting one and that is again hosted by another Shadow

Speaker A

root this is this is hosted by another Shadow this is the main holder so there are multiple things are there and these type of Shadows are very difficult to handle so better to go with the selector Hub and find this element whichever element you want to find identify this element

Speaker A

and it will clearly says this element is inside the shadow D which can't be accessed through X paath use csss for it so just copy this Cod and we will try to use it so directly can just create a

Speaker A

class Shadow Dom elements let's create web driver import this web driver okay now I launch my page and then maximized it so now I want to interact with this element this is a part of Shadow so selector Hub is generated the code

Speaker A

so I'm just copying this code here the search context we have to import okay now just observe so this is a element inside the shadam so this is the main host host one and from the host uh this this is the actual storing in the string uh book app title so this

Speaker A

is optional just taken a variable actually this we can comment not no need this is the main thing so driver. find element by. CSS selector this is the main host of Shadow rout from that we are getting the shadow rout so we got in the shadow and by using Shadow we are finding the element by using

Speaker A

CSS selector input so basically it is not captured a host in between it is basically what it is does is if I go back to the code again so book app book iph app app title equal to books where is

Speaker A

this element present book I an app you can see this this is the one so they have taken this is the main hold which contains a main Shadow root and this particular Shadow root is having multiple Shadow Roots but they are ignoring all of them and finally it is reaching the element okay so if

Speaker A

I go back this thread do sleep we will import and this particular Shadow whatever you get Shadow do find element this is the input tag so here you can pass end Keys dot send keys of I can say welcome

Speaker A

okay now observe okay before handling Shadow D suppose if you directly locate an element how it will work what kind of exception it will throw we'll see that first commented this I'm directly locating an element driver do findind element by. CSS selector you can also use xath here no problem

Speaker A

but we'll see what is an exception it will throw but when I handle this through Dom we should not use XPath see it is not able to enter the value and it is giving some exception no such element

Speaker A

exception why because our driver cannot locate the element because it's a part of the Dom only even if you use l selector it cannot locate why because it's a part of the D so first we need to capture the root Shadow from that we can extract the element so this won't work directly

Speaker A

so this is throwing no such element exception if I use directly it will throw no such element exception so no such element exception so this will not work so now we need to handle the shadow so first we need to capture the shadow root store in the shadow and

Speaker A

thread do sleep and element now let's execute this see now it is successfully entered the value so this is how we can simply hand in the shadom so make the take the help of selector Hub that will automatically generate the code okay and then you can

Speaker A

just copy paste and use it so most important thing Expo cannot handle shs xath this the only place only place xath won't work xath cannot handle Shadow Dom elements only CSS not not only xath other locators also won't work only CSS can handle Shadow Dom elements

Speaker A

so they have they have directly taken this let me show you this once again so this is the actual element this is a part of the Shadow roote this is holded by book input decorator actually right and again this is holded by another Shadow route which is holded by this is holded by this one so

Speaker A

we can also skip the between this actually we can also skip them one after another we can skip them actually so they have taken main uh hold is this one means Shadow host is this one from that they're getting the entire Shadow route means it will get all the roots everyone

Speaker A

and wherever this input tag is there they're capturing so that's how they have designed this so they directly get the host main host this is a book app equal to books from there they're extracting the element okay so we we we cannot loc at this this element with single

Speaker A

step so we need to write a multiple steps so this is the way we can handle the shadow D elements but if you do not have selector Hub is very very complicated to handle this element okay so you don't need to do anything just inspect the element selector Hub will

Speaker A

clearly intimate you whether this element is a part of the Dom or not clearly show you it is inside of the do cannot access through xath so immediately just copy this piece of code and use it okay so for the first CSS they use tag and attribute yes yes so yeah this is the tag and

Speaker A

attribute so tag is optional tag is optional but they have used tag tag and attribute even is a Shadow D it is handle line single Shadow Dum yes but we need to First capture the main host from that we can navigate to any Shadow route because if the main host contains the three

Speaker A

Shadow Roots you can get it any Shadow root like that okay so you guys can try this as an assignment I'll give it to you okay so this is the one so three are there so you can take one of them first one or last one whatever so I want to capture the text from

Speaker A

this element so multi nested Shadow very simple I already captured the code also for those three element just you need to copy paste and for the last element you have to use get text method if I use get text method this will return the text value okay same thing for

Speaker A

the third element for the last element you have to use get text that will return the get text so all three elements have already given the code and rest of them you guys can explore okay this is the shadow D so Shadow Dam cannot be handled through X path that's the main

Speaker A

point only through CSS we can handle now so let's move to the next one SVG type of elements SVG elements SVG elements are basically nothing but a image small icons you can see on the page right so basically we cannot click on the icons icons I'll show you practically

Speaker A

how it will work so what is an SVG element how we can handle this let's go to orang HRM admin admin 1 2 3 click on the login see as soon as a log here you can see some options right admin PM leave time Recruitment

Speaker A

and so on so beside this text you can see some icons here these are all SVG elements these are all icons basically okay SVG elements so if you inspect one of these element uh in the Dom you can

Speaker A

see SVG tag you can see SVG tag and if you go back to the selector Hub it is generated some exper here okay and for this particular SVG we cannot directly locate actually so if you normally copy the xath for this by using Dev tools and I paste it over here and try to find it invalid xath the x

Speaker A

paath is correct but it's not able to locate this SVG element so from the dev tool see sometimes Dev tools xath will not work properly especially shadam element shadam element anyway we cannot handle SVG elements you can see I'm copying the xath for the same SVG element I'm trying to check

Speaker A

whether it is identifying or not when I press enter it is clearly saying selector Hub is saying this is a SVG element and this is also does not support standard xath format very very important standard xath format means what absolute xath so this is a most of it is an absolute expath so this

Speaker A

won't support so that's the reason it is giving invalid xal even though if you're locating SVG elements your selector Hub will clearly intimate that element is a SVG element you cannot handle just by rating a normal xon okay suppose I'm trying to get full X path I think this is a full

Speaker A

xath still it is an invalid okay sometimes Dev tools X paath won't work for some type of elements this is an example okay so how we can handle this so whenever you want to handle the SVG elements what we need to do is this is xath which is given by the selector Hub it is giving zero elements it

Speaker A

is giving zero elements but still we can use it in our automation still we can use it in our automation okay so let me tell how exactly we want to capture the SVG element where is this SVG element is present in this SVG element is present in somewhere it is saying normal space is equal to

Speaker A

slash and name equal to SVG so let me locate this element let's say p so this is actual SVG element inside the SVG there is a g inside the G there are so many things are there this is a basically

Speaker A

a kind of Technology they use to create an icons okay now this is actual SVG element this we need to find out and this is the anchor tag and all of them all of them are La tag so normal xath won't

Speaker A

work so this is a syntax we have to use for svgm okay let me copy this this is for uh just a second okay let me inspect this time see this is one element is matching so this these are

Speaker A

different type of xas so let me go to time okay so let's you can inspect any of them you can simply say inspect and go to selector Hub you can see something and this is one type of xath I'll I'll copy some xath you can find what is

Speaker A

a common thing in this let's see I'll highlight one more thing let's say highlight my info it is giving something else this is our performance since there is one common thing in every every xath can you find what is the common thing in these three

Speaker A

xath there is one common thing name right the name method is there so this by using this name method only we can access SVG element so other things are again optional these are all automatically generated by xath but the name method should be there if the name is not there we cannot

Speaker A

locate the SVG elements okay now this is the xath I have written one element is matching so let me use it in the dev tools window I say control F and I put here see it is exactly matching with this element actually uh if I look at this okay let me inspect see this

Speaker A

is the element which is captured so name is a method extra method which will use to locate SVG elements and other than this it is captured another elements Okay so so SVG elements also we cannot directly access by using standard X paath so we have to use something called name

Speaker A

method so by using name method we can access SVG elements so Dev tools cannot give SVG elements only through selector Hub we can capture xath for the SVG elements remember this so let me try to use in our automation test script so we can just use a new class

Speaker A

yes so name is a only the representing tag name for SVG element I'll show you this just a moment SVG handle SVG elements okay so I'll just copy some piece of code okay I just login open our application

Speaker A

and uh implicit wait and just I click on the login so after login so let us try to inspect the element directly by using X paath okay let's say I have something called time let me inspect this time where is this time yeah

Speaker A

okay actually this is the element time element in the SVG there is an element okay let's capture the xath for this directly I'm inspecting this icon okay when I inspecting this this line is got highlighted now I'm copying the X path directly and

Speaker A

use it and see what is the exception it will throw driver. find element by. xath dot click this is the direct xath I have written we'll see whether it is able to click or not and what type of exception uh it will give you we'll see

Speaker A

that see it is not able to click on the time it is giving some exception yeah it is still trying yeah so no such element exception that is unable to locate exception so what type of X paath we have given is here is absolute X paath full X paath we have given so the

Speaker A

complete X path which we have given so let us try with the relative X path so this is with absolute X path it will not work and let's try with the relative X path so how to create relative xath for this inspect this

Speaker A

element okay and this is a span this is actual SVG element let me put this yeah it is a time okay this for this element span normalize space equal to I'm taking text method or whatever I'm taking time here so one element is matching uh

Speaker A

probably this will go and match we'll see because I'm using text method we'll see go back and try to use this driver. find element by. XPath dot click okay and one more thing in this particular time okay this is a

Speaker A

text value actually this is Again part of the SVG this is the part of the SVG element yeah it is successfully clicked why because we have directly taken the text value we have not located this SVG element so this is working fine

Speaker A

but through SVG element we cannot find that element so we need to use a name method so this is retive X path using so this will work fine so now let me write identify SVG element identify the SVG element so now let us try to inspect this element okay and uh get

Speaker A

this okay this is the SVG element use this so name equal to SVG we have to specify go back driver. this time I'm exactly identifying the SVG element not on the text so by. xath here xath will work

Speaker A

but standard xath will not work normally if you capture xath that won't work along with this we need to additionally add this method name equal to SVG dot click run as Java application because in application there are two

Speaker A

ways they provided using text we can click using svgs also we can click what time ships think something went wrong is taking the parent element of SVG you can see anchor tag is taken oxt main menu item active from that we are identifying the SVG element so to

Speaker A

identify this SVG element we cannot directly say sl/ SVG we have to use a name method so this is the only way we can handle go back and see I think it is executed okay let me try to run one more time

Speaker A

SVG element we can perform click action but most of the times 99% of the times we can see the text beside the SG element so we can easily handle this but this very very exceptional thing so normally if I give sl/ SVG it won't work because there's an SVG element you

Speaker A

have to use only name attribute this is the only way we can handle yeah is exited without having any error maybe some problem from my application side it is not allow us to click on this SVG element but I we we don't get any exception that means

Speaker A

this statement is successful executed but that's not showing on the application you can you guys can try this this is the right exper okay let me try to use another one yeah this worked actually it is successfully click on the time

Speaker A

actually I have taken this button title equal to time sheets star is a tag in this I'm finding the SVG tag so let's find what is this actually so the button 0 element title equal to time sheets can you find anywhere title equal to time sheets

Speaker A

somewhere Z matching okay okay I think this won't work yeah you guys can try this this one not this one this this will work actually so if you have an SVG element direct xath will not not work or standard xath will not work

Speaker A

you have to use name method so to representing the SVG tag you have to use this name so if I directly put to sl/ SVG that will not work okay you have to use specially this particular name attribute

Speaker A

so then it will work so just try this for other elements there are multiple things are there SV elements I'll also give one another assignment for this you do just do one round of practice right so let us stop here for today's session we have seen how to handle broken link and Shadow

Speaker A

D and then SVG elements so apart from this I will also share some of the videos so I have explained some other scenarios related to SVG and Dom Shadow Dom you can go through those videos and you can understand more detail about it apart from these examples whatever we discussed

Speaker A

during session and if you need another examples I'll share some of the other video you guys can try that okay that's it uh I'll stop here for today's session and we'll continue tomorrow

Topics:SeleniumJavabroken linksHTTP status codesweb automationSDETQA testinglink validationweb application testingautomation testing

Frequently Asked Questions

What is a broken link in web applications?

A broken link is a URL on a web page that does not have a corresponding resource on the server, often resulting in error responses like 404 Not Found.

How can you identify a broken link using Selenium with Java?

By checking if the link has an href attribute, sending a request to the server, and verifying if the HTTP status code returned is 400 or higher, indicating a broken link.

Why is the HTTP status code important in detecting broken links?

The HTTP status code indicates the server's response; codes 400 or above mean the resource is unavailable, which helps determine if a link is broken.

Get More with the Söz AI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play

Or transcribe another YouTube video here →