What is HTML DOM & StaleElement Exception in Selenium

welcome to Naveen automation labs guys please subscribe to this channel and press the be like and to get some interesting videos on selenium and automation guys we will be discussing some amazing tools and technologies so please keep watching hello welcome to selenium training guys this is Naveen here once again so there is uh today I am going to cover one very important thing that is what is HTML table what is document object model you know I generally they say this term that okay we have a you know page element not available inside the document object or something like that so you know I will tell you what exactly what do you mean by you know document object model in fact at the time of interview also you know they ask that okay what is what do you mean by HTML DOM and most of most of the people you know we say that okay is okay let the element not for an exception or estate element exceptions are coming in selenium we say that okay that particular element got is tailed and which is not available in HTML Dom so very straightforward answer we say that okay yes which is not available in HTML Dom and what is HTML Dom that document object model but what exactly it is what do you mean by HTML Dom what is document object model what is the purpose how exactly selenium is interacting how exactly the concept of HTML Dom XML Dom okay and hold on okay you should know about all these things okay so we will cover all these things not how exactly javascript is calling okay HTML Dom API is most of the people they are not aware about that HTML Dom is an APA it's available in the form of interface so that it will give you provision to call the JavaScript API JavaScript functions so that we can change the Dom structure but these are very heavy terms the Dom structure JavaScript we are calling these you know HTML properties and changing the properties and all but how exactly and what exactly it is its little confusing so a lot of people they are asking me that we're going to be in please explain what do you mean by HTML Dom so at a time of interview you should not feel that I'm not a bit about HTML Dom that everybody says it okay element is not you know existed in HTML Dom it got expired or something like that but who provides that HTML Dom okay so these are the very confusing things are there and I have seen it at the time of interviews also whenever whenever I take interviews people say that okay yeah maybe a diamond is not available in Dom then the moment I say what is Dom and this is I don't know what is HTML Dom what is document object model so we should know what is HTML Dom what is document object model okay so today guys there is no programming nothing we will not write any code this is just the concept very important concept okay so first of all what is HTML Dom so guys there are three types of Dom first of all the full form of Dom is document object model one is HTML Dom another one is your XML Dom and the third one is called Dom okay HTML Dom is a standard model for HTML documents XML Dom for you know XML documents and for core Dom is for all different types of documents okay so we will learn one by one so but before that I will give you one very basic example that this is a typical structure of document object model you can see that one document is there under the document we have HTML code this is my root element when HTML tag is there under the tag we have number of tags like head tag under had we have title and then we have my title okay text is there then let's see we have one button or body under that body we have HOF there a property then headers we have and for this a tag we have my link is a text and for h1 my header is a text or maybe some buttons are there or checkboxes or radio buttons are there divs okay divs are there so whenever you see any any page let's see I'll open this particular page that lets see this erm PR oh and if you see if you spy any let see any element so this is what you see this is a complete H EML dorm structure is coming guys right this is a complete HTML document you can see the first is document the first node is document so what do you say this is not the exact HTML code okay guys this is the HTML DOM and if you see the more Dom structure you can see that this particular tab in Firebug and fire path this is a complete document object model in the form of this particular diagram if you see okay it is like that okay guys so always remember that this particular document object model if you open this see we have document and we have HTML then we have head under that head we have untitled then we have different frame set okay and we had number of attributes are available in these nodes but this is not guys this is not the complete HTML code see HTML this is not HTML code this is HTML Dom this is called dog HTML document object model right so let's always remember this thing that in any dog HTML Dom we have this kind of root hierarchy then we have first document then we have root elements then we have different elements are available inside that head element then we have element body like this ok so they will ask a time of interview choice okay give me the architecture that would give me the basic you know the diagram of HTML Dom so you can show like this okay now we need to understand how exactly it works so we know that ok this is HTML Dom but we should know that how exactly it works so let's say I will create one basic diagram and then I'll explain you that how exactly it works ok so first of all Gates HTML Dom is what so Dom is guys always remember this is my document object model it is w3c standard okay w3c standard provision ok what do you mean by w3c w3c means World Wide Web Consortium okay this is a standard for all the it compulsory okay whenever you are launching your web application h compulsory that you are following all the rules and regulations which are defined by w3c so w3c is a standard okay Tom that under that particular category all the apps should be satisfied okay so what do you mean by Dom that as I told you that Dom is the document object model which is a platform it is a kind of platform I would say it is a kind of platform oh I would say interface which are available in the form of APs okay guys okay and it is available in the form of a pas and who will call these ApS first of all this particular platform will be provided by ok so let's see I'll create one platform this is my document object model over here okay this is a kind of platform but who will provide this particular platform so there will be multiple platform will be there ok let's like CW this is HTML Dom 3 HTML Dom I have alright this is the first St ml Dom which is provided by let's see Chrome so HTML Dom guy is always provided by a specific browser so this is HTML Dom provided by Chrome ok and let's see okay this is for provided by Firefox guys ok and this is provided by let's see maybe Internet Explorer so sometimes we say that okay why HTML Dom structure of Internet Explorer is very slow ok because HTML Dom is not the standard thing for all the browsers because Chrome ok provided by Google so Google is working up on Chrome Firefox is provided by Mozilla so Mozilla company is working upon they will create their own drama structure according to their browser ok Internet Explorer is provided unlike Microsoft so Microsoft is working upon their their own normal structure so on the basis of different versions sometimes we say that ok our a strip is working fine on i7 ie8 and ie9 but it's not working on 10 and 11 and vice-versa so according to the different versions also I a tiny 9 normal structure will be changed maybe they will add something they will they they change something they update or delete something like that okay so first thing is HTML Dom always guys provided by specific browser vendors okay we have Safari also we have opener also provided by these browser specific vendors okay now let's see I have one site my site name a latitude an STD B www.facebook.com okay so this particular site should be compatible with this guy okay with Firefox Chrome and Internet explorer it should be compatible fine it should be combated so what exactly facebook.com will do the facebook.com developers they will have to ok what exactly they have to do so whenever we say that ok cross-browser testing we have to perform so facebook.com should be compatible with Chrome facebook.com should be compatible with Firefox and facebook.com should be compatible with Internet Explorer Safari and open also so this whenever the UI developers ok they are working with that particular thing so they will what exactly they will do so this is the interface API provided by chrome and interface API your HTML Dom provided by chrome same thing 1 interface API provided by this guy ok Firefox and this HTML Dom interface API provided by this guy Internet Explorer also and facebook.com should be compatible with this dorm Facebook compatible should be compatible with interface API with this particular Firefox dorm also and same thing for internet explorer so that's why we say that okay whenever developer they write their code the UI developers ok they always write the code which is compatible with all the browsers but the back end will remain same guys because back-end doesn't matter back in your either your web services or your database it will remain same so my back-end is available here these are my web services and this is my backing right so because web services generally let see these are met or alcohol services these this is my service layer okay so this is my service layer and this is my DB database so obviously service layer and database we cannot open in Safari browser and all those stuff so these are independent things and all these these are the clients three clients are there these clients are interacting with my service layer getting the data from database and all those stuff that is a different thing we will not talk about it now facebook.com the Java developer will write one JavaScript library over here for Chrome Firefox and Internet Explorer what exactly they will do they will okay so they will write some JS JavaScript okay Java scripting over here same thing they will write it over here also and same thing for the specific internet protocol so they will write the separate JavaScript functions for ie Firefox and Chrome okay and this document object model okay which is exactly 95% cases which will remain same okay for all the different browsers but sometimes what happens that okay sometime Dom doesn't get loaded properly okay this particular Dom doesn't get loaded properly sometime what happens that I guess some element could not be loaded properly let's see this element body we have hundred of elements are available and out 100 element let's see 10 elements could not be loaded properly or some edge X component could not be loaded properly on Internet Explorer F so that's not the problem with the application that's the problem with the browser we have to make it compatible with that so that's why we always say that okay the way the Internet Explorer my scripts are very you know slower performance issues are there and we are not able to you know we are not good I mean we are getting lot of state as limited exceptions or element notes on exceptions right because ultimately what exactly it will do it will in just a minute so what exactly it will do is it will interact with that particular dorm structure okay just a minute okay guys so javascript is written by the developer according to so what exactly javis w3c w3c will give different APs what kind of a piece it will give a typical kernel a piece that okay so Dom interface API will give you different options that different current API let's see generally we say that have you ever seen that document dot get element by ID like this so it we can perform some get we can you know add some attribute also or we can change some attribute also or we can do some deletion also something like this so all these four aps means card IPS okay so this is our admins create change means update and delete means delete so CR UD okay all these CR UD crud I pas okay I provided by the specific Dom all these ApS are available here same ApS are available here also same api's are available in Internet Explorer also now our UI developer okay they will call these ApS to interact with these elements let's you click on a button so before clicking on that particular element or a particular button or a link okay they will fetch you there okay they will fetch that particular button properties and then they will perform dot flick action okay on click action and dot click action something like that okay so there are number of options we can perform with the JavaScript and these operations are like this that JavaScript can change all the HTML element in the page okay javascript can change all the HTML attributes also in the page let's see you want to change the CSS styles you can change it so the typical browser okay Kurata API is are available let's see one button is there login button is there which is by default it's coming in the green color which is provided by Firefox or on Safari if you say look and feel on Safari is amazingly good has come do other things but on same thing on Internet Explorer it looks very bad okay the look and feel is very boring on Internet Explorer right so how exactly because the default look and feel provided by browser and those properties are available where in this particular Dom structure but Internet Explorer Adamas structure is very poor in terms of look and feel in terms of performance so obviously the look and feel of the application will look very poor okay in that particular browser but same thing it looks very good on Firefox on Chrome and Safari so this is a reason that let's see one login button is there which is coming in normal color but if we want to change that noggin button color to red color or green color or blue color or whatever or you want to provide some animations through JavaScript or something like that okay so all these things you can do it see a the styles also you can do that you can remove the existing HTML elements and attributes okay from the Dom okay so once you get the Dom of that particular page okay so guys always remember document object model is defined page wise okay so what exactly it will do on the facebook.com let see we have different pages my first page is let's see and the first page is home page so for home page it will be a separate Dom okay for let's see after home Bay let's see we have settings page for settings page we have different on let's see after that we have a news feed page it will be a separate Dom okay then we have let's see one more page privacy or privacy page also be a different Dom okay so for all Facebook particular application each and every browser they will create okay separate Dom but Dom will be created at runtime base the moment I open facebook.com the first login page dawn will be loaded on the browser okay then the second will be loaded on the browser then the third will be loaded on the browser okay according to the different browser specifically now the Java is this tadam the importance of Dom is that through JavaScript now the JavaScript immediately will become very powerful through this JavaScript we can interact with these APs so what exactly we can do through this JavaScript we can interact with these interface these ApS and we can perform on these multiple pages okay if we want to click if you want to change the property or any kind of walk action if you want to do you can perform so javascript will interact with these Dom API s-- uh Taipei's that get an add or change change the color or get that element and then click on it and update the property at the runtime okay or let's see some time what happens that okay on the basis of some condition the properties are getting changed and color is getting changed right some flash is coming or something like that so all these things are happening because of JavaScript is not directly interacting with these guys okay on these pages javascript is interacting with the Dom first and through Dom API they are calling and they are updating all these current operations okay like this so numb all these things like we can add new HTML elements and attributes also okay new elements also we can do that so that particular everything we okay we can do that so with the object model JavaScript gets all the power it needs to create dynamic HTML so that's why we always say that okay this is a dynamic HTML code dynamic HTML code is there on the basis of some condition dynamic pages are coming let's see on on a typical website at 2 card application ecommerce application on Flipkart or amazon lets you today you have five you know products are there in add to cart' tomorrow it will be 15 so this is dynamic right and the user profile will be different for the different different users so this is so dynamic in nature that page is so dynamic in nature different products will be there different description prices everything will be different it means different elements will be there different images will be there right so the through all these things we can create dynamic pages with the help of Dom okay so javascript developer okay that particular guy can do all these stuffs okay if DOM is their director has quit it we cannot do that so it in between Dom this guide is there and it will say that okay boss you can change whatever you want to change we will give all these ApS call my ApS call my methods all these current methods and whatever you want to do you can do it with the pages okay let's see I want to update update the Carter or update the you know product page in electronics item today we have you know mobile different 50 mobiles are there okay and I can add one more mobile device over the LHC iPhone X or iPhone eight right so this is called Dom structure base okay so always remember the dorm is structure always it looks like this right it looks like this base second thing is the JavaScript okay for the different different browsers let's see on same thing on it an internet explorer we say the Doge a JavaScript will call this particular ap interface ap and through interface API we can access all the different pages and if you want to make any changes you can do that accordingly right so this is guys very very important to always the very straightforward document okay the definition of document object model okay that map whenever the web page is loaded okay browser automatically creates a document object model of that paternal page okay so whenever see if you see on Firefox and let's see I will go to contacts okay let me lock it again right days so see I am coming on home page so the moment the home page is getting loaded in the background document object model is also getting loaded okay so if you see this is let's see LS by anything so this is a document object model of that complete home page like this this is a document object model lace so whenever we say that okay now if you refresh this page base again this document object model will be changed right now let's see today you have taken driver dot find element by a dot okay ID and let's see 20 check boxes are there and you have taken 20 check boxes something like that driver not find elements by dot ID okay so I'll write some very simple than the diagram itself I'll write some basic thing just a minute here let's see I'm gonna write very simple thing that simple driver dot find elements and by a dot let's see sorry expert and some expert will be there okay simple and this will give you one list object right like this right normally we write like this is what homepage we write like this driver or find element by Road expert ah let's see after this particular step what I will do and refinish the page okay I'll refresh the page this is my second step I'll refresh the page okay and then again what I'll do again I'll write the same thing that this particular thing okay that lets dot web element let me write it again driver dot find element by dot XPath and whatever the X but something like this I'll write leg in the same line and then I will take inside this list object okay dice simple I'm writing okay this particular line again okay so for the same page let's see this is for home page home page I'm doing all these stuff so this is my first step this is my first step and then this is my I'll do refresh okay guys and then the third time I'm doing this thing this is my third step now see what will happen the first step it will create one list object it will create this particular list object race and they the object name is oh one okay guys I'm simple writing object name is oh one okay I'll refresh it again one object will be created and I will say this is or two and I see man check me right it's like this at co2 okay and this is o 1 okay now the page is same but the first time one list object will be created on the basis of this particular object model and after refreshing the page again document object model will be refreshed guys so whenever we say whenever we refresh the page most at a time we are getting stale element exception because whatever the elements are available in this particular object let's see there are 10 elements are available in this particular element okay these elements might be tailed okay because these element will be stored in this particular list but if you refresh the page again one more document object will be created like this okay and three elements are there so these three elements and these three elements are different guys okay so let's see now in the next end if you are writing something like this that less dot get that particular element and you okay get that particular element dot click you are performing right grace okay after refreshing this and you are not writing this third line let's see there is no third line okay you are not writing this line okay and you write this and you refresh the page and you write list or get I eat or click it will not work it will give you a stained element exception okay what exactly it will give you a stale element exception it means what do you mean by stale stale means the stale means is got is tailed okay it is not fresh stale mean not fresh right this means I'll write in simple word not fresh it is gone from the Dom so it will give you a stale element exception so guys always remember what happens sometimes let's you're coming on the home page and you take the list or any element and then you are and maybe by any chance you are refreshing the page or maybe by any chance Dom got expired or okay and maybe that particular section the small section got refreshed due to age x-component or something like that it can be any reason it can be refresh also it can be some some section got change or updated something like this okay it may be refresh also or it can be any reason that this particular object is gone it means these elements also gone now you're performing that okay let's start again I do not click obviously it will not work right it will not work I will give you one perfect example let's see this is my page I am clicking on calendar right let's see first time coming on this homepage I have taken the list object all these elements all these links I have taken inside the list object okay all these lists home calendar come means contact details tasks etc and then one by one I want to click on it so what I'll do I'll click on calendar how will I click on calendar is simple let's don't get ie dot click ok and I is equal to 1 let's don't get to 1 dot click I will come on this page if I right now does not get to dot click it will not work because that list object is gone now because the page has been changed after coming to calendar see page is getting refreshed the new page is loaded it means a Dom object has been changed right so that's why we will get I will get stayed element exception in that case ok so how to resolve this problem to resolve this problem we have to use in this concept base we have to use this concept that again we have to take this particular thing again we have to get the list okay we have to update the latest list object latest elements list we need otherwise it will not work okay guys so the stain element exception element not found exception okay or maybe element reference exceptions element reference gone it means your Dom got stained okay so what is Dom this is the concept of Dom most of the folks they don't understand what is Dom and a straightforward say that okay at a time of interview yeah I mean maybe Dom God it's not available inside your Dom but what is Dom boss we have to tell that what is Dom right so to understand this concept guys always keep this thing in your mind that Dom is provided by okay and the dorm is provided by the specific browser okay if you see the Dom of Firefox this is our dorm if you spy anything see this is a dorm structure we are getting same thing if you open this particular application in Google Chrome or Safari or any other browser a dorm will be different let's yell open in Chrome okay case let's see I'm opening freeze erm come over here and I'll enter okay now if you aspire thing here we right-click and inspect so this is a different dorm structure we are getting guys although most of the dorm structures are exactly same on two different browsers okay but this is a dorm structure provided by Chrome this is a dorm structure provided by Safari okay this is a dorm structure provided with Firefox sorry chrome and this is for Firefox or maybe put in 10 exploded it will be different so Dom is a typical format is like this it will be like this okay but the concept of Dom is it will provide one cohesion what kind of provision it will give it will provide one provision that it will you can do such kind of stuff that you can it will give one power to JavaScript different powers to JavaScript okay that javascript can get all the elements can change the elements can delete the elements glitter element properties also can update the properties they can update the element they can add some different elements also to create a dynamic pages okay so this is very powerful and always remember these three four points with document object model javascript gets all the power it needs to create dynamic HTML okay so HTML Dom is what HTML Dom is an interface which is provided by the specific browser and this interface will give you different aps what kind of a piece crud I place to get the element add the element change the element delete elements okay sometimes we see that okay one button is disabled on Internet Explorer okay so specifically we have to raise the bug that okay this button is not working fine especially for cross-browser testing whenever we do manual testing right but butter is not disabled or link is not available or maybe some different issue that button is not clickable right on Internet Explorer or on Firefox because of the Dom structure is different so in a runtime now it's a developer duty okay they will change the property of that particular button to make it enable right so ice please understand what is the steel element exception and how exactly it is coming don't say straightforward that okay I don't talk in you know that something very stupid okay yeah I mean it's not available in Dom that's why it's not coming but what is Dom I have seen a lot of people they say that okay HTML Dom got refreshed or something like that or some you know XYZ reasons but this is the concept of Dom okay guys the document object model and what kind of document this is document this is kind of document okay so one last thing that first of all what is different type of document different type of dorms are available but no need to learn all the dorms its although it's not part of our the first dates we have seen that this is we are talking about HTML Dom so selenium interacts with HTML Dom okay selenium interacts with HTML Dom so if you see the selenium webdriver architecture selenium internally interactive HTML Dom okay second thing is that we have a XML Dom for XML documents and the third thing is for corridor corridor means like this code on standard model for all the document types this is for example document ID and this is one HTML document type so what is the HTML document ID it looks like this it looks like this this this is HTML document HTML Dom okay so in HTML Dom we have three different properties so they will ask you at a time of interview in HTML Dom we have three different properties the first property is in HTML Dom the first the first property is that I mean different things we can do we can you know get all the properties of HTML elements it will provide different methods and it provides we can do some events also so 3 different things we can do we can change the properties we can play with the properties so I can think we can do it we can exit different methods and the third thing we can perform some events also okay with the help of Dom with the help of HTML Dom so all these 3 things we can do with the help of HTML Dom ok guys no need to learn about XML Dom and code on which I mean it's not a cup of R th the different thing ok so this is called Dom okay document object model okay and please go through it right it's really really important to understand document object model some very smart interviews you know they will ask you interview is that ok what is HTML Dom so you should it shows your knowledge yes that why still element exception is coming what is what God stayed this is a typical you know example of a steel element exception okay so this is all about okay document object model raised so that's all for today and guys please subscribe the video and see this is the w3c standard I got this particular document from here w3c Sewell calm they have clearly written this is a stable documentary object like this okay guys so that's all for today and guys if you really like this particular video so please like it comment it and share it and please subscribe to my channel the and the bay light and lot of videos are coming in future so you will be notified accordingly that's all for today guys thank you so much

Channel: Naveen AutomationLabs

Views: 63,108

Rating: 4.8922415 out of 5

Keywords: Selenium, WebDriver, DOM, Document Object Model, StaleElement Exception, ElementNotFound Exception, NoElementReferenceException, HTM DOM, W3C, What is HTML DOM - Document Object Model, What is HTML DOM, Introduction to the Document Object Model, Introduction to HTML DOM, what is staleelementreferenceexception in selenium webdriver, How to handle hidden webelements in Selenium Webdriver, selenium webdriver element is not currently visible and so may not be interacted with

Id: BwjICm6vIEM

Length: 36min 3sec (2163 seconds)

Published: Sun Oct 01 2017