What is Screenshot Testing?
One picture is worth a thousand words
Screenshot Testing is a technique used by end-to-end testing which captures a screenshot from an URL and then compares the result with an expected image. It's a simple and easy way to verify that your application is working as you expect.
As you know the end-to-end tests are expensive to write and time-consuming to run, that is the reason the Martin Fowler’s Test Pyramid tells us to reduce the amount of UI testing for our applications. But reduce the amount of UI testing does not mean that we should not do that at all.
The Screenshot Testing can help us make those tests not as painful as they are. This technique of course will not resolve all problems we have, but it will simplify few testing scenarios.
The most common usage of Screenshot Testing is checking if the User Interface (UI) is not broken, or also check if the web page was rendered properly between different browsers. In this scenario for example, you can take a Screenshot from Chrome and compare the image with Safari, Firefox, Opera, Microsoft Edge, but not with Internet Explorer (we should forget that it has existed).
Another scenarios can be also considered for the Screenshot Testing, if you need check the expected results in a web page where there are not random data (for example current timestamp), you can use this technique, instead of comparing the data, field by field, you can just compare the screenshot with an expected image.
In case your page page has some random data or not relevant data, you can crop the screenshot before compare with the expected image, but you need to be sure that the expected image should be also cropped to the same size, otherwise it will be hard to compare.
The benefits
The main benefit of Screenshot Testing is the amount of code you should write. In just few lines of code you should be able for testing your scenario.
Screenshot Testing also allow you for validating if your web page is being rendered properly.
The problems
Comparing images is more complex then comparing text, there are few factors that can affect the Screenshot Testing, for example the resolution used by the computer which is running the tests.
The fonts can be a problem also, they can be render differently from a computer to another, or even they could be different from one browser to another.
Screenshot Testing in Practice
This article will demonstrate a simple implementation of Screenshot Test using flue2ent.
Conclusion
Screenshot Testing is a helpful technique which can save you some time for writing your end-to-end tests. In order to avoid problems comparing the images, you should take a screenshot as reference from the same computer you are running your automated tests, otherwise you can face some problems.
Have you already tried? Please share your experience in the comments section below.
You can follow the Definity Labs publication for getting more information about automation.
