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
22,297 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
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
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?
+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
• 58,020 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
it's very informative dear

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,500 points
13,729 views
0 votes
2 answers

Problem while using InternetExplorerDriver in Selenium WebDriver

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

answered Aug 31, 2020 in Selenium by Sri
• 3,190 points
9,168 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,910 points
7,245 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 3, 2020 in Selenium by Sri
• 3,190 points
7,887 views
+1 vote
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 4, 2020 in Selenium by Sri
• 3,190 points
27,507 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP