Skip to main content

Tools for Screenshot Comparison Testing: Huxley, Wraith, Selenium-Wraith

Image
By
Testing the user interface (UI) testing may be the most difficult part of test automation. When we think from the perspective of users there are not hundreds but there may be thousands of different users' environment but it is clear that simulating and testing UI related cases for all possible users' environment is impossible! However we can cover easily the %80 of them by using statistical data taken from analytics tools as Pareto Analysis says 20% of reasons cause the %80 of all problem. If you are doing some kind of internet business, there are two important factors for user environments which are operating system and browsers for normal internet users.  Therefore analytic tools should give us feedback about operating system and versions of operating system; browsers and versions of browsers. To get a general trend we can look at the w3shcool.com statistic but sure it is more convenient to take your own statistic depends on your user profile.


In general approach  testing Chrome, Internet Explorer and Firefox covers more than %83 but don't forget may be Safari users may have more loyalty for you.

As said, testing UI related tests are not easy even you write perfect unit testing for front-end you can not assure that if the UI not are corrupted unless you check them on the real browsers by eyes. Therefore for this kind of problem, you should use screenshot comparison tools that can automatically check two images taken from related pages with desired browsers and screen size after specific scenarios are executed. This check should be performed pixel by pixel comparison. For this purposes, I have two open source tools to explain how we can cover majority of the UI issues with screenshots comparison tools in this post. 

Wraith

Wraith is initiated by BBC and open source screenshots comparison tool. Basic idea behind the Wraith is to take screenshot with desired screen widths from two different url and compare them. Comparison is performed pixel-by-pixel so at the end it gives a result with percentage of differences. For this kind of purposes it works very fine. 

Wraith can be run under PhantomJS, SlimmerJS or CasperJS but it is not possible to run it without headless mode. If your application has not problem with this web browser engine, as I have some problem with AngularJS with PhamtomJS, you can use Wraith. You can read this post from Thoughtworkers for more information. For comparing images, Wraith uses Image Magic so you need to install it too.

Installation:
gem install wraith

Setup for Wraith project: 
wraith setup 
wraith setup casper

config.yaml

Running Wraith: 
wraith capture configs/config.yaml


Summary of Wraith Experience:

  • it is very easy to setup and use
  • very successful if you compare two different urls but cannot compare ready images to screenshot
  • You don't need to write scripts
  • Taking full screenshot so that you can compare whole page
  • Has some problem for flash objects
  • It only works under headless mode (PhantomJS or eq.)
  • PhantomJS has an option for adding cookies so that you can test login required page
  • You can not write test cases, it just compare two different screenshots
  • You can not compare same url over different browsers

    • Selenium-Wraith

    Selenium-Wraith is written to add Selenium feature to Wraith. It can also used with Cucumber to BBD style test cases. It seems to me not mature as much as Wraith itself but good idea and it covers the some missing parts of Wraith.


    Huxley  

    Huxley is another screenshots comparison tool developed by Facebook development teams. It is a open source  tool and written in Python. It uses Selenium standalone server so you must download and run it before recording and executing your cases. Good thing for the Huxley is that you can record a case with the parameter --record so you can execute some steps and then take screenshots for comparing. It also let you take screenshots where you need so you are free to compare not only two urls but also with many different cases.

    installation: 
    pip install huxley
    run Selenium Server: 
    java -jar selenium-server-standalone-2.44.0.jar
    record: 
    huxley --record

    First you need to create a Huxleyfile and add your testing urls like following format: 
    [home]
url=http://www.maidan.dev

[about]
url=http://www.maidan.dev/#/about
    After you run huxley by --record parameter, it lets you to create your case and by pressing enter key it takes a screenshot. Cases is recorded inside of the home.huxley and about.huxley file as record.json as json format like the following: 


     Summary for Huxley Experience:

  • Easy to use
  • You can record case and run it
  • You can use Chrome, Firefox, Internet Explorer and Safari  by modifying the browser in main function in main.py module.
  • You can set the browser size if you want to test responsive layout by modifying the screensize in main function in main.py module:
  • Supporting Continuous Integration


    • Labels:Software testing

    Popular posts for software testing and automation

    Selenium Error "Element is not currently interactable and may not be manipulated"

    By
    Selenium webdriver can drive different browsers like as Firefox, Chrome or Internet Explorer. These browsers actually cover the majority of internet users, so testing these browsers possibly covers the 90% of the internet users. However, there is no guaranty that the same automation scripts can work without a failure on these three browsers. For this reason, automation code should be error-prone for the browsers you want to cover. The following error is caught when the test script run for Chrome and Internet Explorer, but surprisingly there is no error for the Firefox. Selenium gives an error like below: Traceback (most recent call last):   File "D:\workspace\sample_project\sample_run.py", line 10, in <module>     m.login()   File "D:\workspace\ sample_project \test_case_imps.py", line 335, in login     driver.find_element_by_id("id_username").clear()   File "C:\Python27\lib\site-packages\selenium-2.35.0-py2.7.egg\seleni...
    Read more

    Change Default Timeout and Wait Time of Capybara

    By
    One of the biggest challenge for automation is handling timeout problem. Most of the time, timeout is 60 seconds but it may sometimes not enough if you have badly designed asynchronous calls or the third party ajax calls. This makes handling timeout more complex. set large enough to tolerate network related problems. For Selenium based automation frameworks, like Capybara, default Webdriver timeout is set to Net::ReadTimeout (Net::ReadTimeout) Changing ReadTimeout If you have timeout problem for Capybara, it gives an error like above. This means that the page is not fully loaded in given timeout period. Even you can see that page is loaded correctly but webdriver wait until the Ajax calls finish. class BufferedIO #:nodoc: internal use only def initialize (io) @io = io @read_timeout = 60 @continue_timeout = nil @debug_output = nil @rbuf = '' end . . . . . def rbuf_fill beg...
    Read more

    Create an Alias for Interactive Console Work: Selenium and Capybara

    By
    If you are working on shell most of the time Aliases are very helpfull and time saving. For testing purposes you can use Alias for getting ready your test suites. In this post, I want to explain both running Selenium and Capybara on console and creating aliases for each.  This post is for Windows machines, if you are using Unix-like see   this post . Creating Scripts for Selenium and Capybara First of all, it is assumed that you have installed Selenium and Capybara correctly and they work on your machines. If you haven't installed, you can see my previous posts. I am using the Selenium with Python and the Capybara with Ruby. You can use several different language for Selenium but Capybara works only with Ruby.  Create scripts in a directory called scripts (in your home folder, like as  ~/scripts ) for your automation tool as following, save them as capybara.rb, sel.py :  Creating Aliases Depends on your favourite shell, you need to add the al...
    Read more

    Page-Object Pattern for Selenium Test Automation with Python

    By
    Page-object model is a pattern that you can apply it to develop efficient automation framework. With the page-model, it is possible to minimize maintenance cost. Basically page-object means that your every page is inherited from a base class which includes basic functionalities for every page. If you have some new functionalities that every page should have, you can simple add it to the base class. Base class is like the following: In this part we are creating pages which are inherited from base page. Every page has its own functionalities written as python functions. Some functions return to a new page, it means that these functions leave the current page and produce a new page. You should write as much as functions you need in the assertion part because this is the only part you can use the webdriver functions to interact with web pages . This part can be evaluate as providing data to assertion part.   The last part is related to...
    Read more

    Performance Testing on CI: Locust is running on Jenkins

    By
    For a successful Continuous Integration pipeline, there should be jobs for testing the performance of the application. It is necessary if the application is still performing well. Generally performance testing is thought as kinds of activities performed one step before going to live. In general approach it is true but don't forget to test your application's performance as soon as there is an testable software, such as an api end point, functions, and etc. For CI it is a good approach to testing performance after functional testing and just before the deployment of next stage. In this post, I want to share some info about Jenkins and Locust. In my previous post you can find some information about Locust and Jenkins. Jenkins operates the CI environment and Locust is a tool for performance testing. To run the Locust on Jenkins you need command line arguments which control the number of clients ,   hatch rate,  running locust without web interface and there s...
    Read more