How To Take Entire Page Screenshots In Selenium WebDriver Scripts

The ashot framework from Yandex can be used for taking screenshots in Selenium WebDriver scripts for

1. full web pages
2. web elements

This framework can be found on https://github.com/yandex-qatools/ashot.

Selenium WebDriver TakeScreenshot interface is rather limited

By default, screenshots can be taken in Selenium WebDriver scripts using the TakeScreenshot interface:

import static openqa.selenium.OutputType.*;
 
File screenshotFile = ((Screenshot)driver).getScreenshotAs(file);
String screenshotBase64 = ((Screenshot)driver).getScreenshotAs(base64);

If you need to take entire page screenshots or screenshots of a web element, this is possible but complicated.

Take Entire Page Screenshots With The AShot Framework

In another article, I showed how to generate HTML reports using the Allure framework from Yandex.

Yandex has other frameworks available in addition to Allure.

The ASHOT framework is helpful for taking screenshots.

Lets see some code samples.

The following test script implements a test case for the www.vpl.ca site that

1. opens the home page of the site
2. executes a keyword search
3. clicks on the title of the first result on the results page
4. checks that the book title is displayed on the details page
5. checks that the book title's length is greater than 0

import static org.junit.Assert.*;
import org.junit.After;
import org.junit.AfterClass;
import org.junit.Before;
import org.junit.BeforeClass;
import org.junit.Ignore;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class TestWithoutScreenshots {

WebDriver driver;

@Before
public void setUp() {
driver = new FirefoxDriver();
driver.manage().window().maximize();
}

@After
public void tearDown() {
driver.quit();
}

@Test
public void testFirstResult() throws InterruptedException
{


//opens the home page of the site
driver.get("http://www.vpl.ca");

//executes a keyword search
WebElement searchField = driver.findElement(By.xpath("//input[@id='globalQuery']"));
searchField.click();
searchField.sendKeys("java");

WebElement searchButton = driver.findElement(By.xpath("//input[@class='search_button']"));
searchButton.click();

Thread.sleep(3000);

//clicks on the title of the first result on the results page
WebElement searchResultLink = driver.findElement(By.xpath("(//a[@testid='bib_link'])[2]"));
searchResultLink.click();

Thread.sleep(3000);

WebElement bookTitleElement = driver.findElement(By.xpath("//h1[@id='item_bib_title']"));
String bookTitleValue = bookTitleElement.getText();

//checks that the book title is displayed on the details page
assertEquals(bookTitleElement.isDisplayed(), true);
//checks that the book title's length is greater than 0 assertTrue(bookTitleValue.length() > 0);

}

}

The test script is part of a Maven Project.


Add The ashot Dependency To The POM.XML File

Add the following lines to the pom.xml file:

 <dependency>
<groupId>ru.yandex.qatools.ashot</groupId>
<artifactId>ashot</artifactId>
<version>1.4.12</version>
</dependency>  


Then, change the code so that entire page screenshots are taken for each page:


import static org.junit.Assert.*;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.screentaker.ViewportPastingStrategy;

public class TestWithScreenshots {

WebDriver driver;

@Before
public void setUp() {
driver = new FirefoxDriver();
driver.manage().window().maximize();
}

@After
public void tearDown() {
driver.quit();
}

@Test
public void testFirstResult() throws InterruptedException, IOException
{

driver.get("http://www.vpl.ca");

//take the screenshot of the entire home page and save it to a png file
Screenshot screenshot = new AShot().shootingStrategy(new ViewportPastingStrategy(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\home.png"));

WebElement searchField = driver.findElement(By.xpath("//input[@id='globalQuery']"));
searchField.click();
searchField.sendKeys("java");

WebElement searchButton = driver.findElement(By.xpath("//input[@class='search_button']"));
searchButton.click();

Thread.sleep(3000);

//take the screenshot of the entire results page and save it to a png file
screenshot = new AShot().shootingStrategy(new ViewportPastingStrategy(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\results.png"));

WebElement searchResultLink = driver.findElement(By.xpath("(//a[@testid='bib_link'])[2]"));
searchResultLink.click();

Thread.sleep(3000);

//take the screenshot of the entire details page and save it to a png file
screenshot = new AShot().shootingStrategy(new ViewportPastingStrategy(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\details.png"));

WebElement bookTitleElement = driver.findElement(By.xpath("//h1[@id='item_bib_title']"));
String bookTitleValue = bookTitleElement.getText();

assertEquals(bookTitleElement.isDisplayed(), true);
assertTrue(bookTitleValue.length() > 0);

}

}
Lets see how the screenshots look like.

The screenshot for the home page looks good:

The screenshot for the details page looks good as well:

The screenshot for the results page does not look too good:

How can we get a proper screenshot for the results page?

Take Web Element Screenshots 

The framework offers the option of getting screenshots of web elements.

See below the changed code:

import static org.junit.Assert.*;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.screentaker.ViewportPastingStrategy;

public class TestWithScreenshots {

WebDriver driver;

@Before
public void setUp() {
driver = new FirefoxDriver();
driver.manage().window().maximize();
}

@After
public void tearDown() {
driver.quit();
}

@Test
public void testFirstResult() throws InterruptedException, IOException
{

driver.get("http://www.vpl.ca");

//take the screenshot of the entire home page and save it to a png file
Screenshot screenshot = new AShot().shootingStrategy(new ViewportPastingStrategy(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\home.png"));

WebElement searchField = driver.findElement(By.xpath("//input[@id='globalQuery']"));
searchField.click();
searchField.sendKeys("java");

WebElement searchButton = driver.findElement(By.xpath("//input[@class='search_button']"));
searchButton.click();

Thread.sleep(3000);

//take the screenshot of the entire results page and save it to a png file
screenshot = new AShot().shootingStrategy(new ViewportPastingStrategy(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\results.png"));

//take the screenshot of a div element that includes all results page details>br/> screenshot = new AShot().takeScreenshot(driver, driver.findElement(By.xpath("(//div[@id='ct_search'])[1]")));
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\div_element.png"));

WebElement searchResultLink = driver.findElement(By.xpath("(//a[@testid='bib_link'])[2]"));
searchResultLink.click();

Thread.sleep(3000);

//take the screenshot of the entire details page and save it to a png file
screenshot = new AShot().shootingStrategy(new ViewportPastingStrategy(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\details.png"));

WebElement bookTitleElement = driver.findElement(By.xpath("//h1[@id='item_bib_title']"));
String bookTitleValue = bookTitleElement.getText();

assertEquals(bookTitleElement.isDisplayed(), true);
assertTrue(bookTitleValue.length() > 0);

}

}

The screenshot of the div element shows the full results page:

NEXT

Make Your Test Automation Script Fast Using HTML Parsing Libraries

How To Take Screenshots when Your Scripts Fails

Share this post