Discover How To Test Ajax Forms Using Capybara, Cucumber Rails, & 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:

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:

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

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

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.

Leave a Reply

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

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

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.