I want the screenshot of only a specific element and not the entire page. Is it possible with Selenium Webdriver?

+1 vote
I'm using Selenium WebDriver and I'm only able to get the screenshot of the whole page. But, I want only a part of the page and just a specific element in particular. Is there any way to capture a screenshot by selected item or element?
Apr 30, 2018 in Selenium by kappa3010
• 2,090 points
12,304 views

2 answers to this question.

+1 vote

There is no in-built function for taking partial screenshot. But, there is a work around. After taking the entire screenshot, we can crop that screenshot to our requirements. Check the below code. I've done it that way.

driver.get("http://www.google.com");
WebElement element = driver.findElement(By.id("hplogo"));

// 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 = element.getLocation();

// Get width and height of the element
int eleWidth = element.getSize().getWidth();
int eleHeight = element.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);
answered Apr 30, 2018 by king_kenny
• 3,710 points
can you please help me in cropping ".//img[@class = 'captcha'] in the https://resident.uidai.gov.in/offlineaadhaar, please my contact mail id chvijay.1990@gmail.com
Hey @Vijay. I can not open the link you mentioned. It says "Access Denied"
It is perfect! :)
Thanks @Seb. Glad you issue get resolved.
can you please tell me how to take partial screenshot with python in linux

i am trying to save like this

element.save_screenshot("screenshot.png")

but it is not working
+1 vote

Hey @kappa3010, you can try this. Though there was a raster exception but if you ignore that, it works fine.

Here is the code that I used.

import java.awt.image.BufferedImage;
import java.awt.image.RasterFormatException;
import java.io.EOFException;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.Point;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class ScreenshotParticular 
{
    public static void main(String[] args) throws IOException, InterruptedException 
    {
        System.setProperty("webdriver.chrome.driver","C:\\Users\\priyj_kumar\\Downloads\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://www.pexels.com/search/Joker/");
        WebElement element1 = driver.findElement(By.xpath("/html/body/div[1]/div[3]/div[3]/div/div[1]/article/a[1]/img"));
        element1.click();
        Thread.sleep(4000);
        WebElement element = driver.findElement(By.xpath("/html/body/div[4]/div/div/section[1]"));
        File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
        BufferedImage fullimg = ImageIO.read(screenshot);  
        Point point = element.getLocation();
        int elewidth = element.getSize().getWidth();
        int eleheight = element.getSize().getHeight();
        try{
            BufferedImage elementScreenshot = fullimg.getSubimage(point.getX(), point.getY(), elewidth, eleheight);
            ImageIO.write(elementScreenshot, "png", screenshot);
        }
        catch(RasterFormatException ignoRasterFormatException)
       {
            System.out.println("Ignore Exception");
       }
       org.apache.commons.io.FileUtils.copyFile(screenshot, new File("C:\\Users\\priyj_kumar\\Downloads\\screenshot.png"));
       Thread.sleep(4000);
       driver.close();
   }
}

Hope this helps.

answered Dec 31, 2018 by Priyaj
• 57,660 points
What hep does ignoring the Raster exception do? Can you explain your code plz?

Hey @Vardhan, by keeping the 

BufferedImage elementScreenshot = fullimg.getSubimage(point.getX(), point.getY(), elewidth, eleheight);
            ImageIO.write(elementScreenshot, "png", screenshot);

Using try-catch block I got to overcome the RasterFormatException. Even though there was an exception not much was effected on the output. I got a correct output and would imply for the question also.

Talking about the code:

I took a complete screenshot of the webpage and then cropped it to a particular section or the element I needed. As you can see, I took the x and y coordinates and then using get.Subimage method I cropped the part in which the element is present. This way I got the screenshot modifed and created a file with .png extension. Please let me know if you have any further question on this?

After having taken and saved the screenshot all the other selenium commands don't work as if the IDE had switched outside of the WebDriver and couldn't go back to execute tasks on the WebDriver.

What can I do?
Hey Luca, can you show which commands you are using or your code snippet?
Hi can you give example with python linux envinorment

taking screenshot of a element. it is working in windows but not in linux

Related Questions In Selenium

0 votes
1 answer
0 votes
2 answers

Finding WebDriver element with Class Name in java

The better way to handle this element ...READ MORE

answered Apr 10, 2018 in Selenium by nsv999
• 5,510 points
3,547 views
0 votes
2 answers

Problem while using InternetExplorerDriver in Selenium WebDriver

enable trusted connection  in internet explorer by ...READ MORE

answered Aug 31 in Selenium by Sri
• 2,970 points
4,552 views
0 votes
1 answer

Geo-location microphone camera pop up

To Allow or Block the notification, access using Selenium and you have to ...READ MORE

answered May 11, 2018 in Selenium by Samarpit
• 5,890 points
2,602 views
0 votes
2 answers

How to use such xpath to find web elements

xpath are two types. 1) Absolute XPath:    /html/b ...READ MORE

answered Sep 2 in Selenium by Sri
• 2,970 points
2,875 views
0 votes
2 answers

Is it possible to manually set the attribute value of a Web Element using Selenium?

WebDriver driver; JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("document.getElementById('id123').setAttribute('attr', ...READ MORE

answered Sep 3 in Selenium by Sri
• 2,970 points
15,086 views
0 votes
1 answer