Testing Graphsy with Selenium


UPDATE: Graphsy is now accepting users: www.graphsy.com
This is my first real post in a little while. Just want to catch you up with Graphsy’s progress. I got busy all of a sudden with some paper writing at work and so haven’t had as much time to devote to Graphsy. If you saw the previous screen cast you noticed that I’ve added some basic file management. I’m also almost done designing the Object Options pane, hopefully will find some time over the weekend or early next week. I have also been slowly adding a suite of test cases to Graphsy. That’s what I want to talk about today.

For testing I decided to use Selenium. It’s a really nice automation tool based around Javascript.  It has good integration with Ruby on Rails via the Selenium-on-rails plug-in.  It took me a bit to set it up, but now it is really easy to write test cases that imitate a user playing with Graphsy.  You basically choreograph mouse movements and tell the test suite what it should be clicking on.  Then, when running Graphsy in test mode, you can load up the test runner and execute all of the test cases.

I learned about Selenium when I was a TA for a Validation and Verification class.  My boss let me run a web testing project and so I picked Selenium to torture the undergrads with.  It wasn’t really ready a year ago, but now I think it’s pretty usable.  There are still some issues with start-up and tear-down that I can’t quite figure out, but now that you can include partial tests within your tests cases it’s pretty easy to manage start-up and tear-down scripts.  I wish I could introduce branching paths.  Right now the Ruby code is used to strictly generate the Javascript/HTML test case and not to actually run the test case itself.  Even with these limitations I think Selenium will proove very useful.

Just to give you a taste, here is the code for a simple test case followed by a video of Selenium executing it:

basicLine.rsel:
include_partial 'login', :name => 'name', :password => 'pass'
click_and_wait "link=studio"
assert_title "Graphsy"
include_partial 'drawing/drawLine', :l_id=>"l_2",:x1=>100,:y1=>100,:x2=>300,:y2=>300
include_partial 'logout', :name => 'name'

_login.rsel:
open '/'
click_and_wait "link=login"
type 'login', name
type 'password', password
click_and_wait "commit"
assert_title "Welcome to Graphsy"
assert_text_present name

drawing/_drawLine.rsel:
mouse_down  "single_line"
mouse_up    "single_line"
assert_attribute "single_line", "class", "top_button one_line_2"
include_partial 'drawing/drawLinePostClick', :l_id=>l_id,:x1=>x1,:y1=>y1,:x2=>x2,:y2=>y2
assert_attribute "single_line", "class", "top_button one_line_1"

drawing/_drawLinePostClick.rsel:
mouse_down_at   "draw_1", "#{x1},#{y1}"
mouse_up_at     "draw_1", "#{x1},#{y1}"
mouse_move_at   "draw_1", "#{x2},#{y2}"
mouse_down_at   "draw_1", "#{x2},#{y2}"
mouse_up_at     "draw_1", "#{x2},#{y2}"
if(x1 < x2)
  assert_element_position_left "#{l_id}", "#{x1}"
else
  assert_element_position_left "#{l_id}", "#{x2}"
end
if(y1 < y2)
  assert_element_position_top "#{l_id}", "#{180 + y1}"
else
  assert_element_position_top "#{l_id}", "#{180 + y2}"
end
assert_element_width "#{l_id}", "#{(x2-x1).abs}"
assert_element_height "#{l_id}", "#{(y2-y1).abs}"

_logout.rsel:
open '/'
assert_text_present name
click_and_wait "link=logout"
assert_title "Welcome to Graphsy"
assert_text_not_present name
assert_text_present "Welcome Guest"

That should give you an idea of what the code looks like for a single use case. Though, if you notice most of it is reusable and is used across many different test cases. The nice thing about this suite, is that it can also test cross browser compatibility. Here is a video of what this test looks like being executed. I set the execution time to be slower so that you can see what’s going on. The whole thing is automatic. There is no sounds, just a quick demo.

Get the Flash Player to see this player.

3 Responses to “Testing Graphsy with Selenium”

Leave a Reply