CODEWITHSUNDEEP
javaseleniumselenium-webdriverwebdriverwait
Sanat
Sanat

Reputation: 276

How to wait in selenium java until all images on the webpages are loaded properly

I am trying to take a screenshot of a webpage when all images are fully loaded in it.

Although I think the solution is already available on stack overflow but none of them is working for me. the most closest solution I found is here: Wait for an image to be fully loaded Selenium WebDriver

however in this code and arg written in javascript executer is not returning boolean output and that is why it is giving me an error.

Following code I am using but it is given in me compile time error as "Incompatible operand types Object and int" using equals is also not working for me here

 waitexternal.until(new Function<WebDriver, Boolean>(){
    @Override
    public Boolean apply(WebDriver ldriver) {
        ldriver = driver;
        JavascriptExecutor js = (JavascriptExecutor) driver;  

        return js.executeScript("return jQuery.active") == 0;

        //return (js.executeScript("return arguments[0]").equals("complete"));
        }
    }

   );

Upvotes: 2

Views: 3815

Answers (2)

MTK
MTK

Reputation: 81

You can try the below code. I am using it and it's working for me.

public Boolean verifyImageLoad() throws Exception {
     wait.until(
             new Function<WebDriver, Boolean>(){
                    @Override
                    public Boolean apply(WebDriver driver) {
                        return (Boolean) ((JavascriptExecutor)driver).executeScript("return arguments[0].complete", imageWebElementHere);
                    }
                }
            );
    if (!imageWebElementHere.getAttribute("naturalWidth").equals("0")){
        return true;
    }
    return false;
}

Upvotes: 1

Ali
Ali

Reputation: 1689

You can identify all the images in a current page using document.images. You can check how many images are there in the current page using document.images.length.

And to check those images are loaded properly or not, you can apply complete property on each image like this document.images[0].complete which will return true if the image is loaded otherwise false.

Here the proof

Below is the code which will check the DOM is loaded or not first then if the DOM is loaded, it will wait until all the images are loaded in that page.

// Launching the browser
driver.get("http://www.google.com");

// Declaring and Casting driver to JavaScriptExecutor
JavascriptExecutor jse = (JavascriptExecutor) driver;
// Getting DOM status
Object result = jse.executeScript("return document.readyState;");
System.out.println("=> The status is : "+result.toString());
// Checking DOM loading is completed or not?
if(result.equals("complete")) {
    // Fetching images count
    result = jse.executeScript("return document.images.length");
    int imagesCount = Integer.parseInt(result.toString());
    boolean allLoaded = false;
    // Checking and waiting until all the images are getting loaded
    while(!allLoaded) {
        int count = 0;
        for(int i=0;i<imagesCount;i++) {
            result = jse.executeScript("return document.images["+i+"].complete;");
            boolean loaded = (Boolean) result;
            if(loaded) count++;
        }
        // Breaking the while loop if all the images loading completes
        if(count == imagesCount) {
            System.out.println("=> All the Images are loaded...");
            break;
        } else {
            System.out.println("=> Not yet loaded...");
        }
        Thread.sleep(1000);
    }
}

But careful while using the above code because it may go to an infinity state sometimes if the element is not loaded at all.

To check a particular element is loaded or not, you can do like below : 

// To check a particular element is loaded or not?
WebElement googleLogo = driver.findElement(By.id("hplogo"));
boolean loaded = (Boolean) jse.executeScript("return arguments[0].complete;", googleLogo);
System.out.println("The google logo is loaded ? "+loaded);

To wait until that particular image is loaded, you can do like below :

// To check a particular element is loaded or not?
WebElement googleLogo = driver.findElement(By.id("hplogo"));
while(!(Boolean) jse.executeScript("return arguments[0].complete;", googleLogo)) {
    System.out.println("=> The google logo is not yet loaded...");
    Thread.sleep(1000);
}
System.out.println("The google logo is loaded... ");

To learn more about the JavaScript commands and the JavaScriptExecutor, check out and do subscribe to this channel

Source : HTML DOM images Collection, Document.images

I hope it helps...

Upvotes: 4

Related Questions