WebDriver-Verify Image is loaded

[Ashish]

Hello All,

Is there any way to figure out whether image is loaded or not on page using webdriver ? Many Thanks !


Thanks,
Ashish.

[Shawn McCarthy]

Verify the img tag has the correct source? You can use getAttribute I think.

[darrell]

As Shawn has pointed out, you can find the IMG tag and check the value of the src attribute. Asserting that the src attribute has the correct value is something you can do with Selenium. Whether the image is actually loading is dependent on things like, is the image on the machine in question? Does it have the correct permissions to access it? Is the network up and accessible? None of this is really about Selenium and whether the web browser is working as expected.

You could use Selenium to get the src attribute then use libraries in your language to see if you can retrieve the image. For example, if you are using Java, you could get the src attribute then use the resulting URL to open an HTTP connection to the URL and retrieve the image. If you do not get a 200 OK then something is wrong.

[David]

Here's another option for checking if the image is actually loaded/rendered within the browser:

http://watirmelon.com/2012/11/27/checking-an-image-is-actually-visible-using-webdriver/

[erki manniste]

Just checking the src attribute of img tag does not guarantee you that it is actually loaded, say the server returning the image returned you http.400, 500 or whatever. As one guy already pointed out, you should route all your traffic thou a proxy and then you can conveniently check, that http.200 (or what ever is expected) is returned to you. If you want to go any further you can have the expected image on the disk, download the image from your web and compare it to the original. Quick googling gives you many comparers written by people, first one for me being this: http://mindmeat.blogspot.com/2008/07/java-image-comparison.html . Although it is very cool, you might consider leaving some things for manual testing.

br.
e

[erki manniste]

Yep, the solution that david provided works, here's a quick test.

    @Test
    public void testImageShown(){
        WebDriver driver = new FirefoxDriver();
        driver.get("https://dl.dropboxusercontent.com/u/3147870/broken_image.html");
        WebElement brokenImage = driver.findElement(By.xpath("//div[@id=\"1\"]/img"));
        WebElement notSoBroken = driver.findElement(By.xpath("//div[@id=\"2\"]/img"));

        WrapsDriver wrapsDriver = (WrapsDriver) brokenImage;
        String script = "return (typeof arguments[0].naturalWidth!=\"undefined\"" +
                " && arguments[0].naturalWidth>0)";
        JavascriptExecutor javascriptExecutor = (JavascriptExecutor) wrapsDriver.getWrappedDriver();
        Object isBrokenShown = javascriptExecutor.executeScript(script, brokenImage);
        Object isNotBrokenShown = javascriptExecutor.executeScript(script, notSoBroken);
    }

returns
false
true

br.
e