October 22, 2018

How to Take Full Page Screenshot using Selenium ShutterBug

How to Take Full Page Screenshot using Selenium ShutterBug will discuss how we can take a screenshot of a particular web page from top to bottom by scrolling till the end of the page while working with selenium.

There are many pages in our WWW(World Wide Web) which are longer than our screen size . We have scroller to scroll down and see the content of web page. There will be few instances where you need to take screenshot of entire page during your automation tweaks. Using Selenium you can take screenshots for only visible content of page. There are different routes to capture full page screenshot using different jar files like Ashot(discussed in previous blog). Here is one more awesome and simple way to capture full page screenshot using Shutterbug. Let’s start looking into it.

We recommend you to refer our previous blog for better understanding.

To start with it , Add below dependency to maven project or Download jar files here.

<!-- https://mvnrepository.com/artifact/com.assertthat/selenium-shutterbug -->
<dependency>
    <groupId>com.assertthat</groupId>
    <artifactId>selenium-shutterbug</artifactId>
    <version>${version}</version>
</dependency>

Syntax:

Shutterbug.shootPage(<driver>,<scrollingstategy>,<time>,true).withName(<desiredName>).save();

In above syntax, shoot page is a method which captures screenshot by scrolling page for specific time. withName method assigns desired name to screenshot take by shootpage method.Save method creates a folder with folder name as “screenshots” and saves screenshot in that folder.

Sample Code:

public class ShutterbugFullPageScreenshot{

@Test
public void capturefullPageScreenshotwithDesiredName()
{
       WebDriverManager.chromedriver().setup();
       WebDriver driver = new ChromeDriver();
       driver.get("http://automationtesting.in");
       Shutterbug.shootPage(driver,ScrollStrategy.BOTH_DIRECTIONS,500,true).withName("FullPageScreenshot").save();
       driver.quit();
  }
}

“Shutterbug.shootPage(driver).withName(“automationtestingscreenshot”).save()” will take full page screenshot and saves it with “FullPageScreenshot” name under screenshots folder.

MonoChrome your Logo in your full page screenshot:

With Shutterbug you can monochrome desired elements in screenshot. Which makes verification easy when you review your screenshots. Let’s go with it

Syntax:

Shutterbug.shootPage(driver,ScrollStrategy.BOTH_DIRECTIONS,500,true).monochrome(<element>).withName("<desiredName>").save();

In above syntax, shoot page is a method which captures screenshot by scrolling page for specific time. withName method assigns desired name to screenshot take by shootpage method. Monochrome method will turn your webelement in Black & White. Save method creates a folder with folder name as “screenshots” and saves screenshot in that folder.

Sample Code:

public class ShutterbugFullPageScreenshotwithMonoChrome {

@Test
public void capturefullPageScreenshotwithDesiredName()
{
     WebDriverManager.chromedriver().setup();
     WebDriver driver = new ChromeDriver();
     driver.get("http://automationtesting.in");
     WebElement QuestionsLogo = driver.findElement(By.xpath("//img[@alt='Interview Questions']"));
     Shutterbug.shootPage(driver,ScrollStrategy.BOTH_DIRECTIONS,500,true).monochrome(QuestionsLogo).withName("FullPageScreenshotMonogram").save();
     driver.quit();
  }
}

Output Screenshot :