How can I take a screenshot with Selenium WebDriver?

516

votes

Is it possible to take a screenshot using Selenium WebDriver?

seleniumselenium-webdriverashottakesscreenshotselenium-shutterbug

There is probably only one way to do this with the WebDriver Wire Protocol, but no one uses this protocol directly. Instead, people use different language bindings/libraries which wrap the low-level protocol. There are loads of language bindings, so you need to say which one you want to use. Otherwise, there are just too many answers. – oberlies

Which programming language are you using? – Ripon Al Wasim

Do you want to take a screenshot of whole page or a specific element? – Ripon Al Wasim

Yes, it is possible to take screenshot either entire page or for a specific element with Selenium WebDriver – Ripon Al Wasim

526

votes

Java

Yes, it is possible. The following example is in Java:

WebDriver driver = new FirefoxDriver();
driver.get("http://www.google.com/");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
// Now you can do whatever you need to do with it, for example copy somewhere
FileUtils.copyFile(scrFile, new File("c:\\tmp\\screenshot.png"));

290

votes

Python

Each WebDriver has a .save_screenshot(filename) method. So for Firefox, it can be used like this:

from selenium import webdriver

browser = webdriver.Firefox()
browser.get('http://www.google.com/')
browser.save_screenshot('screenie.png')

Confusingly, a .get_screenshot_as_file(filename) method also exists that does the same thing.

There are also methods for: .get_screenshot_as_base64() (for embedding in HTML) and .get_screenshot_as_png()(for retrieving binary data).

And note that WebElements have a .screenshot() method that works similarly, but only captures the selected element.

113

votes

C#

public void TakeScreenshot()
{
    try
    {            
        Screenshot ss = ((ITakesScreenshot)driver).GetScreenshot();
        ss.SaveAsFile(@"D:\Screenshots\SeleniumTestingScreenshot.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
    }
    catch (Exception e)
    {
        Console.WriteLine(e.Message);
        throw;
    }
}

79

votes

JavaScript (Selenium-Webdriver)

driver.takeScreenshot().then(function(data){
   var base64Data = data.replace(/^data:image\/png;base64,/,"")
   fs.writeFile("out.png", base64Data, 'base64', function(err) {
        if(err) console.log(err);
   });
});

67

votes

Ruby

require 'rubygems'
require 'selenium-webdriver'

driver = Selenium::WebDriver.for :ie
driver.get "https://www.google.com"
driver.save_screenshot("./screen.png")

More file types and options are available and you can see them in file takes_screenshot.rb.

35

votes

Java

I got this issue resolved. You can augment the RemoteWebDriver to give it all of the interfaces its proxied driver implements:

WebDriver augmentedDriver = new Augmenter().augment(driver);
((TakesScreenshot)augmentedDriver).getScreenshotAs(...); // It works this way

34

votes

PHP (PHPUnit)

It uses PHPUnit_Selenium extension version 1.2.7:

class MyTestClass extends PHPUnit_Extensions_Selenium2TestCase {
    ...
    public function screenshot($filepath) {
        $filedata = $this->currentScreenshot();
        file_put_contents($filepath, $filedata);
    }

    public function testSomething() {
        $this->screenshot('/path/to/screenshot.png');
    }
    ...
}

28

votes

C#

public Bitmap TakeScreenshot(By by) {
    // 1. Make screenshot of all screen
    var screenshotDriver = _selenium as ITakesScreenshot;
    Screenshot screenshot = screenshotDriver.GetScreenshot();
    var bmpScreen = new Bitmap(new MemoryStream(screenshot.AsByteArray));

    // 2. Get screenshot of specific element
    IWebElement element = FindElement(by);
    var cropArea = new Rectangle(element.Location, element.Size);
    return bmpScreen.Clone(cropArea, bmpScreen.PixelFormat);
}

19

votes

Java

public String captureScreen() {
    String path;
    try {
        WebDriver augmentedDriver = new Augmenter().augment(driver);
        File source = ((TakesScreenshot)augmentedDriver).getScreenshotAs(OutputType.FILE);
        path = "./target/screenshots/" + source.getName();
        FileUtils.copyFile(source, new File(path)); 
    }
    catch(IOException e) {
        path = "Failed to capture screenshot: " + e.getMessage();
    }
    return path;
}

13

votes

Jython

import org.openqa.selenium.OutputType as OutputType
import org.apache.commons.io.FileUtils as FileUtils
import java.io.File as File
import org.openqa.selenium.firefox.FirefoxDriver as FirefoxDriver

self.driver = FirefoxDriver()
tempfile = self.driver.getScreenshotAs(OutputType.FILE)
FileUtils.copyFile(tempfile, File("C:\\screenshot.png"))

11

votes

Java (Robot Framework)

I used this method for taking a screenshot.

void takeScreenShotMethod(){
    try{
        Thread.sleep(10000)
        BufferedImage image = new Robot().createScreenCapture(new Rectangle(Toolkit.getDefaultToolkit().getScreenSize()));
        ImageIO.write(image, "jpg", new File("./target/surefire-reports/screenshot.jpg"));
    }
    catch(Exception e){
        e.printStackTrace();
    }
}

You may use this method wherever required.

9

votes

Java

Seems to be missing here - taking screenshot of a specific element in Java:

public void takeScreenshotElement(WebElement element) throws IOException {
    WrapsDriver wrapsDriver = (WrapsDriver) element;
    File screenshot = ((TakesScreenshot) wrapsDriver.getWrappedDriver()).getScreenshotAs(OutputType.FILE);
    Rectangle rectangle = new Rectangle(element.getSize().width, element.getSize().height);
    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("//path//to");
    FileUtils.copyFile(screenshot, file);
}

6

votes

C#

using System;
using OpenQA.Selenium.PhantomJS;
using System.Drawing.Imaging;

namespace example.com
{
    class Program
    {
        public static PhantomJSDriver driver;

        public static void Main(string[] args)
        {
            driver = new PhantomJSDriver();
            driver.Manage().Window.Size = new System.Drawing.Size(1280, 1024);
            driver.Navigate().GoToUrl("http://www.example.com/");
            driver.GetScreenshot().SaveAsFile("screenshot.png", ImageFormat.Png);
            driver.Quit();
        }
    }
}

It requires NuGet packages:

PhantomJS 2.0.0
Selenium.Support 2.48.2
Selenium.WebDriver 2.48.2

It was Tested with .NET Framework v4.5.2.

4

votes

Java

I could not get the accepted answer to work, but as per the current WebDriver documentation, the following worked fine for me with Java 7 on OS X v10.9 (Mavericks):

import java.io.File;
import java.net.URL;

import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.Augmenter;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;

public class Testing {

   public void myTest() throws Exception {
       WebDriver driver = new RemoteWebDriver(
               new URL("http://localhost:4444/wd/hub"),
               DesiredCapabilities.firefox());

       driver.get("http://www.google.com");

       // RemoteWebDriver does not implement the TakesScreenshot class
       // if the driver does have the Capabilities to take a screenshot
       // then Augmenter will add the TakesScreenshot methods to the instance
       WebDriver augmentedDriver = new Augmenter().augment(driver);
       File screenshot = ((TakesScreenshot)augmentedDriver).
               getScreenshotAs(OutputType.FILE);
   }
}

4

votes

There are multiple methods through Selenium's Java and Python client to take a screenshot using Selenium WebDriver.

Java Methods

The following are the different Java methods to take a screenshot:

Using getScreenshotAs() from the TakesScreenshot interface:

Code block:

     package screenShot;

     import java.io.File;
     import java.io.IOException;

     import org.apache.commons.io.FileUtils;
     import org.openqa.selenium.OutputType;
     import org.openqa.selenium.TakesScreenshot;
     import org.openqa.selenium.WebDriver;
     import org.openqa.selenium.firefox.FirefoxDriver;
     import org.openqa.selenium.support.ui.ExpectedConditions;
     import org.openqa.selenium.support.ui.WebDriverWait;

     public class Firefox_takesScreenshot {

         public static void main(String[] args) throws IOException {

             System.setProperty("webdriver.gecko.driver", "C:\\Utility\\BrowserDrivers\\geckodriver.exe");
             WebDriver driver =  new FirefoxDriver();
             driver.get("https://login.bws.birst.com/login.html/");
             new WebDriverWait(driver, 20).until(ExpectedConditions.titleContains("Birst"));
             File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
             FileUtils.copyFile(scrFile, new File(".\\Screenshots\\Mads_Cruz_screenshot.png"));
             driver.quit();
         }
     }

Screenshot:
If the webpage is jQuery enabled, you can use ashot from the pazone/ashot library:

Code block:

     package screenShot;

     import java.io.File;
     import javax.imageio.ImageIO;
     import org.openqa.selenium.WebDriver;
     import org.openqa.selenium.firefox.FirefoxDriver;
     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;
     import ru.yandex.qatools.ashot.shooting.ShootingStrategies;

     public class ashot_CompletePage_Firefox {

         public static void main(String[] args) throws Exception {

             System.setProperty("webdriver.gecko.driver", "C:\\Utility\\BrowserDrivers\\geckodriver.exe");
             WebDriver driver =  new FirefoxDriver();
             driver.get("https://jquery.com/");
             new WebDriverWait(driver, 20).until(ExpectedConditions.titleContains("jQuery"));
             Screenshot myScreenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(driver);
             ImageIO.write(myScreenshot.getImage(),"PNG",new File("./Screenshots/firefoxScreenshot.png"));
             driver.quit();
         }
     }

Screenshot:
Using selenium-shutterbug from assertthat/selenium-shutterbug library:

Code block:

     package screenShot;

     import org.openqa.selenium.WebDriver;
     import org.openqa.selenium.firefox.FirefoxDriver;
     import com.assertthat.selenium_shutterbug.core.Shutterbug;
     import com.assertthat.selenium_shutterbug.utils.web.ScrollStrategy;

     public class selenium_shutterbug_fullpage_firefox {

         public static void main(String[] args) {

             System.setProperty("webdriver.gecko.driver", "C:\\Utility\\BrowserDrivers\\geckodriver.exe");
             WebDriver driver =  new FirefoxDriver();
             driver.get("https://www.google.co.in");
             Shutterbug.shootPage(driver, ScrollStrategy.BOTH_DIRECTIONS).save("./Screenshots/");
             driver.quit();
         }
     }

Screenshot:

Python Methods

The following are the different Python methods to take a screenshot:

Using save_screenshot() method:

Code block:

     from selenium import webdriver

     driver = webdriver.Chrome(r'C:\Utility\BrowserDrivers\chromedriver.exe')
     driver.get("http://google.com")
     driver.save_screenshot('./Screenshots/save_screenshot_method.png')
     driver.quit()

Screenshot:
Using the get_screenshot_as_file() method:

Code block:

     from selenium import webdriver

     driver = webdriver.Chrome(r'C:\Utility\BrowserDrivers\chromedriver.exe')
     driver.get("http://google.com")
     driver.get_screenshot_as_file('./Screenshots/get_screenshot_as_file_method.png')
     driver.quit()

Screenshot:
Using get_screenshot_as_png() method:

Code block:

     from selenium import webdriver

     driver = webdriver.Chrome(r'C:\Utility\BrowserDrivers\chromedriver.exe')
     driver.get("http://google.com")
     screenPnG = driver.get_screenshot_as_png()

     # Crop it back to the window size (it may be taller)
     box = (0, 0, 1366, 728)
     im = Image.open(BytesIO(screenPnG))
     region = im.crop(box)
     region.save('./Screenshots/get_screenshot_as_png_method.png', 'PNG', optimize=True, quality=95)
     driver.quit()

Screenshot:

3

votes

Ruby (Cucumber)

After do |scenario| 
    if(scenario.failed?)
        puts "after step is executed"
    end
    time = Time.now.strftime('%a_%e_%Y_%l_%m_%p_%M')

    file_path = File.expand_path(File.dirname(__FILE__) + '/../../../../../mlife_screens_shot')+'/'+time +'.png'

    page.driver.browser.save_screenshot file_path
end

Given /^snapshot$/ do
    time = Time.now.strftime('%a_%e_%Y_%l_%m_%p_%M')

    file_path = File.expand_path(File.dirname(__FILE__) + '/../../../../../mlife_screens_shot')+'/'+time +'.png'
    page.driver.browser.save_screenshot file_path
end

3

votes

Ruby

time = Time.now.strftime('%a_%e_%Y_%l_%m_%p_%M_%S')
file_path = File.expand_path(File.dirname(__FILE__) + 'screens_shot')+'/'+time +'.png'
#driver.save_screenshot(file_path)
page.driver.browser.save_screenshot file_path

3

votes

PHP

public function takescreenshot($event)
  {
    $errorFolder = dirname(dirname(__FILE__)) . DIRECTORY_SEPARATOR . "ErrorScreenshot";

    if(!file_exists($errorFolder)){
      mkdir($errorFolder);
    }

    if (4 === $event->getResult()) {
      $driver = $this->getSession()->getDriver();
      $screenshot = $driver->getWebDriverSession()->screenshot();
      file_put_contents($errorFolder . DIRECTORY_SEPARATOR . 'Error_' .  time() . '.png', base64_decode($screenshot));
    }
  }

3

votes

PowerShell

Set-Location PATH:\to\selenium

Add-Type -Path "Selenium.WebDriverBackedSelenium.dll"
Add-Type -Path "ThoughtWorks.Selenium.Core.dll"
Add-Type -Path "WebDriver.dll"
Add-Type -Path "WebDriver.Support.dll"

$driver = New-Object OpenQA.Selenium.PhantomJS.PhantomJSDriver

$driver.Navigate().GoToUrl("https://www.google.co.uk/")

# Take a screenshot and save it to filename
$filename = Join-Path (Get-Location).Path "01_GoogleLandingPage.png"
$screenshot = $driver.GetScreenshot()
$screenshot.SaveAsFile($filename, [System.Drawing.Imaging.ImageFormat]::Png)

Other drivers...

$driver = New-Object OpenQA.Selenium.Chrome.ChromeDriver
$driver = New-Object OpenQA.Selenium.Firefox.FirefoxDriver
$driver = New-Object OpenQA.Selenium.IE.InternetExplorerDriver
$driver = New-Object OpenQA.Selenium.Opera.OperaDriver

3

votes

C#

public static void TakeScreenshot(IWebDriver driver, String filename)
{
    // Take a screenshot and save it to filename
    Screenshot screenshot = ((ITakesScreenshot)driver).GetScreenshot();
    screenshot.SaveAsFile(filename, ImageFormat.Png);
}

2

votes

Java

Using RemoteWebDriver, after augmenting the Node with screenshot capability, I would store the screenshot like so:

void takeScreenShotMethod(){
    try{
        Thread.sleep(10000);
        long id = Thread.currentThread().getId();
        BufferedImage image = new Robot().createScreenCapture(new Rectangle(
            Toolkit.getDefaultToolkit().getScreenSize()));
        ImageIO.write(image, "jpg", new File("./target/surefire-reports/"
            + id + "/screenshot.jpg"));
    }
    catch( Exception e ) {
        e.printStackTrace();
    }
}

You may use this method wherever required. Then, I assume you can customize the style sheet of maven-surefire-report-plugin at surefire-reports/html/custom.css so that your reports include the link to the correct screenshot for each test?

2

votes

Java

String yourfilepath = "E:\\username\\Selenium_Workspace\\foldername";

// Take a snapshort
File snapshort_file = ((TakesScreenshot) mWebDriver)
        .getScreenshotAs(OutputType.FILE);
// Copy the file into folder

FileUtils.copyFile(snapshort_file, new File(yourfilepath));

2

votes

Java

public void captureScreenShot(String obj) throws IOException {
    File screenshotFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
    FileUtils.copyFile(screenshotFile, new File("Screenshots\\" + obj + "" + GetTimeStampValue() + ".png"));
}

public String GetTimeStampValue()throws IOException{
    Calendar cal = Calendar.getInstance();
    Date time = cal.getTime();
    String timestamp = time.toString();
    System.out.println(timestamp);
    String systime = timestamp.replace(":", "-");
    System.out.println(systime);
    return systime;
}

Using these two methods you can take a screen shot with the date and time as well.

2

votes

Selenese

captureEntirePageScreenshot | /path/to/filename.png | background=#ccffdd

2

votes

Python

def test_url(self):
    self.driver.get("https://www.google.com/")
    self.driver.save_screenshot("test.jpg")

It will save a screenshot in the same directory the where script is saved.

2

votes

You can give a try to AShot API. It is on GitHub.

Examples of tests.

2

votes

C#

You can use the following code snippet/function to take screenshot with Selenium:

    public void TakeScreenshot(IWebDriver driver, string path = @"output")
    {
        var cantakescreenshot = (driver as ITakesScreenshot) != null;
        if (!cantakescreenshot)
            return;
        var filename = string.Empty + DateTime.Now.Hour + DateTime.Now.Minute + DateTime.Now.Second + DateTime.Now.Millisecond;
        filename = path + @"\" + filename + ".png";
        var ss = ((ITakesScreenshot)driver).GetScreenshot();
        var screenshot = ss.AsBase64EncodedString;
        byte[] screenshotAsByteArray = ss.AsByteArray;
        if (!Directory.Exists(path))
            Directory.CreateDirectory(path);
        ss.SaveAsFile(filename, ImageFormat.Png);
    }

2

votes

Java

A method to capture a screenshot for the failures in Selenium with TestName and Timestamp appended.

public class Screenshot{
    final static String ESCAPE_PROPERTY = "org.uncommons.reportng.escape-output";
    public static String imgname = null;

    /*
     * Method to Capture Screenshot for the failures in Selenium with TestName and Timestamp appended.
     */
    public static void getSnapShot(WebDriver wb, String testcaseName) throws Exception {
      try {
      String imgpath = System.getProperty("user.dir").concat("\\Screenshot\\"+testcaseName);
      File f = new File(imgpath);
      if(!f.exists())   {
          f.mkdir();
        }
        Date d = new Date();
        SimpleDateFormat sd = new SimpleDateFormat("dd_MM_yy_HH_mm_ss_a");
        String timestamp = sd.format(d);
        imgname = imgpath + "\\" + timestamp + ".png";

        // Snapshot code
        TakesScreenshot snpobj = ((TakesScreenshot)wb);
        File srcfile = snpobj.getScreenshotAs(OutputType.FILE);
        File destFile = new File(imgname);
        FileUtils.copyFile(srcfile, destFile);

      }
      catch(Exception e) {
          e.getMessage();
      }
   }

1

votes

C# (Ranorex API)

public static void ClickButton()
{
    try
    {
        // code
    }
    catch (Exception e)
    {
        TestReport.Setup(ReportLevel.Debug, "myReport.rxlog", true);
        Report.Screenshot();
        throw (e);
    }
}

1

votes

You can create a webdriverbacked selenium object using the Webdriverclass object, and then you can take a screenshot.

How can I take a screenshot with Selenium WebDriver?

30 Answers

Java

Python

C#

JavaScript (Selenium-Webdriver)

Ruby

Java

PHP (PHPUnit)

C#

Java

Jython

Java (Robot Framework)

Java

C#

Java

Java Methods

Python Methods

Ruby (Cucumber)

Ruby

PHP

PowerShell

C#

Java

Java

Java

Selenese

Python

C#

C# (Ranorex API)