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

UPDATE: For MAC OS users, they need to install ImageMagick by using brew command.

By installing ImageMagick, you will be able to run “compare” method of ImageMagick by terminal.

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: