硒：捕获DOM元素图像

Question

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

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元素的情况下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）
• 前端：角度

Answer 1

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

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

您可以在滚动之前检查元素是否在视口中 ，但是我认为这不是必需的，每次滚动