5

I have a html div like this

<div if="url" class="img-alt__graphic ng-scope" ng-style="ieCSSFilters" style="background-image: url(www.xxxxxxx.com;size=270x360);"></div>

In this div tag I don't have an id attribute, so how do I use the class attribute to check if the image is loaded or not?

Code Snippet:

import org.openqa.selenium.By; 
import org.openqa.selenium.JavascriptExecutor; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.firefox.FirefoxDriver;

public class QA {
    public WebDriver driver; 
    private String baseUrl;

    public static void main(String[] args) { 
        QA mv =new QA(); 
        mv.launch_test(); 
    }

    public void launch_test() 
    { 
        driver = new FirefoxDriver(); 
        baseUrl = "http://www.optimum.net"; 
        driver.get(baseUrl);

        WebElement image1 = driver.findElement(By.xpath("//div[contains(@class,'global-header__brand')]"));    

        Boolean imageLoaded1 = (Boolean) ((JavascriptExecutor)driver).executeScript("return arguments[0].complete && typeof arguments[0].naturalWidth != "undefined" && arguments[0].naturalWidth > 0", image1); 
        if (!imageLoaded1) 
        {
            System.out.println("1. Image is not present"); 
        }
        else 
        {
            System.out.println("1. Got it"); 
        }

        driver.close(); 
    }
}
  • 1
    you can check by method isdisplay().. – Helping Hands May 5 '15 at 7:19
  • ya i did with isDisplay() method , but for the broken image and loaded image is same output ? – Santhosh May 5 '15 at 11:10
  • yes it will be same because it consider image , no matter if it is broken or original.. – Helping Hands May 5 '15 at 11:16
  • 1
    actually web driver do not know which image you want to check , when it finds img tag it means it returns true. – Helping Hands May 5 '15 at 11:23
  • 1
    you can try using alt tag text because missing image alt tag will be same for all missing image and if real image found there then it will be diff. alt tag. – Helping Hands May 6 '15 at 7:32
6

I'd go with a two way approach, first make sure the Image can even be loaded, for this you could just use an HttpURLConnection. This could look like this:

Boolean checkLinks(WebElement Im, String MarkerForRelativeUrls) {
        int Response = 0;
        String Source = "";
        try {
            Source = Im.getAttribute("src");
            if (Source.equals("#"))
                return false;
            if (Source.startsWith(MarkerForRelativeUrls)) {
                String BaseUrl = new URL(driver.getCurrentUrl()).getHost();
                Source = BaseUrl + Source;
            }
            HttpURLConnection Connect = (HttpURLConnection) (new URL(Source)).openConnection();
            Response = Connect.getResponseCode();
            System.out.println("Responsecode: " + Response);
        } catch (Exception e) {
            // TODO: handle exception
        }
        if (!((Response + "").startsWith("4") || (Response + "").startsWith("5"))) {
            System.out.println("Valid Source:" + ((Source == null) ? "null" : Source));
            return true;
        } else {
            System.out.println("Invalid Source:" + ((Source == null) ? "null" : Source));
            return false;
        }
    }

If this returns true you know the the image source exist. Part two is making sure your Image is a really an Image for this you could use something along the lines of

static Boolean checkImageValidity(WebElement Im){
    String Source = Im.getAttribute("src");
    try{
    BufferedImage img=ImageIO.read(newURL(Source));
    return true;
    catch(IllegalArgumentException e){
        return false;
    }

}

It returns true if it can successfully create an instance of BufferedImage from the given source. At last you could use Im.getSize to make sure the Image has the correct dimensions. At this point you can be quite sure that your image can be displayed and any problem with it will be an issue with the clients browser. If you assign the image data to an outside variable or do an BufferedImage/null return instead of a bool you can do a lot of Image comprehension with this (for example if the content of the image is important). If you need anything else, just ask.

| improve this answer | |
3

Webdriver doesn't have eyes; therefore, there's a hard limit to the amount of GUI validation it can do. It can't tell you if the image that was served looks correct, or if it is broken. What it can tell you is that that image file was included in the HTML for the page. You'd need a human to verify that the page looks correct visually.

| improve this answer | |
0

I haven't tried it but I think grabbing the src attribute and trying to open that as another url and then checking whether it's a 404 or not can be one way of asserting that an image is present and properly loaded or not.

Here is my assert() method. It's based on phpunit and Magento testing framework. $this->driver is an instance of facebook selenium php bindings:

/**
 * Assert that each featured category block has image loaded properly on home page.
 */
 public function processAssert(CmsIndex $cmsIndex, SimpleElement $box)
 {
     $imgSrc = $cmsIndex->getFeaturedCategoriesBlock()->getImageBlock($box)->getAttribute('src');

     $this->driver->open($imgSrc);

     \PHPUnit_Framework_Assert::assertContains('404', $this->driver->getTitle());

     $cmsIndex->open();
 }
| improve this answer | |
0

I think you required Image validations.

The best way is to compare your screenshot.
- Check this link 1
- check here to get answers.

Otherwise, you have to check it by yourself.
Note: You can check if an element is not loaded in the page.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.