Ajax forms testing using capybara, cucumber-rails and selenium

Manual UI testing plays a crucial part in test life cycle. However doing the same UI testing on every other day will became tedious. By using cucumber with capybara we can transform these mundane tasks into some interesting learning. We can easily automate manual UI testing by using capybara with cucumber. While automating, ajax forms testing became a task that required some tweaking. I did some R&D to accomplish this task for my project and also that is what pushes me to share my R&D with you.

Task : Admin should be able to edit footer. By clicking on ‘Edit’ link it sends an ajax request and renders a form in facebox. After filling the form and clicks on ‘Add’ button it creates a footer and render a successful message.

Now we will see how to write feature to fulfill this task.

Step 1:

#features/manage_footers.rb
 @javascript
  Scenario: Footer update
    When clicked on edit link
    And updated footer name 'About Us'
    And updated category 'Learn more'
    And updated order as '1'
    And checked link to other page
    And clicked on add button
    Then user should be able to success message

Notice that above scenario there is tag ‘@javascript’ tag which we will do magic. It tells to capybara sends an ajax request for this scenario. Now we will see step definitions

Step 2:

#features/step_definitions/footer_steps.rb
 When /^clicked on edit link$/ do
    click_link('Edit')
 end
 When /^updated footer name 'About(\d+)'$/ do |arg1|
    within('#facebox') do
      fill_in('footer[name]', :with => 'About Us')
    end
 end
 When /^updated category 'Learn more'$/ do
    within('#facebox') do
      select('Learn More', :from => 'footer[category]')
    end
 end
 When /^updated order as '(\d+)'$/ do |arg1|
    within('#facebox') do
      fill_in('footer[sequence]', :with => 1)
    end
 end
 When /^checked link to other page$/ do
    within('#facebox') do
      check('footer[only_url]')
    end
 end
 When /^clicked on add button$/ do
   within('#facebox') do
     click_button('footer_submit')
   end
 end
 Then /^user should be able to success message$/ do
   page.has_content?('Footer was successfully updated.')
 end

Step 3:
Set default driver to selenium in env.rb file.

#features/support/env.rb
Capybara.default_driver = :selenium

Step 4:
Now execute the feature. Because we set default driver to selenium it opens firefox (by default) and executes the steps. For more read capybara.

I hope this article will reduce your manual testing effort. Any suggestions and feedback would be welcome.

Advertisements

About Siva Gollapalli

Being a programmer is a huge possibility to learn
This entry was posted in Ruby on Rails, Tutorials and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s