Difference between verifying if a image is displayed vs loaded on a webpage?

Question

I was asked to verify if a background-image is loaded to the webpage, but I don't really understand the difference between an image being loaded vs displayed. Is there? If so, how does one code for this test in a selenium java?

Below is the code I am trying to assert, first by checking that the url contains the file I am expecting, and then the part I don't know how to verify, checking if the file is loaded on the webpage or not.

Code:

<div class="_1WvEu" style="background-image: url(&quot;/resources/defaults/news_3.0/icons/weather/wi-67.svg&quot;);"><p class="_1DlTY"> Now </p><p class="_1Q1wt _1L3iW">62</p></div>

Assert 1:

assertTrue(thePageFactory.getAudHomePage(this).WeatherTopNavContainer.findElement(By.xpath("div[1]")).getAttribute("style").contains("/resources/defaults/news_3.0/icons/weather/wi-67.svg"),"File does not match for widget #1");

Assert 2:

?

Answer 1

Verify the url path alone will not find the image not loading issue. If the image is not accesible or image not present in the server, this will not fail for those case.

If it is an image tag, we can verify its height to check whether it is loaded or not. As it is background image, we cannot use that criteria here as well.

But using javascript, you can validate whether the image url is loading an image or not. This is will give you additional valition that your image is loaded.

class image_loaded(object):
  javascript= """var image = document.createElement('img');
   image.src = getBgUrl(document.getElementById('test-bg'));
   image.onload = function () {
     return true
   }; ."""
  def __init__(self, locator):
    self.url= url

  def __call__(self, driver):
    return  driver.execute_async_script(javascript,)


wait = WebDriverWait(driver, 60)
# get extract the image url from the style attribute with string manipulation
element = wait.until(image_loaded("the image url present in background"))

Answer 2

To verify that image is loaded or not use below code.

It will check the HTTP status of any url.

You can give url given in background-image style property or url given in href attribute of IMG tag

HttpClient client = new DefaultHttpClient();
HttpGet request1 = new HttpGet("provide-url-here");
HttpResponse response1 = client.execute(request1);
int code = response1.getStatusLine().getStatusCode();

If HTTP Status(value of variable code in above code snippet) is 2×× (in most cases 200), that means url is working fine and image is loaded properly

Answer 3

Of-coarse there is a difference between the two states of an image being loaded vs displayed.

Factually, it's not the image alone but the entire webpage (i.e. Page Object) that gets loaded.

You can find a relevant detailed discussion in Do we have any generic funtion to check if page has completely loaded in Selenium

isDisplayed()

isDisplayed() method validates if the element is displayed or not. This method avoids the problem of having to parse an element's style attribute and is defined as:

boolean isDisplayed()
Is this element displayed or not? This method avoids the problem of having to parse an element's "style" attribute.

Returns:
Whether or not the element is displayed

This usecase

As per the HTML it seems the element is a React element so before assering you need to lookout for the element inducing WebDriverWait as follows:

WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("div[1]")));