October 22, 2018

How to Take WebElement Screenshot using Selenium ShutterBug

How to Take WebElement Screenshot using Selenium ShutterBug will discuss how we can take a screenshot of a particular WebElement while working with selenium.

In real time scenarios, Being automated tester you will definitely come across a scenario to validate LOGO for your application. Of Course it can be done using human eyes. In lead of automation industry why we strain our eyes all the time. Selenium give ability to capture entire screenshot but not for a particular element. However, It can be achieved using ShutterBug. Lets automate this now using ShutterBug. Let’s take a step forward and take screenshot of LOGO(Particular Element) instead of taking whole page.

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

Using ShutterBug, We can capture screenshot for particular element in a page. Lets learn in detail

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.shootElement(<driver>,<Element>).withName(<desired name>).save();

In above syntax, shoot element navigates driver focus to particular element. withName() method assigns desired name to screenshot take by shootElement() method.Save method creates a folder with folder name as “screenshots” and saves screenshot in that folder.

Sample Code:

public class ShutterbugElemntscreenshot {

@Test
public void elementScreenshotwithDesiredName()
{
      WebDriverManager.chromedriver().setup();
      WebDriver driver = new ChromeDriver();
      driver.get("http://automationtesting.in");
      WebElement logo = driver.findElement(By.id("logo"));
      Shutterbug.shootElement(driver,logo).withName("LogoElementScreenshot").save();
      driver.quit();
    }
}

“Shutterbug.shootElement(driver, logo).withName(“LogoElementScreenshot”).save()” will take screenshot of logo element and saves it with “LogoElementScreenshot” name under screenshots folder.

Mark identified logo with Your Message:

Once logo is idenfied you can mark your logo with desired text and save them for your reference. For Example: Once you identify the logo on your screen you can mark it as “logo identified and Validated” and you can save that screenshot for your reference.

Syntax:

Shutterbug.shootPage(<driver>).highlightWithText(<Webelement>,<Message>).save();

In above syntax, shoot page captures the screen. highlightWithText will highlight the element with message mentioned. Save method creates a folder with folder name as “screenshots” and saves screenshot in that folder.

Sample Code:

public class ShutterbugElemntcreenshot {

@Test
public void highlightelementScreenshot ()
{
       WebDriverManager.chromedriver().setup();
       WebDriver driver = new ChromeDriver();
       driver.get("http://automationtesting.in");
       WebElement logo = driver.findElement(By.id("logo"));
       Shutterbug.shootPage(driver).highlightWithText(logo, "Logo identified & Validated").save();
       driver.quit();
    }
}

Output Screenshot :

Reference Link: