Selenium Webdriver, Regression screen testing,Compare images

2 min


661
2 comments, 661 points
Compare images
Compare images

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);
}
C# full page screenshot
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"));
Full page screenshot In java
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);
element screenshot

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!


Like it? Share with your friends!

661
2 comments, 661 points

What's Your Reaction?

cute cute
0
cute
scary scary
1
scary
wtf wtf
2
wtf
geek geek
0
geek
WIN WIN
0
WIN
Love Love
2
Love
OMG OMG
3
OMG
Angry Angry
1
Angry
Lol Lol
7
Lol
Test engineer

2 Comments

Your email address will not be published. Required fields are marked *

  1. Is there any way to get what is the difference in the image. example, When comparing two screenshots if there is color difference in the text , Is there any way to get the difference???

    1. well exactly where the difference is you can’t really tell unless you take a screenshot and you cut it to the points that you want to compare and then you know that area is affected by changes.

      you can get the differences by any means any differences like this :

      def image_diff
      image_1 = 'path/to/image/1.png'
      image_2 = 'path/to/image/2.png'
      images = [
      ChunkyPNG::Image.from_file(image_1),
      ChunkyPNG::Image.from_file(image_2)
      ]

      diff = []

      images.first.height.times do |y|
      images.first.row(y).each_with_index do |pixel, x|
      diff << [x, y] unless pixel == images.last[x, y]
      end
      end
      puts "pixels (total): #{images.first.pixels.length}"
      puts "pixels changed: #{diff.length}"
      puts "pixels changed (%): #{(diff.length.to_f / images.first.pixels.length) * 100}%"

      # init empty hash
      diff_hash = {}
      # return pixels changed number
      diff_hash[:pixels_changed] = diff.length
      # return pixels changed percentage
      diff_hash[:pixels_changed_percentage] = (diff.length.to_f / images.first.pixels.length) * 100
      # return diff hash
      diff_hash
      end

      this will give you number of pixels changed and also the percentage .
      Having this information you can build your own threshold in pixels or percentage of changes that you are prepared to be resilient in your tests.

Choose A Format
Trivia quiz
Story