Selenium - check if an image is displayed on page

Question

I'm creating a suite of Selenium tests for an web album application. I would like to test whether an image is actually displayed (it contains valid image data). Is such thing possible?

Answer 1

If you're using Java, selenium has a method named eval or so. You give it a javascript string and it gives you the result as a string. For example, you could try this (in one line):

var req = new XMLHttpRequest();
req.open('get', document.getElementById('imageid').src, false);
req.send(null);
req.status==200

This should return "true" for status 200 or "false" for something else.

Answer 2

I faced this similar situation before where the src of the image is as expected but the image is not displayed on the page.

You can check if the image is getting displayed or not by using the JavaScriptExcecutor.

Use the following code - Pass the WebElement (image) -

 Object result = ((JavascriptExecutor) driver).executeScript(
   "return arguments[0].complete && "+
   "typeof arguments[0].naturalWidth != \"undefined\" && "+
   "arguments[0].naturalWidth > 0", image);

    boolean loaded = false;
    if (result instanceof Boolean) {
      loaded = (Boolean) result;
      System.out.println(loaded);
    }

You can verify if the image has actually loaded on the webpage by doing this.