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

full web pages
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

opens the home page of the site
executes a keyword search
clicks on the title of the first result on the results page
checks that the book title is displayed on the details page
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

Alex Siminiuc

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

Anonymous24 May 2016 at 00:13
This is not working for MobileWeb applications
Unknown11 August 2016 at 06:56
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
Unknown21 September 2016 at 23:22
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.
deeksha7 November 2016 at 22:17
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
Unknown24 October 2017 at 07:36
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?
Unknown24 October 2017 at 07:38
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?

Test Automation For Manual Testers

Categories

How To Take Entire Page Screenshots In Selenium WebDriver Scripts

Share this

Alex Siminiuc

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