To compare two images, we need to capture the screenshot of the particular element and we can store it somewhere in the project folder structure and we can capture same image dynamically while automating the application and we can compare this image/screenshot with the image/screenshot which we captured and placed in the folder structure for the reference(i.e. expected).

As we already saw how to capture the screenshot of a particular web element using AShot in one of our previous blogs. Will use the same approach to capture the screenshot and will use the same to compare the images/screenshots.  

Here will take two examples; one is positive scenario (will take the screenshot and will compare the same thing dynamically captured screenshot); in this case test script should PASS. And another one is negative scenario ( will add small pixel to the captured(i.e.expected) screenshot and compare the same thing dynamically captured screenshot); in this case test script should FAIL.




Below is the sample program to capture the web element screenshot (i.e. expected image/reference image):

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 javax.imageio.ImageIO;
import java.io.File;
 
public class TakeWebElementScreenshot
{
   public static void main(String args[]) throws Exception
   {
       System.setProperty("webdriver.gecko.driver", "D:\\Selenium\\geckodriver.exe");
       WebDriver driver = new FirefoxDriver();
 
       driver.get("http://demo.automationtesting.in/Register.html");
       Thread.sleep(2000);
 
       WebElement webElement = driver.findElement(By.cssSelector("#imagetrgt"));
 
       Screenshot screenshot = new AShot().takeScreenshot(driver,webElement);
       ImageIO.write(screenshot.getImage(),"PNG",new File(System.getProperty("user.dir") +"\\Images\\ElementScreenshot.png"));
 
       Thread.sleep(2000);
       driver.quit();
   }
}

Below is the sample code for Positive scenario. Here we will compare two images which are same:

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.Assert;
import org.testng.annotations.Test;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.comparison.ImageDiff;
import ru.yandex.qatools.ashot.comparison.ImageDiffer;

public class ImageComparisonPositive 
{
    WebDriver driver;
    
    @Test
    public void imageComaparision() throws IOException
    {
        System.setProperty("webdriver.gecko.driver", "D:\\Selenium\\geckodriver.exe");
        driver = new FirefoxDriver();
        driver.get("http://demo.automationtesting.in/Register.html");
        
        WebElement logoImage = driver.findElement(By.cssSelector("#imagetrgt"));
        
        BufferedImage expectedImage = ImageIO.read(new File(System.getProperty("user.dir") +"\\Images\\ElementScreenshot.png"));
        Screenshot logoImageScreenshot = new AShot().takeScreenshot(driver, logoImage);
        BufferedImage actualImage = logoImageScreenshot.getImage();
                
        ImageDiffer imgDiff = new ImageDiffer();
        ImageDiff diff = imgDiff.makeDiff(actualImage, expectedImage);
        Assert.assertFalse(diff.hasDiff(),"Images are Same");
                
        driver.quit();
    }
}

Below is the sample code for Negative scenario. Here we will compare two images which are NOT same:

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.Assert;
import org.testng.annotations.Test;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.comparison.ImageDiff;
import ru.yandex.qatools.ashot.comparison.ImageDiffer;

public class ImageComparisonNegative {
    
    WebDriver driver;
    
    @Test
    public void imageComaparision() throws IOException
    {
        System.setProperty("webdriver.gecko.driver", "D:\\Selenium\\geckodriver.exe");
        driver = new FirefoxDriver();
        driver.get("http://demo.automationtesting.in/Register.html");
        
        WebElement logoImage = driver.findElement(By.cssSelector("#imagetrgt"));
        
        BufferedImage expectedImage = ImageIO.read(new File(System.getProperty("user.dir") +"\\Images\\ElementScreenshotWithPixle.png"));
        Screenshot logoImageScreenshot = new AShot().takeScreenshot(driver, logoImage);
        BufferedImage actualImage = logoImageScreenshot.getImage();
                
        ImageDiffer imgDiff = new ImageDiffer();
        ImageDiff diff = imgDiff.makeDiff(actualImage, expectedImage);
        Assert.assertFalse(diff.hasDiff(),"Images are Same");
                
        driver.quit();
    }
}

This way we can compare two images which are same or not using Ashot. Here the concept of showing negative scenario is to make sure that the scenarios working fine even there is a small change in the expected image.

By using this we can compare company logos and some important images which should not change.

Please watch the youtube video for better understanding.

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

Taking web element screenshot in selenium will discuss about how to take particular web element screenshot image in selenium webdriver while automating any application. As already we know how to take a screenshot in selenium webdriver. But we do not have provision to take a particular web element screenshot in selenium.

To achieve this, we have to write our own logic to capture the entire screenshot and crop the particular web element on it and save into the particular location. But instead of writing own logic and using the same we can use some third party utility called AShot. It is a WebDriver screenshot utility and by using this we can capture the entire page screenshot and can capture the individual webelement screenshot also.

For this, we need to download the ashot.jar file and add to the project along with the selenium jar files. We can download the ashot.jar file from here.

Below is the sample code to capture the entire page screenshot for any browser:

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 javax.imageio.ImageIO;
import java.io.File;

public class TakeWebElementScreenshot
{
   public static void main(String args[]) throws Exception
   {
       System.setProperty("webdriver.gecko.driver", "D:\\Selenium\\geckodriver.exe");
       WebDriver driver = new FirefoxDriver();

       driver.get("http://demo.automationtesting.in/Register.html");
       Thread.sleep(2000);

       WebElement webElement = driver.findElement(By.cssSelector("#imagetrgt"));

       Screenshot screenshot = new AShot().takeScreenshot(driver,webElement);
       ImageIO.write(screenshot.getImage(),"PNG",new File(System.getProperty("user.dir") +"\\ErrorScreenshots\\ElementScreenshot.png"));

       Thread.sleep(2000);
       driver.quit();
   }
}

In the above program 23,24 lines will do the magic. It will capture the entire screen and crop the particular web element as screenshot. For this we need to capture the web element and pass as an argument to the takeScreenshot method. Then this method take care of capturing the entire screenshot and crop the particular web element only from that entire screenshot.

This way we can capture the entire page screenshot using ashot.jar file.

Please watch the youtube video for better understanding.

The post Taking Web Element Screenshot in Selenium appeared first on Selenium Webdriver Appium Complete Tutorial.

Taking full page screenshot in selenium will discuss about how to take full page screenshot image in selenium webdriver while automating any application. As already we know how to take screenshot in selenium webdriver. But the actual issue is, when we take screenshot how much area will it capture. Here we need to discuss 2 things that how the methods which are available with Selenium webdriver will behave in Selenium 2 and Selenium 3 as recently selenium 3 is launched.

As already we know that in selenium 2; no extra drivers needed to launch the FirefoxDriver but for other browsers we need to use driver exe files to launch and work with. While working with the FirefoxDriver and try to take the screenshot then it will capture the entire page including the invisible area of the web page. But if you use other browsers then it will capture only the visible area of the webpage.

But coming to the Selenium 3, to launch any browser we need to use the driver exe files. So, while capturing the screenshot in selenium 3 it will capture only the visible area of the web page in all the browsers including firefox. To overcome this we can use third party utility called AShot. It is a WebDriver screenshot utility and by using this we can capture the entire page screenshot and can capture the individual webelement screenshot also.

For this, we need to download the ashot.jar file and add to the project along with the selenium jar files. We can download the ashot.jar file from here.

Below is the sample code to capture the entire page screenshot for any browser:

import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;

import javax.imageio.ImageIO;
import java.io.File;

public class TakeFullPageScreenShot
{
   public static void main(String args[]) throws Exception
   {
       System.setProperty("webdriver.gecko.driver", "D:\\Selenium\\geckodriver.exe");
       WebDriver driver = new FirefoxDriver();

       driver.get("https://automationtesting.in/");
       Thread.sleep(2000);

       Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
       ImageIO.write(screenshot.getImage(),"PNG",new File(System.getProperty("user.dir") +"/ErrorScreenshots/FullPageScreenshot.png"));
   }
}

In the above program 20,21 lines will do the magic. It will scroll the page till the end and captures the screenshot. And we can control the scroll speed using viewportPasting method.

This way we can capture the entire page screenshot using ashot.jar file.

Please watch the youtube video for better understanding.

The post Taking Full Page Screenshot in Selenium appeared first on Selenium Webdriver Appium Complete Tutorial.