Guide on capturing a screenshot of a specific WebElement on a webpage using Selenium without capturing the entire page or screen

Can someone help me with capturing a specific image of a website instead of the entire screen? I tried using the code below to capture the screenshot, but it ends up capturing the entire screen which doesn't solve my problem.

WebDriver driver = new FirefoxDriver();
driver.get("http://www.google.com/");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("c:\\tmp\\screenshot.png"));

Answer №1

Could you give this a shot?

driver.get("https://stackoverflow.com/");
WebElement element = driver.findElement(By.xpath("//span[(text()='Stack Overflow') and @class='-img _glyph']"));
WrapsDriver wrapsDriver = (WrapsDriver) element;
File screenshot = ((TakesScreenshot) wrapsDriver.getWrappedDriver()).getScreenshotAs(OutputType.FILE);
Rectangle rectangle = new Rectangle(element.getSize().width, element.getSize().height, element.getSize().height, element.getSize().width);
Point location = element.getLocation();
BufferedImage bufferedImage = ImageIO.read(screenshot);
BufferedImage destImage = bufferedImage.getSubimage(location.x, location.y, rectangle.width, rectangle.height);
ImageIO.write(destImage, "png", screenshot);
File file = new File("C:\\123.png");
FileUtils.copyFile(screenshot, file);

Answer №2

Based on your code experiments, the getScreenshotAs() method will capture a screenshot of the entire page.

If you need to take a screenshot of a specific WebElement within a webpage, you can utilize the AShot() method by importing the ashot-1.4.4.jar library while working with Selenium Java Client v3.14.0, ChromeDriver v2.41, and Chrome v 68.0.

Note: The AShot() method from ashot-1.4.4.jar is designed to work only with jQuery enabled Web Applications.

Therefore, since the website http://www.google.com/ does not have jQuery enabled, the AShot() method from ashot-1.4.4.jar won't be able to capture the necessary screenshot.

For demonstration purposes, let's take a snapshot from the website https://jquery.com/.

  • Code Snippet:

    /* Insert your Java code here */
  • Screenshot Example:


Additional Resources

You may explore further insights in the discussion at How to take screenshot with Selenium WebDriver

Answer №3

My current setup includes selenium-java-3.141.59 and ChromeDriver version 83.0.4103.39, and I've found the following code to be very effective:

    WebDriver driver = new ChromeDriver();
   driver.get("https://www.google.com/");
  WebElement element = driver.findElement(By.id("hplogo"));
  Screenshot screenshotHeader = new AShot().coordsProvider(new WebDriverCoordsProvider()).shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(driver, element);
    try {
        ImageIO.write(screenshotHeader.getImage(),"jpg",new File("C:/TESTSELENIUM/Google.jpg"));
    } catch (IOException e) {
        e.printStackTrace();
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for generating an alert box with protractor?

While conducting tests, I am attempting to trigger an alert pop-up box when transitioning my environment from testing to production while running scripts in Protractor. Can someone assist me with this? ...

Collaborate and apply coding principles across both Android and web platforms

Currently, I am developing a web version for my Android app. Within the app, there are numerous utility files such as a class that formats strings in a specific manner. I am wondering if there is a way to write this functionality once and use it on both ...

Spring Boot fails to recognize path variable data sent from Angular

When working with Angular 7, I encountered a situation where I needed to pass a value from the service class of Angular. Here is how I achieved it: executeHelloWorldBeanServiceWithPathVariable(name){ console.log("name coming from here"+name); retu ...

Developing J2EE servlets with Angular for HTTP POST requests

I've exhausted my search on Google and tried numerous PHP workarounds to no avail. My issue lies in attempting to send POST parameters to a j2ee servlet, as the parameters are not being received at the servlet. Strangely though, I can successfully rec ...

Is it possible to interchange the positions of two components in a routing system?

driver-details.component.ts @Component({ selector: 'app-driver-details', templateUrl: './driver-details.component.html', styleUrls: ['./driver-details.component.css'] }) export class DriverDetailsComponent implements OnI ...

Utilize clipboard functionality in automated tests while using Selenium WebDriver in conjunction with JavaScript

How can I allow clipboard permission popups in automated tests using Selenium web driver, Javascript, and grunt? https://i.stack.imgur.com/rvIag.png The --enable-clipboard and --enable-clipboard-features arguments in the code below do not seem to have an ...