Postpone Image Processing to All Test Cases Finished in Rails Selenium Visual Testing

Introduction

As we already known we cah do Visual Testing with Selenium by using Chunky PNG, but Chunky PNG may spend much time to decode a large PNG image and make selenium timeout. This article describe how to postpone the image processing after all test cases done.

NOTE: The content is more complex and contains something with respect to my real work, so I put it at a different branch that will not be merged back to master.

NOTE 2: This article is exactly just a simple note, please refer to the code and git commit diff if needed.

Pre-Request

Visual Testing with Selenium in Rails

How To Do

There are two major issues need to be solved.

1. How to do something after all test cases are finished?

2. How to pass date from test cases to task?

The first one can be done by overriding invoke method of Rake::Task, please refer to the updated test.rake file.


The second one can be done via read/write a file or standalone caching server since the task and test cases are under different processes. Regarding how to read/write hash from/to file, please refer to test.rake#L21 and visual_testing_test.rb#L37.

Also override Selenium::WebDriver::Driver to store ENV params in visual_testing_helper.rb so can separate folder for different remote driver.
, and move ActiveSupport::VisualTestingHelper to visual_testing_helper.rb then require it from test.rake and test_helper.rb.


To make the base image can be loaded faster for future testing, I convert it from png to rgba at test.rake#L28, this is a mistake since the code should be moved to ActiveSupport::VisualTestingHelper.convert_rgba.


References

adding attributes to a Ruby object dynamically


How does one - without inheritance - override a class method and call the original from within the new method?


Why does dumping and loading a Hash using Marshal in Ruby throw a FormatError?


wvanbergen/chunky_png/wiki#encoding-options

Visual Testing with Selenium in Rails

Pre-Request

Image Compare in Ruby

Simple Note





Gemfile

Added gem 'chunky_png'
(so need to run 'bundle install')



test_helper.rb

require two more modules 'fileutils' and 'chunky_png'

Added class ActiveSupport::VisualTestingHelper for visual testing



Added test case 'visual_testing_test.rb'



The screenshots will be stored in folder visualTesting
each test case has its own folder



Almost done the Selenium part, need to build Web App to work with it (e.g., confirm and select new base image via webpage) later.

Image Compare in Ruby

Simple Note

Image compare util that will be used in my Selenium Visual Testing later.

Steps

Add chunky_png to Gemfile

gem 'chunky_png'

then run (in terminal)

bundle install

Test Images:

test1.png

test2.png

Compare Scripts:

method_from_web.rb (Copied from Reference)


compare_multi_blocks.rb (Modified from above)


Run .rb files from terminal as below

ruby path/to/compare_multi_blocks.rb

Compare Result

diff.png (by method_from_web.rb)


diff2.png (by compare_multi_blocks.rb)


Reference

Comparing images and creating image diffs