How to compare images using SeleniumWebDriver

If you ask  if you can “Compare images” using Selenium WebDriver then your answer is “No” but there are workarounds to inject this possibility in your selenium project.

First of all I want to make it clear , Selenium WebDriver manipulates the browser and that’s it , and from here how you want to extend the API is completely up to your imagination.

I will try to cover in this article what are the right way to start “Regression screen testing“. Working on a responsive website with lots if landings pages can be quite tricky to write automation tests taking in consideration Selenium WebDriver does only functional testing.

Prepare environment template

If you think about doing Screen testing you should consider creating a template environment where your test data for the UI screens that you want to test doesn’t change, because if it does when you’ll start to compare the screens your tests will fail.

How to take the screenshots

I worked on a project where we had to test more than 1000 responsive screens , so that can be quite a lot of work to take Screenshots and compare then. Best solution for us was to create navigation tests that takes screenshots of all the pages. Here you can setup a naming conversion for the screenshots names eg “page_name.jpg”.

Check and tune your screenshots

Once you have all screenshots thrown in a folder you still can’t count 100% on the script so I will suggest you check and tune your screenshots manually if necessary, you might have to change descriptions.

Create comparison logic for screenshots

When you compare screenshots you have 2 options : full page comparison and panel comparison.

For .Net there is a very nice library to compare images Simple image comparison in .NET.

• Find out how different two images are as a percentage value based on a threshold of your choosing
• Get a difference-image which shows where the two are different
• Get the difference as raw data to use for your own purposes

It’s a very powerful image and the integration in any Selenium WebDriver project can be don quite easy.

C# sample full page screenshot

Rectangle bounds = Screen.GetBounds(Point.Empty);
using (Bitmap bitmap = new Bitmap(bounds.Width, bounds.Height))
{
    using (Graphics g = Graphics.FromImage(bitmap))
    {
        g.CopyFromScreen(Point.Empty, Point.Empty, bounds.Size);
    }
    bitmap.Save(saveLocation, System.Drawing.Imaging.ImageFormat.Png);
}

Java sample full page screenshot

final Screenshot screenshot = new AShot().shootingStrategy(
    new ViewportPastingStrategy(500)).takeScreenshot(driver);
  final BufferedImage image = screenshot.getImage();
  ImageIO.write(image, "PNG", new File("path/to/save/"
    + "AShot_BBC_Entire.png"));

C# element screenshot sample

public static Bitmap GetElementScreenShort(IWebDriver driver, IWebElement element)
{
    Screenshot sc = ((ITakesScreenshot)driver).GetScreenshot();
    var img = Image.FromStream(new MemoryStream(sc.AsByteArray)) as Bitmap;
    return img.Clone(new Rectangle(element.Location, element.Size), img.PixelFormat);
}

//method usage 
var img = GetElementScreenShort(driver, element);
                    img.Save("test.png", System.Drawing.Imaging.ImageFormat.Png);

Use this approach to run regression testing for style changes on your pages and make sure if a new page is added you create new screenshots and new tests.

Hope this will help you to cover your UI testing without being necessary to invest money in tools applitools .

If you ask me why I prefer this solution and not tools of visual testing is because I prefer one solution in one repository and one CI integration rather than spending time and money in new tools. But my aproach my not be a good one for you so you might want to consider tools like applitools.

Happy testing!

The post Selenium Webdriver, Regression screen testing,Compare images appeared first on TestingRepository.