how to find an image tag using selenium webdriver in java and how to check if it has been properly displayed?

Question

I need to check a webpage for all the images and get their attributes like src and width etc using selenium webdriver. Can someone please help me with it ?

Answer 1

I will give you few ideas:

1st I would start with findElements method which returns all elements:

 List<WebElement> allImages = driver.findElements(By.ByTagName("img"));
 List<String> widthofImage = new ArrayList<String>;
 List<String> heighthOfImage = new ArrayList<String>;

Then you will have to iteratwe through the list

 for (WebElement imageFromList: allImages){
   widthOfImage.add(imageFromList.getAttribute("width"));
   heighthOfImage.add(imageFromList.getAttribute("height"));
   //.. etc

 }

And then you have these values stored :) You can then iterate throuh them using same way as noted above...

NOTE I am writing this from top of the head. So please double check the code

BTW the driver variable is assumed healthy and living instance of WebDriver

Answer 2

Finding elements by Tag and getting their Attributes

As Pavel Janicek says you will have to find all of the WebElements matching the tag "img". However I often create objects that abstract the WebElement object (this may or may not be a good thing).

For example, the following objects may abstract an Image as a type of WebElement (you may extend WebElement if you wish):

public class BasicElement {
    protected WebElement element;

    public BasicElement(WebElement element) {
        this.element = element;
    }
}

public class Image extends BasicElement {

    private String width;
    private String height;
    private String src;

    public Image(WebElement element) {
        super(element);

        assignWidth();
        assignHeight();
        assignHeight();
    }


    private void assignWidth() {
        width = element.getAttribute("width");
    }

    private void assignHeight() {
        height = element.getAttribute("height");
    }

    private void assignSrc() {
        src = element.getAttribute("src");
    }

    // various getters, setters and image related functionality

}

And then you would iterate through the WebElements as Image objects and assign their attributes like so:

List<Image> images;
List<WebElement> imageElements = driver.findElements(By.ByTagName("img"));
for (WebElement imageElement : imageElements) {
    images.add(new Image(imageElement));
}

This could probably be shortened if you extend WebElement.

Determining Visibility of Elements

If you want to know if an element is visible then I suggest you implement a wait:

public WebElement waitForElementVisible(WebDriver driver, final By selector, int timeOutInSeconds) {
    WebElement element;
    try{
        WebDriverWait wait = new WebDriverWait(driver, timeOutInSeconds);
        element = wait.until(ExpectedConditions.visibilityOfElementLocated(selector));

        return element;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}

Or if you want to know if the element exists:

public static WebElement waitForElementPresent(WebDriver driver, final By selector, int timeOutInSeconds) {
    WebElement element;
    try{
        WebDriverWait wait = new WebDriverWait(driver, timeOutInSeconds);
        element = wait.until(ExpectedConditions.presenceOfElementLocated(selector));

        return element;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}