Selenium Locators - Part 4 | - Locating Elements in Shadow DOM

hello everyone welcome you all in the today session we are going to learn how we can locate elements inside shadow dom so we already seen what is dom in our previous videos so dom is basically document object model and which contains all the html nodes and by using uh normal selenium locators like css selector or xpath and some by using some basic locators we can easily locate the elements within the dom structure but what is a shadow dom means it is something different than normal dom so the dom is normally contains a shadow dom so which is we can say which is a subset of the dom and if i just look at here so dom is a tree representation of html nodes shadow dom is a subset of the dom so sometimes what happens is the whole dom structure so which is contains multiple nodes and there is a some other nodes which are again comes under one node let's say here this is a shadow host and the shadow host itself is a node and which contains a shadow tree so these are also different kind of elements and which are part of shadow host so shadow host is a regular node that the shadow dom is attached so this is also part of the entire dom structure but the speciality of this shadow dom is we cannot directly interact with this element so we cannot directly locate these elements so most of the hidden elements will be part of this shadow down so to locate these elements we have to use a special approach because in the normally in the selenium locators it directly cannot locate these elements which are present inside the shadow dom so if i just look at this structure the whole structure is a document and inside this there are multiple nodes and the shadow host is a normal node which can hold the shadow tree and again inside the shadow dom we have multiple elements so this is called as a shadow tree so now we will see some basic example so let me just uh show you uh one website where we can find uh shadow dom let me open this application now here i'm trying to inspect this element let's inspect this element and if i just look at this uh html dom and i'm trying to inspecting this element so here you can see this is the input add right so if you are trying to locate this element so how we can locate is say control f so let me just uh use i because uh this is input tag i'm using css selector i'll say slash id is available so hash i'll say input so when i say enter which is not able to locate this element right so let's go to the crow path and you can just type here and let us try to inspect this element right so we have inspected this element and is it is the crow path is also not able to generate x path here so what does that mean is we cannot use any locators to locate this element because this element is a part of shadow dom so how we know that whether it is a part of shadow dom or not so you can see a special block in the html let me show you that block so if i just look at this is the element and if i just go up you can see shadow root and this is again present in some other element and this is present in another shadow root and this is present in another shower root so this is the parent element book app inside this shadow root so inside this shower root whatever elements currently we have we cannot directly locate those elements by using normal locators even x path doesn't support to locate elements within the shadow dom so only the css selector we can use but we cannot directly use css selector to locate the elements so what we have to do is first of all we need to capture all the elements which are present inside the shadow shadow dom and then we can interact with those elements by using css selector so css selector is only the locator which will support our dom elements again this is not a directly support first we need to get the shadow dom elements and then we can search for those elements and xpath slide forward doesn't support which can which we cannot locate elements by using x path inside the shadow dom so now we'll i'll show you how we can locate elements within the shadow dom by using css selector so for that what you have to do is let me just start writing a code so here let's go to eclipse and here this is the package we have created in my previous videos i'll create a new class and i'm just giving a class name is shadowdom example okay i'll say shadowed on example one okay so shout out i'm example one let us take a main method and then finish all right so now let me just write a basic code which will set the driver and launching the url and all say system dot or dot sorry system dot say property so system.property we have to specify the uh key webdriver.com.driver and then location of my driver and after that i'll create webdriver object i'll say web driver driver equal to new using a chrome driver i'm using chrome driver and that's it so this will launch my browser so import this webdriver and then import this chrome driver all right so now once it is done which will launch my browser then i'll open my application url i'll say driver.get here i'm just opening this url of application okay and then after that i'll try to maximize this page by using driver dot manage dot manage dot window dot maximize okay all right so now we have we have open this application and then we need to locate the element so let us try to locate this element with the normal locators and we'll see what is an error it will get so currently i want to locate this input box i want to pass some value okay so let us try to write our own x path for this so xpath anyway it doesn't support because this element is present in the inside the shadow dom but still we'll try and we'll see what is an error it will get so here i have an id so i'm just going to use this id attribute uh along with xpath and to locate the element so what i can do is i'll say dot find element by dot x path okay and here i'll write one x bar this is last slash and tag name is input and here i'll specify the attribute is id and the value of the attribute is input so whatever x path i have written which is right and the problem is which by which we cannot locate the element within the dom so within the uh shadowed up so and then i'm passing some value i'll say send keys i'm just passing some value here okay so this statement is perfectly right right so let me just execute this and see what is the error we will get okay now it is launched my webpage and now so it is trying to interact with the element so now we'll get some error here okay so now we got some error let's see that error here what it is clearly saying is no such element exception because the x path which we have written is perfectly correct but this x path is not able to locate the element because that element is present inside the shadow dom so this is a exception we got when i use this method even if i use css selector also we'll get the same error so let me just try with the css selector now i'll comment this i'll say driver dot find element my dot css selector now how we can write a css selector so tag and id both we know so i'm just writing tag and id combination i'll say tag is input and id we have to specify with ash so the id value is also input so tag name is input and id is also input right so tag name is input id is also input so both i have mentioned by separating hash tag and tag and id combination and then i'll just say dot send keys and here i'll pass a same value and says testing so this time i am using css selector with the tag and id combination so now let us run this run as java application okay so now it is launched my webpage but it is not able to provide the value so if i just go here and again we got the same exception so now no such element exception so this is a problem guys with the shadow dom elements okay so with the normal locators we cannot locate the element directly so now we need to find a way by which we can find the elements which are present inside the shadow dom so here celium normal locators doesn't work so the only way we have is by using javascript executor we can do that okay so for that what we have to do is we need to let us try to analyze the html here so for this element i have captured the screenshot let me just share okay so this is a html code of that particular uh screenshot of a tiller page so just let us try to understand these tags so where exactly the shadow dom is present so here our element is there so input is my tag so this is my element okay so here let me just take the pin okay so here our element is present so if i just little go up so this element is part of this shadow dom so always shadow dom is representing shadow hyphen root so this is the shadow down here so our element is a present inside the this particular shadow dom and again this shadow dom if you just go a little bit up so boot iphone input iphone uh i think this is not part of the shadow root guys so because this is a part of this one so in this tag book input decorator we have this element directly so this shadow root is also available but there are some other elements which are part of shadow root so this is a shadow dom so we don't need to do anything with this so our element input element is directly present inside this stack so book in input decorator right so this particular element this particular tag is again present inside this tag so here also shadow root is there but this element is not part of the shadow root this is not part of the shadow dom so we can directly go and refer this element and app toolbar again if i just look at here this app toolbar is not part of the shadow root so this is again shadow dom elements are there but if i just look at here i have python toolbar this is a uh element which is not a part of the show row so under shadow root we have only these two elements style and dig but these two elements are not part of shadow root so again this element is a part of app hyphen header tag and now this app python header tag is a part of shadow dom now we can just look at here a python header which is a part right so here shadow root tag is a part of book hyphen app so here in this this app python header is a part of shadow dom so now to locate this input element what we have to do where we have to navigate is we have to navigate from this particular tag so first we need to go to the shadow host so this is a node which is holding this dom so this is called as a shadow host and first we need to get this shadow host from by using this shadow host we have to get this dom so shadow root and once you get this shadow root now we need to navigate here and from there we are going to directly here and there can go here and there we can get this element so in this particular structure so here there are shadow roots are there but whatever tags we are expecting whatever elements we are expecting to get these are not part of the shadow roots here but here at the beginning this element app underscore header is a part of shadow root element so this is the shadow dom part okay so now we'll see how we can get this shadow dom element and inside the one shadow dom so rest of three elements are present so in this space there are multiple shadow dom elements are there there are multiple shadow dom blocks are there but we are going to get this element from the first to shadow dom itself okay there are multiple shadow doms are there but if i just look at these stats so the input tag is present book input decorator so which is not part of the shadow dom so we can just ignore it now book input decorator is another tag which is present inside the app underscore toolbar and even app underscore toolbar is also not part of the shadow dom so this is a part of app underscore app hyphen header now app python header is a part of shadow road here and if i just look at here this is a jail node of shadow root so this particular dom we have to get it by using shadow host and then from the dom we can fetch this element okay so this is the process now let us see how we can get this shadow down so for that we have to use javascript executor class so now let me show you how we can write a javascript executable class so before that we need to get this root node so what is the root node here is if i inspect this element so a python header so this is the root node under this the shadow dom is started so we have to get this shadow dom by using this root node okay this is called shadow header so let me just get that element and that is a normal element we can get it from the dom itself so driver dot find element i say by dot and here i have only tag so app f1 enter there are some attributes all there but i have only one tag with this name so i can use stack name to get this element app iphone header so by dot by dot tag name by dot tag name right so sorry so this is app this is a python header okay that i am going to specify here right so i got the root element this is my root element and we can call this as a shadow host okay shadow host or we can say root element so it is a root element actually shadow host itself is a root element which can hold the shadow dom so now this is a shadow shadowhost element and i will just give some name i'll say web element web element this is my root now import this web element okay now by using shadowhost element i can get the shadow down so by using this element only we can get the shadow down so how we can get the shadow term again if we go back to the picture so by using this element shadow host i'm just want to get this shadow root so how we can get this is we have to write a javascript executor class okay this is the only way we can get the shadow down so for that what you have to do is we have to write and say javascript executor right so javascript executor let's say js equal to and here we need to typecast javascript executor class with our driver so what i have to do is we need to assign the driver and first of all import this javascript executor and this is a lowercase letter so javascript executor then import this class and assign the driver to java js and driver is a different object so we need to do typecasting so how we can do this is we can simply say javascript executor here so i'm just casting the element just a moment yes and then javascript register js equal to so this way we can just create a javascript executor object and then by using this javascript executor we have to run one command so js dot execute script okay so inside this we have to specify something called uh one parameter javascript statement we have to execute so that is return arguments right so written arguments of 0 so written arguments of 0 and the dot there is no second argument here okay the second argument will be the root element so by using this root element we have to get the shadow dom inside this root so the first element will be written arguments of zero dot there is a method called shadow root okay so this is the first argument we have to pass and this shadow root will be returned from which node the root node so that we have to specify here and then semicolon okay and this will again return a web element so we have to typecast this as a web element okay and uh import this web element okay so we'll do that later so import this web element store that in a variable so this is my shadow dom shadow of one and i create this as a web element okay so let me just repeat this statement once again so we have captured this element so we have captured this uh book iphone app so this is normal element okay and by using this element i just want to get this shadow down and shadow iphone root so to get this i have written one javascript here so javascript executor js equal to driver we have to type cache into javascript executor and here js.executescript and this is a statement which will return dom and by using this shadow root and that again written the shadow dom as a web element so now shadow down okay shadow down one i have saved that a shadow term is a in a variable so which is shadow dom one all right so now by using the shadow dom one right i got this element now shadow dom i got it so inside the shadow dom so there are so many elements we have and inside the shadow dom we have multiple or nested shadow dom also will be there sometimes but whatever element we are expecting here that that will be there inside the first shadow dom itself because inside the shadow dom there is multiple shadow doms are there here it is one shadow dom and here one more is there but our element if i just look at the hierarchy which is present inside the book input decorator and which is part of app toolbar and which is part of app header and this app header is a part of your sharded so now we got the shadow dom so from this shadow dom we have to first capture this element app header from this then we have to capture app toolbar from this again we have to capture book input decorator from this we can extract input so here we are dealing with one shadow dom now so we already got the shadow down into this particular variable now by using this we can extract these elements one by one so now i'm going to do that so use this element shard dom element okay and dot i'll say find element by dot so what is the app header i want to extract so what is a hap editor is my tag name and i do i have another attributes but with this stack name we have only one element so i can directly use a tag name so i want to extract this app iphone header so by dot tag name and directly i can specify app iphone header python header okay that's it so now this will return the element this element from the dom shadow dom okay and that will return again one more web element so i can store this as web element and this is app header so i'll say app header dot okay now we got this element from the shadow dom so this is the only element we have to capture from the dom guys okay shadow dom and again this element is following this one and this element is followed here this element is followed here so input tag is from book input declarator and book input decorator is from app toolbar and this is again part of the app header okay this is again normal web elements we can extract directly fine so now by using this web element app header then i want to extract this element app iphone toolbar okay our python toolbar and again app iphone toolbar there are two elements we have here under app hyphen editor there are two app iphone toolbar tags are there so which one i want to get the second one okay so here uh i want to get the second one so what i can do is i'll additionally add this class attribute okay i'll literally add this class attribute and one more thing uh here is we can use only css selectors to get these elements inside the shadow dom so i'm just going to get this app toolbar which is a second node inside the app header so to differentiate these two elements i just additionally add this class attribute also in the css selector so that i can differentiate these two so now app header i'm just taking this element from this dot find element again by dot css selector i'm using now because i just want to differentiate these two because if i use tag name so these two elements are exactly the same so to differentiate these two i'm just going to use this class name additionally so here tag with the class attribute so combination i'm going to use so how we can separate tag and class so tag name is app hyphen toolbar and i can specify like this app by phone toolbar and dot so what is the class here class is toolbar iphone bottom so toolbar iphone bottom okay so toolbar iphone bar so now with this uh with this css selector i am able to capture this particular element and this will also return another web element i can store that in this variable i'll say web element this is uh this element is app toolbar right so this is one app toolbar so i'm saving as app toolbar done so now we have navigated till here so from the root node we capture the shadow root element by using javascript from the shadow dom we got app header from there we got app toolbar so from there we have to navigate to book input account so these are not part of a shadow dom again so this is the only element header which is part of shadow time element now i need to get this book input decorator which is also a tag which is part of app toolbar and if i just clearly notice the shadow dom is there here but this element is not part of this okay this element is still part of app toolbar so now i'm using this book input decorator tag i want to capture this from app toolbar so by using this app toolbar again i'm finding the element find element and tag name is book input decorator book input decorator okay so i can use tag name itself we can we have we have only one element so i can say by dot tag name and here the tag name is book iphone input iphone decorator so book iphone uh input iphone input iphone decorator i'll say decorator okay so now we have we have captured this element so book is for input iphone decorator and this will also return one more web element and what is this element this element is this one so book input decorator element i can store that here web element and this is book input decorator equal to then app toolbar dot find element all right so what we have exactly done here is so here we have to close the quotation so what we have done here is from the shadow dom we have captured the app header tag and from the app header tag we capture the app toolbar and from the app toolbar we capture the book input decorator so inside this element our actual element is present so inside the book input decorator and there is again one more shadow shadow dom is there but our input is not part of the shadow our input is a part of book input decorator so we have to capture this input tag that is exactly our uh search box here and how we can capture this i have id and tag so i can use css selector along with the tag and id combination to get this element so how we can use take this book input decorator dot find element by dot css selector and here the tag is input and the id is also input so id is also input so now i'm using tag and id combination and here i'm going to send a value so send keys and i'll say testing that's it okay so now this partial statement is able to locate the element okay so let me just repeat once again and this is the dom structure of the whole html page so this is the element we want to actually locate so this is the element and if i look at this element this is a part of book input decorator and again this is a part of app toolbar and this is again part of app header and this is a part of shadow dom okay and here also you can see you can see shadow roots but whatever element we are expecting here they are not part of the shadow doms if they are part of the shadow domes again we have to capture the shadow dom so once again we have to write a javascript executor right but here we have written only once because we have to capture this shadowed arm from this we got this app header from there everything we got it in the hierarchy mode okay so this is a process we have followed now let us run the script and see whether it is working or not so let me run as java application okay now it is launched my application okay so it should enter some value here if it is not enter definitely there is some issue let me just check that issue okay so now what exactly is saying no such element exception so still it is not able to find something so what it is not able to find here is app header is not able to find so let us fix that error so where exactly we use app header and we use app header here okay from the shadow dom one we have to capture this element right so this is hap header and we use by tag name that is fine so shadow dom also we got it here shadow dom one dot find element by dot tag name of app header and this is a web element okay and perfectly fine so let us put some wait time so i think this is correct statement written argument of zero dot shadow root okay comma rule so perfectly fine so let me just put some implicit weight or sometimes it takes some time so after creation of the driver so what i can do is i'll say driver dot manage dot timeouts dot implicitly wait and here i can say 10 seconds and after that i'll specify certain sometime unit so time unit dot seconds so once you put this implicit weight then if there are any uh lagging the time so it will just wait for those elements okay so app underscore header css selector it is not able to locate somewhere so this is a css selector and this is app under tag name so this is a tag name and this is a class app iphone toolbar and toolbar iphone bottom okay so let's try to execute this save and one more time we will try okay so still we have an issue so let us cross check what is an issue okay so we got that issue so here the problem is this one guys app iphone header so actually when you see this uh shadow dom so the first shadow dom is present inside there this is a root actually so from this we have to navigate not this one so by mistake i have mentioned app iphone header so if i just look at here so this app iphone header is also part of book iphone app so we have to first start with this this is a root node so book iphone app is a root note from that we have to get the shadow down so book if an app is a root node so if i just go here and as soon as we open the page so here the first thing which we have to get is app iphone book iphone app so that is a node so book iphone app okay and now this is our root node so book iphone app is my root node so from this by using this book iphone app we need to get the shadow down so this particular route we have to pass here then it will give you shadow dam so from this shadow down again we have to get the app header and from this again save process so this is the only mistake we have done so now let us execute and see whether is working or not so let us run as java application all right so now it open the page now maximize and then it is able to pass the value so this is how we can uh locate the elements which are present inside the shadow dom so we have to use this java javascript executor class this is the only way we can do that okay so sometimes here in this example this element is present inside the multiple tags and directly we got only one shadow dump from this whole dom structure and all the rest of the elements are present inside the one shadow dom so sometimes one shadow dom contains a multiple shot atoms okay so for example here uh this is one shadow shadow root and here one more shadow root and here one more shadow so something sometimes we can see one shot arm inside another shadow down and the elements will be there uh in nested shadow rooms so in those cases how we can get multiple shadow ramps so every time when you want to get the shadow dom so we have to execute these statements multiple times whenever you want to get the shadow down so we have to execute the statement and here we have to pass the shadow host and once you specify the shadow host this will give you the shadow dom which is part of that particular shadowhost so if i write this statement multiple times your code will be very huge and that is not good thing so what you can do is so as a best practice we can just write a simple method a java method inside this we will keep this code and whenever you want to get the shadow dam we have to just call this method by passing the shadow host okay so now i'll show you how we can get multiple shadow dams from the dom and then we can see how we can interact with the elements so i'll show you one more example and this time we will see how we can extract multiple shadow atoms from the dom structure so let me just open one more application okay so this time i'm just using this one so in this application we have uh some products here and you can see this men's outwear and there is out where and so some elements are there so here my requirement is i want to just click on this the first element shop now for the men's outerwear okay now when i just right click on this element just observe this dom and if i just look at this dom let me just maximize it okay so when you just look at this jump so here this is the element i want to interact okay so here my element is there so this element is present shop shop button and again this is present inside the div and this is present inside the shutter dom so we can see here short adam root is there and again this shorter term is present another shadow down and again if you just go back and this shadow is present another shorter term here so there are multiple shadow ramps are there so let me i have already captured the screen shot into the screen just here you can analyze very clearly okay so now if i just look at here this is our element which we need to look at this is the element and this is the element which is part of shop button so this is a tag and this is again part of this div tag now so this particular part right the entire thing is part of the shadow down shadow root we can find and this is a shadow host so by using this node we have to extract this whole shadow dom and then we can interact with the elements now again if you look at here this shadow dom the shadow dom is associated with the shadow host right shadow host node and again this particular node is a part of another node so this is iron pages so this is a part of this one okay so this is not part of this shadow dom so this is again there is one more short term but we no need to do this any we don't need to do anything with this and these are all elements part of this shadow node shadow dom and again this is the part of the element not part of another shadow so this is a part of the iron pages element now again if i look at this this iron pages tag is a part of this particular shadow because this is one element this is another element okay these are all different elements are there in the the outer the top shorter term here and this iron pages is also part of the shadow dom here okay now if i just look at here so this is the main shorter term which we have to extract by using the shadow host so by using this type so this is the root tag so this is our root attack so by using this root tag we have to extract the shadow down now inside the shadow dom we have this element directly we can access this element directly so by using this element from this element we have to go to another element so this is also an element now here it is a root and by using this element we have to extract the rest of the shadow down and here we can find this element here so how many shadow times we have to interact here now so we need to get to two shadow dams the first one this is the first shadow dump and here this is the second shadow so in between there are multiple are there so here this is one and but we don't need to do this anything with that because our elements are present inside this normal nodes right so let me just show you once again so this is the element which is a part of the shadow node and all three elements blue color arrows are representing the normal nodes which are part of shadow root which is shadow dom and this is a shadow host so by using this code we have to capture this and this is again part of the node normal node and this is again part of the shadow dom and this is root header okay so now let us see how we can do this step by step now let us go to eclipse and here i will create another class name it as shadow dom example two and this time we have to extract multiple shadow dams from the dom okay so the javascript executor we have to write multiple times so instead of writing multiple times we can just put that in a reusable method and whenever you want to get the shadow down we just call that particular method all right so here i'm just going to write uh the basic stuff like system.set property and here we specify the key and the location of my driver then import this web driver new chrome driver all right so then i'll say driver dot get and here i'll specify the url of application so this is the application url and after that if you want to maximize you can maximize yourself say driver dot manage dot window dot maximize and if you want to put implicit weight you can also put implicit weight here so i can say driver dot manage dot implicitly wait implicitly wait so timeouts dot implicitly wait and here i'll give 10 seconds max and time is time units time unit dot seconds all right so this is a waiting time input so now i have open this url and then maximize the page all right so now here we have to start so as a first step what you have to do is so we have to get this first shadow dom by using this shadow host node so this is a root tag so what is the root tag here is sharp iphone home okay so that is the shadow dom we have to extract so this time what i'm going to do is i just want to create a reusable method right i will call that method whenever you want to get the shadow down so for that let's keep this main method one side and then i will create one user defined method here before doing all these things and that method will return so let me just create one method get shadow down okay and here uh from this code i'll just pass two parameters let me write properly get shadow down okay this is my method and uh inside this method i will pass two arguments from the main method from the main script so what are those two arguments the first argument is web element because if you want to get this shadow dom right so what we need to pass we need to pass a shadow host element so by using this element only we can get the shadow dom okay because the shadow dom is associated with this element so we need that element so we need one element i'll say this is element and the second parameter is a web driver so i'll pass a webdriver parameter to work with the elements and what this method will written is this method will return a web element i'll say the return type is web element and i'm trying to access this from the main method itself so main is a static method so i will define this also as static method so that i can access it so web element without creating any object i can directly access this method inside the main method because main is also static and this also static method okay all right so this is a method so i just created and we have to write a return type later so now so previously what we have done is we have created javascript executor right so let us go to the first example again so this piece of code i have created so now this time i'll put that code inside the method so javascript executed right so js equal to javascript executable driver and then here shadow dom equal to web element javascript executor script and here these parameters are same and whatever element i am getting here that element i am passing here as a root element okay and then what this statement will do this statement it will return a web element here and this web element i'm going i'm storing into this variable and that web element i'm returning here okay so this is a a method which we have to create so if you want to extract multiple shadow runs you have to create this method like this so now we can extract any number of shadow dams from the main dom all right so this is a user defined method we created so we need to just pass one element so what is the element we have to pass here is this one so shadow host we have to pass then it will give you shadow and here also here we have to pass this sharp iphone home this is shadow host element then it will give you shorter time so that's the reason so two times we have to call this method in your script so apart from this we should also pass the driver because here we have to use a driver to get that element fine so this is our user defined method now come back to the actual script so now the first and most important thing is we have to right so we have to first extract the first shadow dom by using this root node so what is the root node here shop iphone app shop iphone app so this is a root note we have so by using that root node or shadow host we have to extract the first shadow dom so this shutdown contains everything so here this is a shadow root so which we have to extract so for that i say driver dot find element okay and uh by dot tag name i can directly access so that i have only one tag with this name shop iphone app so here i'll say shop iphone app and this will give you the root node right so this is root node or shadow host so by using this shadow host we can extract the shadow dom and here i'll store this in a web element i'll say this is a root node okay so by using this node i should get the shadow dom shadow dom right so then i have to call this method to get the shadow term by using this root so how to call it is simply say get a shadow dom here and we have to pass two parameters one is the root element the second one is the driver which we have created so two parameters we have to pass and then we have passed two parameters then what you will get as a return type so we will get a shard automatic return type so that is a web element so here we will create a variable i'll say shadow dom 1 okay and this should be web element so now by passing the root tag and driver into this method i got shadow down so i got the shadow in this variable so now i enter into the first shadow dom now if i again check the structure so we are here so inside the shadowed arm so this node we have to recognize ir and iphone pages okay because inside the first shadow dump so there are so many elements are there but which element our element is present inside the iron iphone pages right so first we need to go to this element we need to go to this element again inside this element we have a shadow host okay first let us go to this element either iphone 8 pages is a normal element this is not a shadow dom so by using the shadow ram element we have to capture this so either an iphone pages is the next element so by using the shadow dom one i'm capturing one more element i'll say find element right so by dot tag name and here the tag name is iron iphone pages so i run iphone pages so i got this element so from the shadow dom i got this element iron iphone pages now inside the iron fn pages we have one more element called shop iphone home okay i have to get this element and then i can use that as a shadow host for the next shadow dom so iron pages i capture so i'm just storing that in a variable i'll say that element web element iron pages equal to so now i got the iron pages tag so inside this we have one more tag called shop so we have to get this one so shop iphone home so again take this iron pages dot find element by dot again you can use tag name and tag name is shop iphone ho shop iphone home or you can use a name attribute also you can say shop i hunt for name is there class is there so you can use a name so name equal to home so you can simply say instead of tag you can use name and the value is say home okay so this will return this will written iron pages so this is a normal element now by using this element again we have to so we got the iron elements here from the iron elements we got the home so from the iron elements we got this home so shadow host so here we are so we are here okay now by using the shadow host node again we have to extract the shadow down so this is a shadow dom which is a part of shadow host that is shop home okay so how to get this shadow root again so again this time we have to pass this shadow host root to the method and that will return this shadow dom so this time i'm again calling that method second time okay so this time we have to call this method once again show shorter down get shadowed on and the first parameter is element so iron pages by using this iron pages i got the home element from the page so home element i got so i can store this element on one more variable so here i'll create one more variable web element sharp home okay now this is the root element now so by using this root element sharp home i have to extract this shadow dom so to extract this shadow down i have to call that javascript method so get shadowed on and i'll pass this element sharp home is my element along with the driver and this will return the shadow dom element and that i can store in a variable it's a web element this is shadow dom this is shadow dom two so we already extracted first one now this is a two so now we have extracted shadow dom two so now we are here inside the shadow so here we are so inside this we have again navigated we have to navigate till here so inside the div tag so there are there is a shop button and inside the shop button there is anchor tag so this is actually button okay so do shop button and inside this anchor dot so these things we have to navigate so for that again we have to use css selector because there are multiple anchor tags are there each anchor tag we have a shop button tag is there so we cannot use directly tag names here so what i can do is i can use a css selector here so from this shadow dom okay from the shadow dom 2 i can extract the elements so to extract the elements what i can do first i will go to this div and again inside this shop button inside this anchor tag so if i just look at this application directly you can understand here okay so we can just look at here we have reached till here okay shadow down so here style tag is there there are multiple div tags are there okay so here how we can write a css selector first we need to go to divisor starting from the second point okay so here the css selector we have to use like nth child this is second child dv is the second child so style is the first one dv is the second one and inside this there is anchor tag and shop button so we need to go to anchor tag inside the anchor tag here we can find the this is actually header part so this one right but we don't need this we need a button so inside this shop button we have to go not in anchor tag so inside the div shop button inside this this is the actual button shop now so this is the element we have textual so this is the second development the development is second one inside the shadow dom and inside this shop button inside this anchor tag so this is a hierarchy we have to specify by using css selector so again all these elements are present inside the shadow dom so whatever shadow dom we have extracted shadow dom 2 dot again find element right so find element and uh here we use css vector by dot css selector and here we have to extract so this dv is a second element right so this div is a second element inside the shorter term so we have to write like this so i'll say div this is a css notation end so nth child and the child of 2 so there's a do is a second child so i'll say n to child of two so db colon and thy function of two inside this data then so this is a css selector notation guys okay inside this which we have to go we need to go to the shop button so inside the tag shop button so here this is a syntax which we have to use csc selector shop button we have to use shop button is a shop button is a tag name so i say directly shop hyphen button so inside the shop button we have an anchor tab so again one more greater than and so if you navigate through the tags inside a css selector this is a syntax which you have to follow so till here this is one node inside this shop button is another tag inside this anchor is this is another tag okay so we have navigated till the anchor tag till here and then close the bracket and then here we have to perform the click action so i'll perform the click action done so to reach till this element we have crossed two shadow domes from the html so this is the one shadow inside this we have element inside this element again we have one more shadow inside this we have final element okay so if we have a multiple short atoms we can just write one user defined method like this and we can call this sharadam method any number of times so we have called two times so here once we have called and then here second time we have called so now we have extracted shardons then by using the sharddam element we can extract whatever element we need okay so this is how we need to write a script to capture multiple shadow elements so let us run the script and we'll see how it is going to work so right click run as java application all right so now it is launched my webpage okay maximize now it is click on the shop now button so for the menswear outweigh so it is giving all the t-shirts here okay perfectly fine so what i can do is i just try to change here so on the same application so instead of clicking the sharpener for men's outerwear here i'll say shop now ladies outerwear i want to click on the second button so what i can do is instead of clicking on the div and the chill 2 i'll say 3 here ok so because if i just look at here inspect this element so the same uh shadow dam structure will be there uh the only thing is previously we have clicked here so we have clicked here this element so now we are entering into the second due tag shop button and shop now button so this only small change so let us execute one more time all right so now we can see it is exactly clicked on the ladies outerwear shop now button now we can see the all the dresses here fine so this is how we can handle or we can locate elements which are present inside the shadow dom so we cannot directly locate those elements by using x paths so we can locate those elements only by using css selector okay so that's all for today's session guys so please practice and which is very very important and we don't have a direct locators to locate uh shadow dam elements so this is the only approach by using by using javascript executor we can do that okay so if you have any queries please put me in the comment section and please practice all right so that's it thanks for watching

Channel: SDET- QA Automation Techie

Views: 18,964

Keywords: Python, Selenium with Python, Selenium webdriver, Automation, Testing tools, Selenium tutorials, Python tutorials, Manual testing, SDET, Java, selenium with java, web services, postman, soapui, rest assured, SQL, Programming, Software Testing material, selenium videos, python videos, automation vidios, jira, jmeter, functional testing, QA, QC, Agile testing, SDLC, Automation Step by Step, restapi, Shadow DOM, Document Object Model, identify shadow DOM Elements

Id: bpzyjNZ0jaw

Length: 57min 23sec (3443 seconds)

Published: Fri Sep 18 2020