How to Find Broken Images using Selenium WebDriver? | Selenium Interview Questions |

hello guys i am yada garadi and welcome to the series of selenium interview questions in this video we will see how we can find the broken images in a website using selenium web driver so generally when you visit any website you will find some images right so just like any other html control you will find some images also so these images are actually used for displaying the graphical content to the user okay so if you want to display any graphical content then you have to use images or videos so now we know what is the image and why these images are actually used right so what is exactly this broken image so before that first let me show you how these images actually looks like in the website so here i have one website so the website name is the world's worst website ever so i will leave the link in the description box below so in this website i have some html controls okay so labels and some links and some images and everything so here in the bottom you can see we have some images right so here it is showing some bridge and sun so here it is showing the greenery and the road right so that means it is showing some kind of a graphical content which cannot be actually written in the html okay you have to use some kind of an external graphical source so here the external graphical source is nothing but the image so every webpage is trying to show us some images right but sometimes when you visit any website right you will see the image icon but not the image so here if you see after this what's new you can see here we have one image icon right but you are not able to see the actual image so you might be thinking like this is the actual image this image icon is the actual image no that is not the actual image okay so there is an actual image but because that image is not loaded html page is actually putting this image icon here that is because for displaying any image we use the img tag okay so that img tag default thing is this one the image icon so if the image is not loaded properly or if the image is not existing then it will show you this image icon okay so these kind of images are called as broken images why because this image is actually not loaded right so the purpose of this image is to display some kind of a graphical content but it is not actually loaded so that is why we call them as a broken image okay so what could be the reason for this broken image so it might be any reason okay so there are so many reasons actually like maybe the image is deleted from the server or maybe the image address is modified that means maybe it is changed from one location to other location or maybe the image name itself modified so every image will have some name right so using the name and path we will identify this image we will try to load the image here right but maybe that image name is actually modified so because of those reasons the image is not getting loaded right so it might be any of these reasons so finally the image is not loaded right so we will find out these images and we have to report to the developer why because the images are intended for some purpose but that purpose is not achieved then it is a bug right so we have to report these things okay so in this video we will see how we can find these images these broken images okay so to find these broken images we have two ways the first one is using selenium webdriver and the second one is without using the selenium driver so in this video i will show you both the ways okay so first we will see with the selenium trigger okay so before that so just like this image icon we have some other so here in the bottom you can see so these three are also image icons only but these are actually some images so these are also not loaded so that is why this is displaying image icons okay so let me open the eclipse so here i have one program so this program i will use for practice today so here i have the main method i am going to show you two methods right so instead of writing the code inside the main method i will write in a separate method then i will call those methods inside the main method okay so here i will say public static wired so inside this i will write the selenium related code so first i need to open the web application right so i need to open the chrome browser then i need to navigate to the browser then i have to fetch all the image tags so here i told you right so every image will have one tag so just like any other control every image will have one tag the tag name is img so if i inspect so here you can see the tag name is img right so here in the src the image path with the image name is included okay so if you inspect the other image which is not actually displayed that means the broken image so this one is also having some path right so it is having the img tag and it is having the src attribute with some image path but because of maybe this is not available or something because of that it is not loading right so first in the selenium webdriver we need to open the chrome browser then we need to navigate to the application after navigating the application we need to find out all the img tags that means all the image elements then we need to iterate each and every element and find out whether it is a broken image or it is a normal valid image okay so first i will open the chrome browser so here i am using the webdriver manager so here i want to navigate to this webpage okay so i will copy this link then after navigating i'll give some thread.sleep okay just for the safer side so now we navigated to the website right so we need to find out all the image tags so if you want to find out multiple elements we need to use the find elements method right driver dot find elements by tag name so here i'm going to use the tag name okay because i know the tag name is img so now this will find out all the elements so now i want to store this one into some list right so i'll say list of web elements i'll name the variable as images so after this i'll just print the size okay so images dot size then we want to iterate this one right so i will use the for each loop you can use for our for each loop anything is fine so from this images i want to get each time one image so then we want to verify whether it is a broken image or not right so how do we verify that so every image is having this src attribute right so inside this one we have the image address so if this image address is valid then it is a valid image if the image address is invalid that means it is not a valid image right so when you send the request with this address if you get the response as 200 then it is a valid image if you don't get the response as 200 then it is a invalid image so now i need to get this src attribute value so i will store that into something like this i'll say image src so here i'm not going to write driver dot because i want to find out this src attribute on the image so i will write image then i will find out the image attribute okay so to find any attribute value we have a method get attribute so using this we can find any attribute value for the element so here the attribute name is src this will return the image src value right so now we have the image address so now all we need to do is we need to create a url connection then send a request to the server okay with this url we need to send a request to the server if we get the response as 200 then it is a valid image right so first i need to create the url so here in java we have a class called url so for that url class we need to create the object here we need to pass the url in my case here the url is actually the image source right so this is the address so i'll pass that then i need to create the connection so the connection i need to create with this url right so i want to open the connection for this one url dot open connection so this open connection will return a url connection object okay so i want to create the object further and i want to store this one url connection so now this url connection is a generic one right but if you want to send any request we need to send in the form of http or https right so i need to convert this into any of those things so here we have two classes http url connection and https url connection also you can use any of this thing okay so i will use the http url connection and i will name the variable as http url connection so here this http url connection is a abstract class okay so if i open this here you can see this is a abstract class that means you can't create the object for this so then how we can create the object what you can do is we can convert this one we can cache this normal url connection object into http url connection okay so because already this connection is having the information right so if you just cache this one then it is fine so once you assign that one directly automatically the eclipse will allow you to cache it okay so it will give the suggestion to cast so this is how we cached okay now the connection is ready right so we need to connect dot connect so this will send the request okay so this will send the request to the server so before this i would recommend you to use some kind of a wait because sometimes because of network speed or something the image i mean this connection will not be established immediately so it might take two or three seconds also so on a safer side we will use some kind of a timeout okay so here we have something method called set connect timeout okay so inside this i need to pass the time so you need to pass the time in the milliseconds milliseconds means one second equals thousand milliseconds right so if you want to pass five seconds then you have to pass 5000 milliseconds so now the request also sent right so server will send you some kind of a response so that response is also present inside this connection object only so we need to get the response code right so i will say inside the if condition because i want to verify whether it is a 200 or not right dot get response code so this is the method to get the response code so if it is 200 that means it is a valid image so i will print that in the console so here what i will do i will print the valid images in the black color and i will print the invalid images that means broken images in the red color okay so inside the system.out.println i will print the valid image so i'll do something like this okay so normal formatting okay so after this i want to print the response code then again i will do something like this so after this i want to print the response message so along with response code we will have some response message also okay so that is also available on top of connection object only dot get response message so if it is not 200 then i need to print in the red color right so to print in the red color we need to use system.error.println okay the shortcut is syser so i want to print the same thing okay the same content but just with a different color so after the connection i mean after this one is completed i want to disconnect the connection so here we have connected right so let me just disconnect it so i will do one more thing i'll just put this entire thing in the try catch block okay so if any exception occurs then that also we can catch so if any error comes i'll print the red color okay so this image src i will print so if any error occurred in this code then that is coming into cache block right so when the error will come actually if you are not able to connect or something right so those are also actually a broken images only okay because those links also have the some problem so that is also coming under this broken image category only so after this i don't need to keep the driver active right so after the for loop i'll fit the driver so when the browser is closed then we understand that the execution is completed okay so let me call this method inside the main method so i have created this is a static so i no need to create the object fine so now let's run this program so i'll just maximize this console so now in the back end you can see it is trying to print all the image with the status right so for everything is in black that means all the images are valid images see we got something red so we got three images as a red color right so this one and these things if you observe here this one is not getting any status code or any status message so that is because this one is executed inside the cache block okay so here i have created the cache block right so inside this one so we have some issue with this one connecting to this one that is why we got the exception then we catch that exception in the catch block okay so this one and these two so here you can see this image it is not found okay so it is not found in the website itself maybe the image is removed right so that is why we call these images as broken images so now we found the images using selenium webdriver right so all these broken images using selenium web preview so it's time to find out these images without any selenium webdriver so if you are not using the selenium webdriver then what we will use we are going to use jsu so this jsoop is a library which will help us in passing the html document without opening the web page itself okay so let me just create one method here so i'll just copy the same method okay just for the time being i'll change the content so here verify broken images using jso so here we don't want to open the cylinder webdriver or anything right so i'll close this so first i want to add this jsoob library in my machine okay so in my project basically so just type jso okay so this is the one jsoop java html parser okay just open this one so here i want to download it right so just click on this download button here you can see we have a maven dependency so i'm using the maven project only so i can add this dependency so let me just open the project so inside the pom file i'm going to add this one so here it is downloading so the download is completed and it is building the workspace okay it is done so now how do we use this jsu so if you don't know how to use just come back to this website so here you can see one example okay so here what actually they did so here they created one document instance okay so here they connected to this url and they got everything whatever the document html document is that content into this dock then we can perform the operations on this dock to find the elements okay so just copy this one it's very easy guys okay so here i'll change my url so my url is this one i'm not going to open the url but i want to connect to that url from the backend right so that is why i need to use this url okay so here it is asking for importing so while importing make sure that you are importing from the json okay so here org.jsoop so i am importing this one jsu so i don't want to print anything in the console so just remove that log then elements also you have to import from the json so this is the one and element so we have so many references actually so that is why i'm stressing you have to import the references that is coming from the jsoop library okay so by looking at this one you can understand org.jsoop.nodes so this is coming from jsu so here this is the dock okay let's leave like that so i want to get all the images right so it is like a css selector syntax okay so if you want to get all the image tags you can directly mention the tag name here so if you mention img it will fetch all the image tags okay so i will name rename this one i'll say images so from the images i want to get one image at a time so after this if you want to get any attribute value you have to use this statement so i want to store the image src right so just like the previous one only so instead of connecting to the website and opening the website and fetch all the images here we are doing everything in the backend okay so i want to get the attribute of image right so the attribute name is actually src so this is only changing guys nothing else okay so the rest all is same so i did not change this code okay this code is actually same code only okay i have removed the webdriver related code and i have added this jsoop related code that's it okay so after this i don't want to close any browser because i did not open any browser right so i have to call this method inside the main method so let me just comment the first method okay so now this should execute the jsoop related code so here everything is coming in the red color right why because here if you look at the image path it is coming as images slash this one but in the previous one it is coming with the proper url right so the problem is when you are using the selenium webdriver it will give you the proper image path okay with this website name it will give the image path but when you are using this jsoop it will not return like that okay so you have to append the url so here you need to write one condition that is if the image path is not starting with http or https then you have to append your website url so now it will become the proper path so now let me just execute this so now you see it is validating the urls okay so last time we got three error images right that means broken images so this time also we should get the same three only if you change from selenium webdriver to jsu we should not get more images broken images or something like that okay the same operation but the way how you perform is different that's it see the program execution is completed and we found only three images three broken images okay so in the last scenario also we found only three broken images right so it is working just like a cylinder only but instead of opening the web browser and all it will be very much faster okay so if the interior asks you specifically how do you do with the selenium web driver then you can go with the first option so if the interviewer will ask you like normally generic question how do you find out the broken images in a website then you can give this answer as well okay so anything is fine both of these ways will find out the broken images okay so now you can report these these image links to the developer that's it guys so one more thing so in my last video also in broken links also i have told you that so if you have the proxy related issues you have to add the proxy here okay so how do you add that so here you need to create the proxy related connection okay so inside this try cache i will create one proxy so this one okay so this is the constructor so here type is nothing but whether it is http type or https type like that okay so i will say type dot http so this type is a enum so you can choose the values from this enum and the next one is new i need socket address so here you can see the host name and port so generally if you have the proxy related issues for the proxy you will have some host name and the port right so you can choose this one you can pass the host name so i'm just writing test host here okay and the port number anything 8080 or something okay so let me create the object let's see what it is saying okay so i need to use the java.net.proxy okay if you import this reference it will not come like this if you don't import it will come like this so that is just fine so you need to use this proxy instance while opening the connection okay so you need to pass here so that is the change guys so if you are using the proxy right you need to make these two changes you need to create the proxy instance and pass that proxy instance into this open url connection this method okay so generally in our companies we will have the proxy related issues right so during that time we can use this one okay so i will upload this program into my github account and i will share the link also in the description box below okay so that is about this video guys i hope you enjoy this video if you have any doubts please let me know in the comment section below thank you for watching bye bye

Channel: H Y R Tutorials

Views: 2,463

Keywords: hyr tutorials, h y r tutorials, selenium webdriver tutorial, selenium webdriver, selenium webdriver interview questions and answers, selenium webdriver tutorial for beginners, selenium, webdriver, java, selenium java, selenium interview questions, How to Find Broken images using Selenium WebDriver, broken images in selenium webdriver, broken images, find broken images in selenium, How to Find Broken images using jsoup, jsoup, java html parser, find broken images without selenium, hyr

Id: 6NXZQYs-Eig

Length: 21min 35sec (1295 seconds)

Published: Wed Oct 07 2020