Capture screenshot of all the elements present on a page - selenium

Question

I'm trying to capture the screenshot of all the elements present on a webpage and want to store it in my disk for which i have written the below code.
The only issue is this piece of code is working only for the first iteration and after which some unexpected thing is happening.
List<WebElement> eleId = driver.findElements(By.xpath("//*[#id]")); //fetch all the elements with ID attribute
System.out.println(eleId.size());
for (int i = 0;i < eleId.size();i++) {
// 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 = eleId.get(i).getLocation();
// Get width and height of the element
int eleWidth = eleId.get(i).getSize().getWidth();
int eleHeight = eleId.get(i).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);
// Creating variables name for image to be stores in the disk
String fileName = eleId.get(i).getAttribute("id");
String imageLocation = "D:\\" + fileName + ".png";
// System.out.println(imageLocation);
// Copy the element screenshot to disk
File screenshotLocation = new File(imageLocation);
FileUtils.copyFile(screenshot, screenshotLocation);
System.out.println("Screenshot has been stored.");
}

Answer 1

Hi Sandeep try below code. It is working for me. I just added one "if" condition to check the image height and width.
#Test(enabled=true)
public void getIndividualElementScreenShot() throws IOException{
WebDriver driver = new FirefoxDriver();
driver.get("http://www.google.com/");
driver.manage().timeouts().pageLoadTimeout(30, TimeUnit.SECONDS);
driver.manage().window().maximize();
List<WebElement> eles = driver.findElements(By.xpath("//*[#id]"));
System.out.println(eles.size());
for(WebElement ele : eles){
//Get Entire page screen shot
File screenShot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage fullImage = ImageIO.read(screenShot);
//Get the location on the page
Point point = ele.getLocation();
//Get width and height of an element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();
//Cropping the entire page screen shot to have only element screen shot
if(eleWidth != 0 && eleHeight != 0){
BufferedImage eleScreenShot = fullImage.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight);
ImageIO.write(eleScreenShot, "png", screenShot);
//Creating variable name for image to be store in disk
String fileName = ele.getAttribute("id");
String imageLocation = "F:\\ElementImage\\"+fileName+".png";
System.out.println(imageLocation);
//Copy the element screenshot to disk
File screenShotLocation = new File(imageLocation);
org.apache.commons.io.FileUtils.copyFile(screenShot, screenShotLocation);
System.out.println("Screen shot has beed stored");
}
}
driver.close();
driver.quit();
}

Answer 2

Your code is doing fine. But you are overwriting the file in each iteration. Did you get it? Change file name in each iteration by assigning new file name in fileName variable. Use the code below:
List<WebElement> eleId = driver.findElements(By.xpath("//*[#id]")); //fetch all the elements with ID attribute
System.out.println(eleId.size());
for (int i = 0;i < eleId.size();i++) {
// 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 = eleId.get(i).getLocation();
// Get width and height of the element
int eleWidth = eleId.get(i).getSize().getWidth();
int eleHeight = eleId.get(i).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);
// Creating variables name for image to be stores in the disk
String fileName = eleId.get(i).getAttribute("id");
String imageLocation = "D:/" + fileName + i + ".png";
// System.out.println(imageLocation);
// Copy the element screenshot to disk
File screenshotLocation = new File(imageLocation);
FileUtils.copyFile(screenshot, screenshotLocation);
System.out.println("Screenshot has been stored.");
}