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 screenshot and partial screenshot 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 advance 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 screenshot with Selenium WebDriver.

Using Google Chrome to Capture Web ...

Using Google Chrome to Capture Web Page Screenshot - Area or Full Page

1. Take Full Screenshot with Selenium WebDriver

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

1. File - It is one of the inbuilt Java class which is used for File handling operations, like open a new file, read/write a file etc. For taking screenshot first thing is to create 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 which is used to take the screenshot. 

• Pass the WebDriver object to 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 which is used  to perform operations like copy a file, move 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 dot (.) operator with class name in Java. You do not need to create object for it.
• Now we'll pass two parameters to copyFile() method.
• Screenshot object which we created in 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 Partial Screenshot with Selenium WebDriver

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

Example Program for taking partial screenshot:

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 'Point' lib of Selenium, where we are getting the height and width of the element using getSize() method.
• Then using BufferedImage lib to take the screenshot of entire screen.
• And then using img.getSubimage() to get the sub-image from the large image using x and y axis location of the element to take partial screenshot.
• Writing the partial image using Image.write() into a file object named 'screen'.
• And in the end saving 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 from more than a decade. Let's connect LinkedIn.