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

Question

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?

Answer 1

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

Comments

can you please help me in cropping

---

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

---

Hi! Have a look at this: https://www.edureka.co/community/62246/partial-screenshot-in-linux-with-python-selenium

---

I can take screenshot using above code but the final screenshot taken in zoom in level . So I am not getting expected view . Could you please help here

---

Hey @Abubacker, have you tried implementing @priyaj's solution?

Answer 2

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.

Comments

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

---

it's very informative dear