Finding broken images in a webpage using Selenium

We were checking for broken URLs using Selenium in the previous post. Now we are going to see how to find broken images in a webpage. Broken images are also called Red-X images. We have some tools in the market for finding red-x images on a website or webpage. For example, InSite which is a windows based application.

The same functionality can be possible with Selenium script. How do we do that?

• We need to find the number of images on the page
• We need to track the properties of each and every image.
• Finally we need to extract the image size amd check if its broken or not

How to find the number of images on the page?

We can find the number using selenium.getXpathCount("//img").intValue() method.

selenium=new DefaultSelenium("localhost", 4444, "*firefox", "http://www.yahoo.com");

selenium.start();

selenium.open("/");

int linkCount = selenium.getXpathCount("//img").intValue();

How to track the properties for each and every image?

We can use the for loop and track the properties of the image one by one.

  for (int i = 1; i < imageCount; i++)

 {

String currentImage = "this.browserbot.getUserWindow().document.images[" + i + "]";

 

}

How to extract the image size from the image property?


String s = selenium.getEval("(!" + currentImage + ".complete) ? false : !(typeof " + currentImage + ".naturalWidth != \"undefined\" && " + currentImage + ".naturalWidth == 0);");
if(s.equals("false"))
{
System.out.println(selenium.getEval(currentImage + ".src"));
}

Find the complete script below:


import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintStream;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;
import com.thoughtworks.selenium.DefaultSelenium;
import com.thoughtworks.selenium.SeleneseTestBase;

public class FindBrokenImages extends SeleneseTestBase{

DefaultSelenium selenium;
public int invaildImg;

@BeforeMethod
public void SetUp()
{
        selenium = new DefaultSelenium("localhost", 4444, "*firefox", "http://www.yahoo.com/");
        selenium.start();
    }

@Test
public void testMethod() throws IOException {

invaildImg=0;
try
{
selenium.open("/");
}
catch (Exception e)
{
selenium.waitForPageToLoad("30000");
}
int imageCount = selenium.getXpathCount("//img").intValue();
FileOutputStream fout = new FileOutputStream ("broken_images.txt", true);
new PrintStream(fout).println("URL : " + selenium.getLocation());
new PrintStream(fout).println("--------------------------------------------");
    for (int i = 1; i < imageCount; i++) {
        String currentImage = "this.browserbot.getUserWindow().document.images[" + i + "]";
        String s = selenium.getEval("(!" + currentImage + ".complete) ? false : !(typeof " + currentImage + ".naturalWidth != \"undefined\" && " + currentImage + ".naturalWidth == 0);");
        if(s.equals("false")){
        // System.out.println(selenium.getEval(currentImage + ".src"));
         new PrintStream(fout).println(selenium.getEval(currentImage + ".src"));
         invaildImg++; }
    }
    new PrintStream(fout).println("Total broken images = " + invaildImg);
    new PrintStream(fout).println(" ");
    fout.close();
 
} 

@AfterMethod
public void tearDown()
{
selenium.close();
selenium.stop();
}
}

The above script will identify all the broken images(if any) in yahoo.com and store the image URLs in a notepad file called broken_images.txt. If you want to check the broken images for N number of URLs, you can pass the parameters through Data Provider concept or Excel sheet using JXL package.