Selenium Java图像对比：如何等待商品页图片完全加载后截图

你当前的代码仅等待图片元素可见，但元素可见不代表图片资源已经加载完成——浏览器会先渲染img元素的占位区域，再异步加载图片内容，所以会出现截图时图片未显示的情况。

要确保图片完全加载后再截图，需要通过JavaScript检查图片的加载状态，以下是具体解决方案：

1. 自定义等待条件：检查单张图片加载完成 #

替换原有的waitElementVisibility方法，改为等待图片的加载状态：

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;

public void waitForImageToLoad(By imageLocator) {
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(40));
    wait.until(driver -> {
        WebElement image = driver.findElement(imageLocator);
        // 通过JS验证图片是否加载完成且有效
        return (Boolean) ((JavascriptExecutor) driver).executeScript(
            "return arguments[0].complete && arguments[0].naturalWidth > 0", image);
    });
}

原理：

• arguments[0].complete：判断图片的加载请求是否已完成
• arguments[0].naturalWidth > 0：确保图片不是损坏或未加载的占位图（加载失败的图片naturalWidth为0）

2. 修改截图方法，使用新的等待逻辑 #

将截图方法中的waitElementVisibility替换为waitForImageToLoad：

public void captureSuccesfulPageScreenShot() {
    waitForImageToLoad(visibleImage);
    TakesScreenshot screenshot = (TakesScreenshot) driver;
    File file = screenshot.getScreenshotAs(OutputType.FILE);
    File path = new File("images/screenshot.png");
    try {
        FileUtils.copyFile(file, path);
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
}

public void captureProblemUserScreenShot() {
    waitForImageToLoad(visibleImage);
    TakesScreenshot screenshot = (TakesScreenshot) driver;
    File file = screenshot.getScreenshotAs(OutputType.FILE);
    File path = new File("images/problemUserScrSh.png");
    try {
        FileUtils.copyFile(file, path);
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
}

3. 扩展：等待页面所有图片加载完成 #

如果商品页面有多个图片，需要确保全部加载完成，可以使用以下方法：

import org.openqa.selenium.WebElement;
import java.util.List;

public void waitForAllImagesToLoad() {
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(40));
    wait.until(driver -> {
        List<WebElement> images = driver.findElements(By.tagName("img"));
        if (images.isEmpty()) return true;
        // 遍历检查每张图片的加载状态
        for (WebElement img : images) {
            Boolean isLoaded = (Boolean) ((JavascriptExecutor) driver).executeScript(
                "return arguments[0].complete && arguments[0].naturalWidth > 0", img);
            if (!isLoaded) return false;
        }
        return true;
    });
}

使用时直接在截图前调用waitForAllImagesToLoad()即可。

内容的提问来源于stack exchange，提问作者Alex