Capturing screen shots of browsers with Selenium and Cloud Testing – Part 1

Phil Smith - Cloud Testing — Wed, 24 Jun 2009 11:59:48 +0000

When functionally testing your website, it is always useful to have a screen shot of what the browser window looked like. There are a number of ways of doing this. In this first of a series of articles we cover producing these with Selenium. Future articles will cover further advanced features of Selenium and using the Cloud Testing Functional service.

Selenium

This article concentrates on the Java interface/driver for Selenium RC, however a number of other drivers are available to use (.NET, Perl, PHP, Python, Ruby).

There are two methods of the Selenium class that can be used to capture screen shots. Both capture a PNG to a file.

captureScreenshot()

void captureScreenshot (String filename);

filename – a string of the filename to store the captured screen shot in. E.g.: “C:\sshot.png”.

This method captures the contents of the OS viewport (i.e. whatever is currently being displayed on the monitor), and works on all browsers.

Example:

Selenium browser;

browser = new DefaultSelenium(seleniumServer,
    4444,
    "*firefox",
    "http://www.google.co.uk");

browser.start();

browser.open("/");

browser.captureScreenshot("C:\screenshot.png");

...

Image created using captureScreenshot()

captureEntirePageScreenshot()

void captureEntirePageScreenshot (String filename, String kwargs);

filename – a string of the filename to store the captured screen shot in. E.g.: “C:\sshot.png”.
kwargs – a string that modifies the way the screenshot is captured. E.g.: “background=#CCFFDD”.

This saves the entire contents of the current window canvas (i.e. what is in the browser, but not the controls, status bar, scroll bars etc.). This currently only works with Firefox (using a built in feature), and IE if you install the SnapsIE tool (available from http://snapsie.sourceforge.net/)

Example:

Selenium browser;

browser = new DefaultSelenium(seleniumServer,
    4444,
    "*firefox",
    "http://www.google.co.uk");

browser.start();

browser.open("/");

browser.captureEntirePageScreenshot("C:\screenshot.png","");

...

Image created using captureEntirePageScreenshot()

Note that this image does not have any of the browser controls or OS visible.

Long Pages

If the web page extends to more than a screen, then this will all be captured with captureEntirePageScreenshot() as shown below:

A long web page captured with captureEntirePageScreenshot()

Contrast this to the following image which does not display the whole page, just scroll bars:

Long web page captured with captureScreenshot()

Further Articles…

In future articles, we will be covering advanced features of capturing images using Selenium, and how you can make use of these screen capture functions within the Cloud Testing service at www.cloudtesting.com.

Cloud Testing Blog » capture

Capturing screen shots of browsers with Selenium and Cloud Testing – Part 1

Selenium

captureScreenshot()

Example:

Image created using captureScreenshot()

captureEntirePageScreenshot()

Example:

Image created using captureEntirePageScreenshot()

Long Pages

Further Articles…