How to capture screenshot of a WebElement within a webpage but not the entire screen or page through Selenium

Question

I have to capture a screenshot of an image of a particular website. Maybe this is 20% off entire screen, I have used below code, it is capturing the entire screen. Which is

Answer 1

As per your code trials getScreenshotAs() method will take the screenshot of the entire page.

To capture the screenshot of an WebElement within a particular webpage you can use the AShot() method importing ashot-1.4.4.jar while working with Selenium Java Client v3.14.0, ChromeDriver v2.41, Chrome v 68.0.

Note: AShot() method from ashot-1.4.4.jar works only with jQuery enabled Web Applications.

So as the website http://www.google.com/ is not jQuery enabled AShot() method from ashot-1.4.4.jar won't be able to take the required screenshot.

As an example we will take a snapshot from the website https://jquery.com/.

• Code Block:

  package aShot;
  
  import java.io.File;
  
  import javax.imageio.ImageIO;
  
  import org.openqa.selenium.By;
  import org.openqa.selenium.WebDriver;
  import org.openqa.selenium.WebElement;
  import org.openqa.selenium.chrome.ChromeDriver;
  import org.openqa.selenium.chrome.ChromeOptions;
  import org.openqa.selenium.support.ui.ExpectedConditions;
  import org.openqa.selenium.support.ui.WebDriverWait;
  
  import ru.yandex.qatools.ashot.AShot;
  import ru.yandex.qatools.ashot.Screenshot;
  
  public class ashot_google_homepage_logo {
  
      public static void main(String[] args) throws Exception {
  
          System.setProperty("god.bless.you", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
          ChromeOptions options = new ChromeOptions();
          options.addArguments("start-maximized");
          options.addArguments("disable-infobars");
          options.addArguments("--disable-extensions"); 
          WebDriver driver =  new ChromeDriver(options);
          driver.get("https://jquery.com/");
          WebElement myWebElement = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//h3[contains(.,'Lightweight Footprint')]")));
          Screenshot myScreenshot = new AShot().takeScreenshot(driver, myWebElement);
          ImageIO.write(myScreenshot.getImage(),"PNG",new File("./Screenshots/elementScreenshot.png"));
          driver.quit();
      }
  }
  

• Screenshot:

---

Reference

You can find a detailed discussion in How to take screenshot with Selenium WebDriver