In this article, I will present you how to do visual test automation with ImageMagick, Selenium Webdriver, and AShot. This tool and framework combination is fully open-source and when you successfully complete the settings, you can start to do visual testing with them without any cost. 🙂

First, I want to describe the tools:

Selenium Webdriver: We will use webdriver to navigate, interrogate and manipulate the websites.

ImageMagick: ImageMagick is our image processing and comparison tool.

Link: http://www.imagemagick.org/script/index.php

Pure JAVA Interface (im4java): http://im4java.sourceforge.net/

AShot: AShot is our Webdriver Screenshot utility tool. We will capture the screenshots with AShot. It is developed by Yandex and its open source.

Link: https://github.com/yandex-qatools/ashot

Step by Step Installations

 Step-1: Selenium Webdriver

 If you do not know how to start using Selenium Webdriver, please first read this article.

 Step-2: Visual C++ Redistributable Packages for Visual Studio 2013

 Go to this link: https://www.microsoft.com/en-us/download/details.aspx?id=40784 and install it.

c++_redistributable_packages-1

c++_redistributable_packages-2

c++_redistributable_packages-3

c++_redistributable_packages-4

Step-3: ImageMagick

 Go to http://www.imagemagick.org/script/binary-releases.php and install Windows Binary Release, during installation select all options and set its installation directory location to the system path.

It is important to select all options.

image_magick-1

imagemagick

imagemagick

image_magick

imagemagick

How to Setup Project for ImageMagick and Selenium

Test Scenario:

– Open www.kariyer.net

– Add top banner cookie not to see top banner.

– Close Popup if exists

– Close Banner

– Unhide text area (“21.923 İŞ İLANI” part) of Uzman Photo

– Hover on the “UZMAN” section on main page.

uzman-1

– Wait for 2 seconds for completion of image (CSS) animation.

uzman-2

– Take a screenshot of the animated photo of this element.

– At first run, save it to the ScreenShots>$Test_Name folder as uzmanBaseline.png and uzmanActual.png.

– At second run, update uzmanActual.png, compare it with uzmanBaseline.png, and put the difference as uzmanDiff.png

– Put all differences on “Differences” folder.

– Verify that if they are similar test passed. If not test failed.

Project Setup:

Open IntelliJ and click File -> New -> Project -> Maven

Then, fill GroupId and ArtifactId as KariyerVisualTest

visual_testing-project-1

Click Next and then give a name to the project as KariyerVisualTest and click Next.

visual_testing-project-2

After that we should modify our pom.xml

Always check libraries latest versions from https://mvnrepository.com

For Selenium:

For AShot:

For IM4Java:

For TestNG:

Test Code

In below code I tried to write detailed comments. If you have trouble something please feel free to add comment. I will try to reply your questions as soon as possible.

BaseTest Class

JSWaiter (For JS and JQuery Synchronization)

KariyerVisualTest (Test Class)

POM.xml:

TestNG.xml

GitHub Link
https://github.com/swtestacademy/VisualAutomationImageMagickSelenium

Test Results:

 First Run:

Second Run (Positive Case):

Third Run (Negative Case):

 I also want to show you fail case. I open uzmanBaseline with photo editor and add some shapes and save it. After that, I rerun the test and I got below results. Test failed and also it highlighted the unmatched parts.

Before starting test I did below modifications on “uzmanBasline.png”

Then, I run the test and got below results:

For masking images with ImageMagick, I suggest you to check below article.
http://techblog.hotwire.com/2016/05/19/image-comparison-in-automated-testing/