如何使用Java+Selenium在页面每次交互后截取屏幕截图

核心思路 #

把截图逻辑封装成工具方法，在每次交互操作（点击、滚动等）完成后调用；或者直接封装带截图的交互操作方法，避免重复编写截图代码。

1. 封装截图工具类 #

利用Selenium的TakesScreenshot接口实现截图功能，自动生成带时间戳的唯一文件名，防止文件被覆盖：

import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import java.io.File;
import java.io.IOException;
import org.apache.commons.io.FileUtils;

public class ScreenshotUtils {
    // 生成唯一截图文件名
    private static String getUniqueFileName() {
        return "screenshot_" + System.currentTimeMillis() + ".png";
    }

    // 保存截图到指定目录
    public static void capture(WebDriver driver, String saveDir) {
        try {
            File sourceFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
            File targetFile = new File(saveDir + File.separator + getUniqueFileName());
            FileUtils.copyFile(sourceFile, targetFile);
            System.out.println("截图已保存至: " + targetFile.getAbsolutePath());
        } catch (IOException e) {
            System.err.println("截图失败: " + e.getMessage());
        }
    }
}

2. 封装带截图的交互操作 #

将点击、滚动等操作与截图逻辑绑定，调用一次即可完成操作+截图：

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import java.io.File;

public class ActionHelper {
    private WebDriver driver;
    private String screenshotDir;

    public ActionHelper(WebDriver driver, String screenshotDir) {
        this.driver = driver;
        this.screenshotDir = screenshotDir;
        // 自动创建截图目录（不存在则创建）
        new File(screenshotDir).mkdirs();
    }

    // 点击元素后自动截图
    public void click(WebElement element) {
        element.click();
        ScreenshotUtils.capture(driver, screenshotDir);
    }

    // 滚动到指定元素后自动截图
    public void scrollToElement(WebElement element) {
        ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView({behavior: 'smooth', block: 'center'});", element);
        ScreenshotUtils.capture(driver, screenshotDir);
    }

    // 自定义滚动距离后自动截图
    public void scrollBy(int x, int y) {
        ((JavascriptExecutor) driver).executeScript("window.scrollBy(" + x + ", " + y + ");");
        ScreenshotUtils.capture(driver, screenshotDir);
    }
}

3. 实际使用示例 #

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.By;

public class DemoTest {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        // 指定截图保存目录
        ActionHelper actionHelper = new ActionHelper(driver, "./test_screenshots");

        try {
            driver.get("https://example.com");
            
            // 点击链接后截图
            WebElement moreInfoLink = driver.findElement(By.linkText("More information..."));
            actionHelper.click(moreInfoLink);
            
            // 向下滚动500像素后截图
            actionHelper.scrollBy(0, 500);
            
        } finally {
            driver.quit();
        }
    }
}

注意事项 #

• 需要引入commons-io依赖（Maven配置示例）：

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.15.1</version>
</dependency>

• 如果需要全局自动截图（所有WebDriver操作后都触发），可以封装WebDriver代理类，重写click()、executeScript()等方法，内部自动调用截图逻辑，但这种方式复杂度较高，适合全量需求场景。
• 也可以根据测试步骤自定义文件名（比如click_more_info_link.png），方便后续快速定位截图对应的操作。

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