Image Comparison Using Selenium Shutterbug will discuss how we can compare 2 screenshots of a particular WebElement or particular web pages while working with selenium.

Major Validations that we generally do in our day to day life is Text comparison in selenium. We always verify expected output value and mark our test cases pass or fail. Let’s take a step forward and compare screens using selenium to make our automation scripts more robust. With ShutterBug we can compare screenshots in our runtime execution

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>

Lets Capture expected image first:

Sample Code:

public class ShutterbugExpectedScreenshot {

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

Above code will take full page screenshot and saves with name as “Expected”

Screenshot Comparison:

Syntax:

Shutterbug.shootPage(driver,ScrollStrategy.BOTH_DIRECTIONS,500,true). withName("<desiredName>").equals(<ExpectedImage>,<Deviation Ratio>);

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. Equals method compares screenshots with deviation ratio.

Sample Code:

public class ShutterbugCompareScreenshot {

@Test
public void capturefullPageScreenshotwithDesiredName()
{
     WebDriverManager.chromedriver().setup();
     WebDriver driver = new ChromeDriver();
     driver.get("https://automationtesting.in");
     File image = new File(".\\screenshots\\Expected.png");
     BufferedImage expectedImage = ImageIO.read(image);
     boolean status = Shutterbug.shootPage(driver,ScrollStrategy.BOTH_DIRECTIONS,500,true).withName("Actual").equals(expectedImage,0.1);            	
     Assert.assertTrue(status);        	
     driver.quit();
  }
}

In above code we are buffering expected image using BufferedImage class and Then we are comparing with Actual screenshot taken using equals method in shutterbug. After that we are verifying test case with assert statement

Reference Link:

https://github.com/assertthat/selenium-shutterbug.

The post Image Comparison Using Selenium Shutterbug appeared first on Selenium Webdriver Appium Complete Tutorial.

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("https://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("https://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 :

Reference Link:

https://github.com/assertthat/selenium-shutterbug

The post How to Take Full Page Screenshot using Selenium ShutterBug appeared first on Selenium Webdriver Appium Complete Tutorial.

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("https://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("https://automationtesting.in");
       WebElement logo = driver.findElement(By.id("logo"));
       Shutterbug.shootPage(driver).highlightWithText(logo, "Logo identified & Validated").save();
       driver.quit();
    }
}

Output Screenshot :

Reference Link:

https://github.com/assertthat/selenium-shutterbug

The post How to Take WebElement Screenshot using Selenium ShutterBug appeared first on Selenium Webdriver Appium Complete Tutorial.

Need of Screenshot for Automated Testing:

From my own experience, getting screenshots from an automation framework whenever an automated test has problems or points of failure is a very helpful feature. This ability can visually indicate a bug or malfunction in the application’s code, a problem in the design of the test, or other types of irregularities. Selenium’s API provides the necessary code for adding this capability. Along with that we have different third part API’s which supports screenshot feature in selenium. Out of those Ashot is one of the familiar way which we discussed earlier.

Why ShutterBug?

Here is one more pretty easy way to take screenshot using ShutterBug. Beauty for shutterbug is Ultimate. It can do many cool features like Taking screenshot for particular element, Comparing different screens in run time, Marking particular element during screenshot , Blurring the image.. etc . Let’s go in detail of each about shutterbug.

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>0.9</version>
</dependency>

Syntax:

Shutterbug.shootPage(<driver>).save();

In above syntax, shoot page is a method which captures the visible area on browser . Save method creates a folder with folder name as  “screenshots” in run time and saves screenshot with name as “date and timestamp” in png format.

Sample Code:

public class ShutterbugScreenshot {

@Test
public void takeScreenshot()
{
    WebDriverManager.chromedriver().setup();
    WebDriver driver = new ChromeDriver();
    driver.get("https://automationtesting.in");
    Shutterbug.shootPage(driver).save();
    driver.quit();
  }
}

However, We can get screenshot with our desired name in shutterbug.

Syntax:

Shutterbug.shootPage(<driverobject>). withName(<desiredname>).save();

In above syntax, shoot page is a method which captures the visible area on browser . 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 ShutterbugScreenshotwithName {

@Test
public void takeScreenshotwithDesiredName()
{
      WebDriverManager.chromedriver().setup();
      WebDriver driver = new ChromeDriver();
            	
      driver.get("https://automationtesting.in");
      Shutterbug.shootPage(driver).withName("automationtestingscreenshot").save();
      driver.quit();
  }
}

“Shutterbug.shootPage(driver).withName(“automationtestingscreenshot”).save()” — will take screenshot and saves it with “automationtestingscreenshot” name.

We can do many more with shutterbug. Please go through our next blogs to learn more on Shutterbug.

Reference Link:

https://github.com/assertthat/selenium-shutterbug

The post How to Take Screenshot using Selenium ShutterBug appeared first on Selenium Webdriver Appium Complete Tutorial.