Checking an image is actually visible using WebDriver

I didn’t realize it’s actually a little tricky to check that an image is loaded when using WebDriver. WebDriver will only complain if the image tag you’re looking for isn’t in the DOM, not if the image link is broken and not actually visible.

For example, in watir-webdriver (ruby), this doesn’t really work as I would expect as the image isn’t actually visible on the ‘brokenimage’ page.

require 'watir-webdriver'
b = :firefox
b.goto ''
puts b.image(id: 'watermelon').visible? #true but is not visible

The way to check that is is actually visible is to check a JavaScript property ‘naturalWidth’ is greater than 0.

b = :firefox
b.goto ''
puts b.execute_script("return (typeof arguments[0].naturalWidth!=\"undefined\" && arguments[0].naturalWidth>0)", b.image(id: 'watermelon'))

Unfortunately this doesn’t work in IE, so you should use the ‘complete’ JavaScript method in IE (which doesn’t work in other browsers):

b = :firefox
b.goto ''
puts b.execute_script("return arguments[0].complete", b.image(id: 'watermelon'))

In C#, you can wrap this up into a WebDriver extension method so you can this directly from Driver passing in the image element.

public static bool IsImageVisible(this IWebDriver driver, IWebElement image)
    var script = TestConfig.DriverType == "ie"
                ? "return arguments[0].complete"
                : "return (typeof arguments[0].naturalWidth!=\"undefined\"" +
                  " && arguments[0].naturalWidth > 0)";
    return (bool) ((IJavaScriptExecutor) driver).ExecuteScript(script, image);

// Usage

If it’s important that images load correctly in your application, you should probably start putting some of these in your WebDriver page objects. It’s simple to write a verify images method on a page that iterates through each image in the DOM and checks that it’s visible using the techniques above. Have fun.

Update: 30 November
I wrote about a slightly more elegant C# approach to do this directly from the element.

Author: Alister Scott

Alister is an Excellence Wrangler for Automattic.

12 thoughts on “Checking an image is actually visible using WebDriver”

  1. Some additional comments/questions:

    Shouldn’t the javascript code to be executed, syntactically end with a semicolon? It’s missing in your example code.

    And for both IE and other browsers, is the return type always going to be true or false, or will it ever return null as well? Just for reference. In Java with Eclipse, it complained when I tried to typecast the javascript return value to boolean, so had to typecast as Boolean object and then call the object’s booleanValue() method to get the result. In my other javascript related methods that return a value, I’ve been checking result against null to return true/false.


    1. You don’t need a semi-colon like in the JavaScript console in your browser, but it probably wouldn’t harm.

      In C# the JavaScript executor always returns an Object object and you can cast it to whatever you like. You may get null so you could check for null to avoid null pointer exceptions.


  2. Another question came to mind, if one is trying to wait until an image is fully loaded and rendered in the browser, then should they wait against WebElement (isDisplayed, etc.) or wait against checking the javascript return value of this solution mentioned here? Examples for this question are like site is slow to send back image, or site is loading a very large image that takes time to download and display, and also considering (JPEG/GIF) photos with progressive download/display where it starts to show portion of image or shows it blurry then as it completes download, it will render the full photo correctly. And we want to wait for the full render to complete.


    1. .complete returns whether it is completely loaded.
      The issue is with Firefox and Chrome is that even if this image isn’t there at all, .complete returns true.
      So you could use a combination of the above to check it’s completely loaded, perhaps use the WebDriver Wait helper to do so and timeout to a maximum time period.


  3. I don’t know much about C#. What would this method look like in Java? public static bool IsImageVisible(this IWebDriver driver, IWebElement image)


    var script = TestConfig.DriverType == “ie”

    ? “return arguments[0].complete”

    : “return (typeof arguments[0].naturalWidth!=\”undefined\”” +

    ” && arguments[0].naturalWidth > 0)”;

    return (bool) ((IJavaScriptExecutor) driver).ExecuteScript(script, image);



    1. This is the general structure of how I adapted the code to Java a while back. Note that I haven’t fully tested it out yet.

      public static boolean isImageVisible(WebDriver driver, WebElement image){
      Boolean result = null;
      if(your code to check for IE browser here){
      result = (Boolean) ((JavascriptExecutor) driver).executeScript(“return arguments[0].complete;”, image);
      }else{ //other browser types use diff method to check
      result = (Boolean) ((JavascriptExecutor) driver).executeScript(“return (typeof arguments[0].naturalWidth!=\”undefined\” && arguments[0].naturalWidth>0);”, image);
      return result.booleanValue();

      simply typecasting & using boolean data type didn’t seem to work per Eclipse (got error indicators) so I had to use the Boolean class instead & return the simple boolean version as a result.

      You could probably optimize the code above as well, and check for null result, but that’s the basic approach in Java.


  4. Working on a new project made me curious going back to this. If one, in a way, treats an HTML5 canvas with an image (drawn) in it as an image, how might one generically go about checking if there is an image that has completed loading in an HTML5 canvas? Or is that going to be specific to the actual site/app implementation/usage of the HTML5 canvas such that we don’t really have a general solution?


Comments are closed.