Selenium：捕获 DOM 元素图像答案

【问题标题】：Selenium: Capture DOM Elements ImageSelenium：捕获 DOM 元素图像
【发布时间】：2020-01-07 14:52:29
【问题描述】：

我有一个 API 来捕获 DOM 中特定元素的图像并返回它们。为此，我有一个 WebElement 列表，需要将其捕获到单个网页中。同样，我找到了解决方案here，如果元素在屏幕上可见（无需向下滚动即可查看），该解决方案可以正常工作。

driver.get(urltoconnect);
WebElement ele = getElement();

// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage  fullImg = ImageIO.read(screenshot);

// Get the location of element on the page
Point point = ele.getLocation();

// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();

// Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);

// Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screenshot, screenshotLocation);

但我需要向下滚动以查看元素的情况会导致java.awt.image.RasterFormatException: (y + height) is outside of Raster。所以我添加了这个。

我的尝试

//All Results in java.awt.image.RasterFormatException: (y + height) is outside of Raster

//scroll the page until the mentioned element is visible on the current page.
js.executeScript("arguments[0].scrollIntoView();",element); 

//This will scroll down the page by 450 pixel vertical      
js.executeScript("window.scrollBy(0,450)");

//AShot
Screenshot fpScreenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(400)).takeScreenshot(driver);
ImageIO.write(fpScreenshot.getImage(),"png",new File("image.png"));

问题是如何在某些元素需要滚动的地方捕获特定元素的图像。请注意，我有多个元素，其中 By.id、By.name、By.xpath 用于多个来源，因此我无法通过 y+100 设置 fullImg.getSubimage(x,y,w,h) 或其他内容，因为这可能适用于一个网页，但不适用于为其他人。任何帮助将不胜感激。

System.setProperty("webdriver.chrome.driver", "F:\\chromedriver");
WebDriver driver = new ChromeDriver();
driver.get("https://www.testing-whiz.com/demoscripts/basic-element.html");
WebElement ele = getElement();

// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage  fullImg = ImageIO.read(screenshot);

// Get the location of element on the page
Point point = ele.getLocation();

// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();

// Crop the entire page screenshot to get only element screenshot
try {
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);
}catch (Exception e) {
    js.executeScript("window.scrollBy(0,450)");
    //point.getY() = 732            //From console y = 492.8000183105469 after scroll https://stackoverflow.com/a/38767558/10961238
    //raster.getHeight() = 613
    BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight);
    ImageIO.write(eleScreenshot, "png", screenshot);
}

// Copy the element screenshot to disk
File screenshotLocation = new File("F:\\Images\\1.png");
FileUtils.copyFile(screenshot, screenshotLocation);

后端：Spring Boot (Java 11)
前端：角度

【问题讨论】：

标签： javascript java selenium spring-boot raster

【解决方案1】：

WebElement 扩展了TakesScreenshot，这意味着您可以直接在WebElement 上使用getScreenshotAs。你可以

public void takeElementScreenshot(WebElement element) {
    driver.executeScript("arguments[0].scrollIntoView();", element);
    File screenshot = ele.getScreenshotAs(OutputType.FILE);
    //...
}

滚动前可以check if the element is in viewport，不过我觉得没必要，每次都滚动就行了

【讨论】：