Automated Visual regression of mobile apps using nakal

Written by Rajdeep Varma.

The Problem:

While automated functional tests using appium or calabash acts as safety net, there is something missing. Often, we find issues like:

For mobile apps, look and feel of an application is extremely important. With long running projects, any minor refactoring can change your app’s looks. functional testing tools like calabash Or Appium can not help us in this case.

Nakal gem fills above gap. With this, we can extend any existing mobile automation framework to support automated visual regression testing.

Here is an sample output with expected_screen, actual_screen, and difference_screen :


Automated visual testing of Android/iOS applications.

Nakal is used to add visual validations in your existing test framework (using appium or calabash etc).


You need to install imagemagick on your machine

Add this line to your application’s Gemfile:

gem 'nakal'

And then execute:

$ bundle

Or install it yourself as:

$ gem install nakal


If you are using cucumber, include following Lines in your env.rb

require "nakal/cucumber"
Nakal.platform = :android

for ios, set:

Nakal.platform = :ios

and then put this line in your automation code, at all places where a new screen loads:

diff_metric = nakal_execute("current_screen_name")

Now, execute your test by passing env variable NAKAL_MODE=build to build the baseline images. All baseline images will be stored in baseline_images folder in current directory

once baseline is built, next execution onwards, start using environment variable NAKAL_MODE=compare to compare against baseline. any difference will be put in the same directory with image file named “current_screen_name_diff.png”

If You want to organize baseline nicely, you can even specify sub-paths in #nakal_execute like this:

diff_metric = nakal_execute("feature/sub_feature/current_screen_name")

For setting custom directory, use: "<desired_directory>"
Nakal.device_name = "nexus7"

For cropping the notification bar OR scroll bar, create a config/nakal.yml file in execution directory.


put these contents in your nakal.yml file inside config/nakal.yml

 top: 50
 right: 18
 left: 0
 bottom: 0
 screen_name_to_be_masked: {mask_region: [66,424,340,478]}
 feature/sub_feature/current_screen_name: {mask_region_1: [66,424,340,478],mask_region_2: [76,524,440,578]}

 top: 74
 right: 20
 left: 0
 bottom: 0

 top: 30
 right: 6
 left: 0
 bottom: 0
 screen_name_to_be_masked: {mask_region: [66,424,340,478]}
 feature/sub_feature/current_screen_name: {mask_region_1: [66,424,340,478],mask_region_2: [76,524,440,578]}


You can see source here Nakal

Done At: Jul 5,2015