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.
Josh Software 