Manage Image Files from Selenium Visual Testing

Simple Note

Now I can do Visual Testing with Selenium, but manage image files between folders such like check base image, delete base image, apply new image as base image, or view base/new/diff image at a time usually annoyed me.

To solve this issue, I have worte some simple web pages to manage the image files

Pre-Request

Visual Testing with Selenium in Rails

Online Demo

https://www.youtube.com/watch?v=RSC4LNMQ5_0

(One thing is missing, you can hold ctrl key and click image to open it)

NOTE: There are some permission issue if you run test case by Jenkins job, to solve those issue, you can try:

1. Start rails app by user jenkins :

# cd to rails project folder first

# make rails project folder can be
# accessed by jenkins
# use 777 or any other proper value
sudo chmod 777 -R .

# switch user to jenkins
sudo su jenkins

# start rails app by user jenkins
rails s

or

2. Make jenkins can run command as root if needed, please refer to How to run a script as root in Jenkins?

In this case, you will need to manage security with jenkins properly, see Standard Security Setup

Related Files

routes.rb

Define some route rules, including get folder content, get png file and list images for specific test case.

visual_testing_controller.rb

Controller to do the backend works, including list folder content, return png file and return images for specific test case.

application.html.erb

Just slightly modified to load jQuery.

show.html.erb

Simply list folder content.

listimgs.html.erb

Most complex one (with some ugly JavaScript / HTML) , list all images and provide some control.