Finding broken images in a page using Selenium Webdriver

What is broken images?

Broken image as the name signifies the web page code refers to an image location(i.e src of the image) is either incorrect or out of date. When you try to search that image at the specified location written in the code you wont be able to find that image.

Reason for broken images :-

There are three possible reasons why your images are not showing up on your pages as expected:
(1) The image file is not located in the same location that is specified in your IMG tag
(2) The image does not have the same file name as specified in your  tag  and 
(3) The image file is either corrupted or damaged.

Code for finding broken images through Selenium :-

WebDriver driver = new FirefoxDriver();
EventFiringWebDriver eventFiringWebDriver = new EventFiringWebDriver (driver);

// Storing all the image elemt  in the variable allImages
List<WebElement> allImages = 
eventFiringWebDriver.findElements(By.tagName("img"));
int countBrokenImages = 0;

// Declaring a dynamic  string of array which will store src of all the broken images
List<String> BrokenimageUrl = new ArrayList<String>();

String script = "return (typeof arguments[0].naturalWidth!=\"undefined\" &&  
arguments[0].naturalWidth>0)";

for (WebElement image : allImages) 
{   
        Object imgStatus = eventFiringWebDriver.executeScript(script, image);          
if(imgStatus.equals(false))
{
String  currentImageUrl = image.getAttribute("src");
String imageUrl = currentImageUrl ;
                BrokenimageUrl.add(imageUrl);
                countBrokenImages++;
         }
}

// Printing the src of the broken images if any
System.out.println("Number of broken images found in the page : " +countBrokenImages);
for (String z : BrokenimageUrl) 
{
    System.out.println(z);
}

Hope the above code resolved your problem.

Adding link text to an element which appears as an image and is not detected by WebDriver

WebDriver not clicking on a link?

Whenever "FirePath" does not detect an element within an anchor tag, which does not have a link text and the element  belongs to an image class, try the below code snippet  for "FirePath" to detect the element and "WebDriver" to click on the element.

Approach:
- One has to remove the class tag from the element so that it does not behave as an image anymore.
- The innerHTML has to be edited and a link text has to be appended to the element so that it can be recognized for further actions.

Code Snippet :

public static void replaceLinkIdentifier(WebDriver driver, By locator, String replace_id){
   //Replacing link identifier
    JavascriptExecutor js = (JavascriptExecutor) driver;
    WebElement element= driver.findElement(locator);
    js.executeScript("arguments[0].setAttribute('class', arguments[1]);",element, ""); //Setting the class attribute to null, so that the element does not behave as an image.
    js.executeScript("arguments[0].setAttribute('id', arguments[1]);",element, replace_id);  //Substituting/Adding an id for future reference.
     String el = element.getAttribute("id");
    js.executeScript("var t ="+el+";t.innerHTML+='"+replace_id+"';", ""); //Adding the visible link text which is same as id.
    }

The above code snippet would remove the image class from the element and add the link text, same as the 'replace_id' provided here.
After which the element could be acted upon, with reference to the id set in the snippet, which is same as the 'replace_id' here.


Hope the trick helped .