0

I have an API to capture the image of a particular element in DOM and return them. For that, I have a list of WebElements which needs to be captured into a single webpage. For that same, I have found the solution here which works fine if an element is visible on the screen (no need to scroll down to see it).

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);

But the cases where I need to scroll down to see element results in java.awt.image.RasterFormatException: (y + height) is outside of Raster. So I have added this.

What I have tried

//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"));

Question is how can I capture the Image of particular elements where some elements need to be scrolled. Please note that I have multiple elements with there By.id, By.name, By.xpath for multiple sources so I can't set fullImg.getSubimage(x,y,w,h) by y+100 or something as this might work for one webpage but not for others. Any Help will be appreciated.

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);
  • Backend: Spring Boot (Java 11)
  • Frontend: Angular
  • May I know what are you trying to achieve by capturing element's DOM images? – Vishal Aggarwal Sep 7 at 15:29
  • sure, we have a requirement to capture images and send back to the client. I am able to capture the image when an element is a visible on-screen but for an element which needs to be scrolled to be visible on-screen gives the java.awt.image.RasterFormatException: (y + height) is outside of Raster – Patel Romil Sep 7 at 15:51
0

WebElement extends TakesScreenshot, which means you can use getScreenshotAs on the WebElement directly. You can

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

We can check if the element is in viewport before scrolling, but I don't think it's necessary, just scroll every time

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.