How To Handle Element Not Interactable Exception - Selenium WebDriver Tutorial

subscribe and click on the bell icon to be the first to see the latest video please find the full course information with youtube special discount in the description below hello all welcome back in this one we're gonna take a look at element not interactable exception it is not a very frequent exception that we see but it is one of the most tricky ones to solve and it makes it a very popular interview question this exception can show up for primarily these reasons element is present in the dom but it's not visible in the viewport area of the browser which means we might have to scroll down to view the element but when that happens selenium will throw element not visible exception it will not usually throw element not interactable exception another reason that people tell you is element is present behind another element which means one element is overlapping another element it can happen at some times but most of the times it will throw element not clickable exception please click on the card above to learn the details of element not clickable exception i've explained it in a lot of detail and the link is available in the description also so people will tell you these reasons but most of the times they're not true it's very difficult to find the exact reason for this element not interactable exception all over the internet here i'm going to cover these things there are two main reasons either element is in hidden or disabled state or we're performing an unsupported action which means the element is there but it actually cannot take the action that we're trying to perform and now let's get into the details of practical here's our eclipse the before method just brings up the chrome browser and sets up some implicit bait and then we're trying to navigate to courses.let's code it dot com slash login now let's just open our chrome browser let's try to inspect this field the email field it is the input type it has a name email and id email all good now here there's a form now let me try to show you something i know we're not gonna do this kind of mistake when we're actually working on automation but let me try to show you just for the example sake so this form has an action called slash login let's just go to eclipse and i'm gonna show you dot find element by dot xpath form with the action slash login can we actually go ahead and type something in the form no right because it's not gonna take anything from us like user can also not do that so let's try to do that let me just try to click this form there's no reason we're going to click it in automation so take this as an example and then we go further deep inside the concept and then let's copy the whole thing and then try to send some keys i'm just gonna try to send abc and let's just go ahead and quickly run this code the website was open and it's done now and let's go to the junit console and here we see element not interactable exception let's scroll down to the last line this tells us that it's happening in line number 26 double click this one and there you go this is where it's happening so if you notice it did not fail on clicking the form clicking is okay we can actually click on anywhere on the website right nothing stops us selenium web driver was able to click the form but when we tried to send some keys to the form it gave us this exception we know that we're finding a form element selenium webdriver is telling us that the element you're trying to find i actually cannot send any keys to that element i cannot interact with that element that's what it's trying to convey to us there's no way i can interact with that element to send the keys that's why it failed here let's quickly take one more example let's go to the website and there's h4 tag it has a class called dynamic heading and i'm just going to find one more element driver outline element dot xpath h4 class dynamic heading and now again let's try to send the keys to this element i'm just trying to form the concept for you this is going to tell you that it can pretty much happen to any element so let's again run this one i commented out this one so that our code moves forward and right click run it's gonna bring up the website premise gonna do nothing and then just quit the browser there you go and let's go to junit console again the same exception happen and now let's click on this line double click and now it's failing here see so it's not just the form element it's trying to find the h4 tag and it was able to find it so if selenium webdriver was not able to find the element it's gonna throw no such element exception there's a video in the card above for this exception also but here it was able to find the element and it's trying to send keys and it's telling us hey there's no way i can interact with this element to send some data to this element because it's an h4 tag and h4 tag cannot take any data from me i cannot write on that tag and which is correct right we just can't write anything on nh4 tag and now here you're going to tell me hey i'm not going to try to find form tag or h4 tag and try to send some keys on that then why am i getting this exception in real time so this was the basics now let's take a look at another elements so i'm going to open this page now instead of login i'm going to say courses come in this whole code and here let me go to the website i'm going to click on all courses and let's try to find this search box here you go we find that the input here has an id called search that's amazing let's just copy this driver.find element by dot id search wonderful now we can send some data let's type test there let's quickly run this code it's going to bring up the website it's going to try to find the element and type something but we see that nothing was typed okay there is some error in the junit console element not interactable exceptions now this is a real-time scenario double click on this one and here we see this is the line which is failing it was able to find the element but it was not able to send the data to this element now let's go back to the website i'm gonna do control f and double slash star at the rate id equals to search i'm just trying to see what happened there you go here's the magic did you see that there are two matching nodes this is the input one and if i hit enter it takes me to the form action so this element search input box is under a form and the developers gave the same id equals to search for the form element also that's exactly what's creating an issue when selenium webdriver was trying to find the element with id search it found the form element first and it returned that element and then it tried to send keys to that element and there you go it just failed okay let's go here how we can handle these kind of things now we know that we want to interact with the input element right so what we're going to do here is we're going to say dot xpath and slash slash input so we are explicitly telling selenium webdriver that we are using the xpath with the input tag id equals to search now this is going to work because it's not going to find the form element at all it's only going to find the input tag with the id search right click it and see it in action there you go it types test here right this one is done this was one of the real time scenario your developers can make those kind of mistakes and then if we don't pay attention to the elements and their attributes we can actually land up into these kind of issues now let's take a look at another example which is not this kind of mistake and see when this kind of exception can happen so i'm going to go to expedia.com this time and then let's first inspect this flights tab so it has a attribute called wizard flights pwa i'm just going to find the element first and then i'm just going to click on this one because i want to navigate to the flights tab okay now once we're here let's inspect this element i'm going to right click and inspect so it takes me to a button tag but we know that it should be an input tag because it's a text box so if we look here there's an input tag and it has an id called location field leg 1 origin input so let's copy this and let's go back to our eclipse and try to find it so driver.find element by.id and send keys i'm gonna send sfo and for some time let's just increase the wait time here i'm just going to say just like 10 seconds and after this let's actually just comment this whole test method and oh here i notice that this expires is not correct i need to use the a tag and then here i need to use the other eight symbol and then here i need to use the square brackets to close that up and now it looks correct so let's just quickly right click and then run this automation should bring up expedia.com click on flights tab and now we're waiting for it to type sfo in the field right but it's not typing anything and here we go in the junit console it tells us that element not interactable exception now this is happening on line number 38 where we're trying to send the keys again it found the element but it's just not able to send the data now why let's take a look at this element when we actually take our mouse over the button it highlights the element but when we take our mouse over the input it doesn't even highlight it kind of tells us that something is wrong now let's take a look at the attributes of the element and here you will see that it has a class called is hidden so developers are actually hiding this element with the help of css class called is hidden and it's a custom class you might see a completely different name in your application but something with hidden kind of keyword is there and this tells us that this element is actually hidden and if the element is hidden there's no way selenium webdriver can interact with it and it gives us the exception that element is not interactable right now how we can send keys to this kind of element let's click on this because it says it's a button and it brings up another input box okay now let's inspect this one and it's a completely different input element and now you will see that when we hover the mouse over this input element the field is highlighted and it has a different id location field leg one origin and scroll up to this dom this is the button and the input is also visible here in the dom but another input element this is the one that showed up so let's try to interact with this element i'm just going to copy this id go to eclipse and comment out this line driver.find element by id here we go and send keys sfo now this looks wonderful right right click in and test it we really want to test if this is going to work and this is not going to work actually so let's just wait for it it's just going to bring up eclipse it's going to click on flights tab and nothing is happening we still don't see anything getting typed here and the automation is complete junit still shows errors and boom again we are seeing element not interactable exception now we'll be like hey what exactly is happening now we found the correct element it was highlighted in the dom as well but still we are not able to send any keys to it there you go so let's take a look at the dom again this input element only showed up when we clicked on this field right now to click on this field we should actually first find this button tag and then click on that clicking on that button will make this field visible okay so we're missing a very important key step here we need to find this button and then click on it and then we will go to the input fields copy this data dash stid go to eclipse driver.find element by xpath button add the rate data stid equals to the value that we copied not click now we are completing all the required steps we are navigating to the flights tab we are clicking on the button and then we are trying to send the keys this should definitely work it's going to bring up chrome openexpedia.com click on flight snap there you go it clicked on the button it typed sfo boom everything is done successfully so this was a real time scenario right now here we are not trying to find a form we're not trying to do anything silly we're not trying to send keys to an h4 tag or something but we were trying to actually find the elements that we wanted to work with but there were a lot of issues one of the element was hidden another element only becomes available when we click on a different button tag right so this is not a developer's issue this is just the flow of the website and we really really need to understand the workflow of the website before we start automating it so pay attention to the workflow pay attention to the dom where all the elements exist inspect them carefully look around look at the siblings look at the parent elements and then build your expat carefully so this was the key now if you found something helpful in this video if you learned something amazing here please comment below and tell me what you have learned and how it is helpful in your real time project and if you want to see some new concept please comment below and tell me what you want to learn and i'll make a video on that thanks a lot for ending this one stay tuned happy automation thanks [Music] you

Channel: Let's Kode It

Views: 3,333

Keywords: how to handle elementnotinteractableexception in selenium java, how to handle elementnotinteractableexception in selenium webdriver, how to handle element not interactable exception in selenium java, how to handle element not interactable exception in selenium webdriver, element not interactable exception in selenium java, element not interactable exception in selenium webdriver, elementnotinteractableexception selenium webdriver, elementnotinteractableexception in selenium java

Id: e2tSki_Ossc

Length: 14min 34sec (874 seconds)

Published: Sun Aug 08 2021