How to take Full and Partial Screenshot with Selenium WebDriver

While performing manual testing we often take screenshots of the broken pages or bugs to use them as evidence and they are very useful in convincing the developers. Similarly, in automation Selenium provides us the commands to capture screenshots of the webpages.

In this tutorial, we will learn to take full screenshots and partial screenshots of the webpage which is currently under test. We can also write some code logic to capture screenshots on every failure screen. That's a bit advanced-level concept. But in this post, we'll learn to take screenshots whenever we want. We also have to do some file-handling operations while taking and saving screenshots with Selenium WebDriver.

1. Take a Full Screenshot with Selenium WebDriver

'TakeScreenshot' is the interface that is used to capture screenshots in Selenium WebDriver. Let's discuss the code to take screenshot step by step:

1. File - It is one of the inbuilt Java classes which is used for File handling operations, like opening a new file, reading/writing a file, etc. For taking screenshot first thing is to create an object of the File class so that we can save the screenshot in that object.

/* Create object of File class of Java */

File screenshot = some selenium code

2. TakeScreenshot - It is a Selenium interface that is used to take screenshots. 

• Pass the WebDriver object to the TakeScreenshot interface constructor, which we create at the beginning of every script. 
• Then we'll call the getScreenshotAs() method from TakeScreenshot.
• Pass the parameter OutputType.FILE which will return the screenshot as a file. 
• That's why we created a File object in step 1 to save this screenshot.

So, let's complete the syntax from Step 1

/* Capture screenshot using getScreenshotAs() method of Webdriver
 * Set Output type of screenshot as 'FILE'
*/

File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

3. FileUtils - It is the inbuilt utility of Java that is used to perform operations like copying a file, moving a file, etc.

• We'll call copyFile() method of FileUtils class, simply using '.' dot operator. 
• You must have observed that we have not created the object of FileUtils for calling copyFile() because it's a static method. And static methods can be called by simply using the dot (.) operator with a class name in Java. You do not need to create an object for it.
• Now we'll pass two parameters to copyFile() method.
• Screenshot object which we created in the first step.
• Path of your local system where you want to save the screenshot.

/* Use FileUtils class of Java 
 * Call it's copyFile method
 * Copy screenshot file to a location with some name and extension you want
*/

FileUtils.copyFile(screenshot, new File("D:\\screenshot.jpg"));

Example Program to take Full Screenshot with Selenium WebDriver:

public class CaptureScreenshot {

    // Main Method is the execution point of any Java Program
    public static void main(String[] args){

	// Initialize Webdriver Object
	System.setProperty("webdriver.chrome.driver", "D:\\chromedriver.exe");
	WebDriver driver = new ChromeDriver();

	// Open URL
	driver.get("https://www.techlistic.com/p/selenium-tutorials.html");

	// Set Chrome window size
	driver.manage().window().setSize(new Dimension(1552, 840));

	// Enter Firstname
	driver.findElement(By.name("firstname")).sendKeys("Tom");
	// Set Lastname
	driver.findElement(By.name("lastname")).sendKeys("Wood");

	// Create File object and save screenshot of current webpage inside it
	File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

	// Copy screenshot file to a location with some name and extension you want
	FileUtils.copyFile(screenshot, new File("D:\\screenshot.jpg"));
	
	// Close browser
	driver.close();
		
  }
}

2. Take a Partial Screenshot with Selenium WebDriver

Sometimes we don't want to take a screenshot of the full screen. The reasons might be, full-size images would last in huge memory storage for the image directory or sometimes we need to take element-specific screenshots due to test case requirements which makes more sense.

Example Program for taking partial screenshots:

The above program is self-explanatory, comments are provided with each line of code. But let's understand it in detail: 

• So, basically, we are using the 'Point' lib of Selenium, where we are getting the height and width of the element using the getSize() method.
• Then using BufferedImage lib to take a screenshot of the entire screen.
• And then use img.getSubimage() to get the sub-image from the large image using the x and y-axis location of the element to take a partial screenshot.
• Writing the partial image using Image.write() into a file object named 'screen'.
• And in the end save that partial screenshot using FileUtils.copyFile().

Selenium Wait Commands  << Previous   ||   Next >>   Find Broken links with Selenium

Author

Vaneesh Behl

Passionately working as an Automation Developer for more than a decade.