How to create screenshots in your Selenium Webdriver tests

As they say, a picture often says more than a thousand words. This also applies to test execution reports – no matter the clarity of your error messages, often a screenshot of the status of your browser instance at the moment a particular error occurs is the most efficient way to record what has gone wrong. In this post, I will show you how to generate a screenshot in Selenium Webdriver, which you can then save to disk for later reference and/or include in your custom reports.

First, we need a simple test script in which a screenshot is created at a given moment. Here it is:

public static void runTest() {

	WebDriver driver = new FirefoxDriver();

	driver.get("http://parabank.parasoft.com");

	// log in
	driver.findElement(By.name("username")).sendKeys("john");
	driver.findElement(By.name("password")).sendKeys("demo");
	driver.findElement(By.xpath("//input[@value='Log In']")).click();
		
	//create screenshot
	createScreenshot(driver,"C:\\temp\\screen.png");

	driver.quit();
}

The createScreenshot method takes two arguments: the driver instance and a physical location where the created screenshot will be stored. The implementation of this method is pretty straightforward:

public static void createScreenshot(WebDriver driver, String location) {

	// generate screenshot as a file object
	File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
	try {
		// copy file object to designated location
		FileUtils.copyFile(scrFile, new File(location));
	} catch (IOException e) {
		System.out.println("Error while generating screenshot:\n" + e.toString());
	}
}

When we run this test, we see that a screenshot is created and stored in the location we provided (in my case, C:\temp):
Screenshot as created by our code

Creating screenshots when an alert is active
One of my readers, Kritika Gupta, nicely alerted me that the method described above does not work when there is a Javascript alert active. Instead, an UnhandledAlertException is thrown and no screenshot is created. This seems to be a known issue with Selenium, as can be read here. I have found a way to circumvent this problem by using the Java Robot class. It works as follows:

public static void createScreenshotUsingRobot(WebDriver driver, String location) {
		
	BufferedImage image = null;
	try {
		image = new Robot().createScreenCapture(new Rectangle(Toolkit.getDefaultToolkit().getScreenSize()));
	} catch (HeadlessException | AWTException e1) {
		e1.printStackTrace();
	}
	try {
		ImageIO.write(image, "png", new File(location));
	} catch (IOException e) {
		e.printStackTrace();
	}
}

When we use this method to create screenshot, it even works when Javascript alert messages are active, as can be seen in the screenshot below, which has been taken using the code above:
Screenshot taken using the Java Robot class
Please note that the code above takes a screenshot of your complete desktop (as you can see) instead of a screenshot from the active browser window only. Also, remember that this code does not take care of handling the popup. This should be done in your main test code.

The Eclipse project I used for this example can be downloaded here.

15 thoughts on “How to create screenshots in your Selenium Webdriver tests

  1. Bas ,

    I am taking screenshot of page and it is working fine. But now I want to take zoomed screen screenshot.

    I am opening site and doing 500% zooming , but when take screenshot it is not coming with zoom , so how can i achieve that screenshot comes with current zoom?

    My code is given below :

    String url = “http://en.wikipedia.org/wiki/Software_testing”;

    driver.get(url);

    driver.manage().window().setSize(new Dimension(Toolkit.getDefaultToolkit().getScreenSize().width, Toolkit.getDefaultToolkit().getScreenSize().height));
    WebElement html = driver.findElement(By.tagName(“html”));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));
    html.sendKeys(Keys.chord(Keys.CONTROL, Keys.ADD));

    File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
    FileUtils.copyFile(scrFile, new File(“d:\\screenshot.png”));
    }

  2. Hi Bas,

    I have an issue while generating jBehave reports with Screenshots. Reports are pointing to correct folder but wrong file name.

    Example: Correct file name : failed-scenario-1460623747253.png

    The name reports are taking is failed-scenario-5f32e96f-ae76-40dd-853c-5111c48c3974.png

    Can you help or advice in this.

    • So the screenshots are created (and you can see them on your file system) but the HTML file contains the incorrect file name reference? Could you email me your code? bas AT ontestautomation.com

  3. Pingback: Creating-html-reports-for-your-selenium-tests-using-ExtentReports – java-j2ee

Leave a Reply

Your email address will not be published. Required fields are marked *