How to capture the screenshot of a specific element rather than entire page using Selenium Webdriver?

We can get the element screenshot by cropping entire page screenshot as below:

driver.get("http://www.google.com");WebElement ele = driver.findElement(By.id("hplogo"));// Get entire page screenshotFile screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);BufferedImage  fullImg = ImageIO.read(screenshot);// Get the location of element on the pagePoint point = ele.getLocation();// Get width and height of the elementint eleWidth = ele.getSize().getWidth();int eleHeight = ele.getSize().getHeight();// Crop the entire page screenshot to get only element screenshotBufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(),    eleWidth, eleHeight);ImageIO.write(eleScreenshot, "png", screenshot);// Copy the element screenshot to diskFile screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");FileUtils.copyFile(screenshot, screenshotLocation);

Here is a Python 3 version using Selenium webdriver and Pillow.This program captures the screenshot of the whole page and crop the element based on its location. The element image will be available as image.png. Firefox supports saving element image directly using element.screenshot_as_png('image_name').

from selenium import webdriverfrom PIL import Imagedriver = webdriver.Chrome()driver.get('https://www.google.co.in')element = driver.find_element_by_id("lst-ib")location = element.locationsize = element.sizedriver.save_screenshot("shot.png")x = location['x']y = location['y']w = size['width']h = size['height']width = x + wheight = y + him = Image.open('shot.png')im = im.crop((int(x), int(y), int(width), int(height)))im.save('image.png')

Update

Now chrome also supports individual element screenshots. So you may directly capture the screenshot of the web element as given below.

from selenium import webdriverdriver = webdriver.Chrome()driver.get('https://www.google.co.in')image = driver.find_element_by_id("lst-ib").screenshot_as_png # or# element = driver.find_element_by_id("lst-ib")# element.screenshot_as_png("image.png")

The AShot framework from Yandex can be used for taking screenshots in Selenium WebDriver scripts for

• full web pages
• web elements

This framework can be found on https://github.com/yandex-qatools/ashot.

The code for taking the screenshots is very straightforward:

ENTIRE PAGE

Screenshot screenshot = new AShot()        .shootingStrategy(new ViewportPastingStrategy(1000))        .takeScreenshot(driver);ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\results.png"));

SPECIFIC WEB ELEMENT

Screenshot screenshot = new AShot()        .takeScreenshot(driver, driver.findElement(By.xpath("(//div[@id='ct_search'])[1]")));    ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\div_element.png"));

See more details and more code samples on this article.