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



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



Share this

6 Responses to "How To Take Entire Page Screenshots In Selenium WebDriver Scripts"

  1. This is not working for MobileWeb applications

    ReplyDelete
  2. Try this one:

    https://www.assertthat.com/posts/selenium_shutterbug_make_custom_screenshots_with_selenium_webdriver

    Works on mobile web, desktop tested on Windows and OS X

    ReplyDelete
  3. Hi,

    How can a screen with alert pop up be captured. My code throws an exception as it there is an un handled alert. But i need a screenshot along with the pop up.

    ReplyDelete
  4. Is it possible to do work with any other languages other than java, so please give some tips to get a good knowledge in this selenium screenshot work.

    Selenium Training in Chennai

    ReplyDelete
  5. Hi,

    I tried the below code to take fullpage screenshot in chrome browser.But I get exception:
    Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver)

    Cany anybody what could be the rootcause?

    ReplyDelete
  6. Hi,

    I tried the above code to get full page screenshot in chrome browser in windows. But Selenium throws exception at the below code:
    Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver)

    Can anyone help me on this?

    ReplyDelete