Learning JavaScript Testing
Let’s start JavaScript Testing. By default, Capybara uses Rack::Test which is a headless browser emulator. It gives us great speed, but we sacrifice the ability to run JavaScript. If you need to test JS as part of your integration suite, then you need to use another driver.
If you’re using Linux, you’ll need to set up xvfb in order to use either Selenium or Capybara-Webkit. Here are the Ubuntu commands to install xvfb and additional fonts to get rid of some warnings.
sudo apt-get install xvfb
sudo apt-get install x11-xkb-utils
In addition, sudo apt-get install xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic
In order to use xvfb with your specs, you will need to run xvfb-run bundle exec rake (an alias may be in order). Now selunium and capybara-webkit will use xvfb when launching a browser.
Using Selenium: JavaScript Testing
The most popular driver is Selenium. It uses an actual browser window and you can watch the test happen. It uses the browser’s actual JavaScript engine, so it’s identical to having a human Q/A department interacting with your application.
If you have Firefox 4 installed then there are no extra setup steps. It’s possible to use Chrome or another WebKit-based browser, but it is more work.
Modifying Your Examples
If you want to only use the browser for a few specific tests, you can add js: true into the it line like this
it “should list the article titles on the index”, js: true do
@articles.each do |article|
page.should have_link(article.title)
end
end
More commonly you’ll have a group of tests that you want to run in the browser. Rather than litter js: true all over the place, do this:
- Create a describe block that contains the examples that need JavaScript
- Add a before-all block like this:
before(:all) do
Capybara.current_driver = :selenium
end
- Put your examples after the before block
- Add an after-all block like this:
after(:all) do
Capybara.use_default_driver
end
Now any example added inside that describe will use Selenium. If you forget the after(:all) block, all subsequent tests will continue using the :selenium driver, which will work, albeit more slowly than with the default, headless driver.
Selenium Methods: JavaScript Testing
If you’re just triggering AJAX actions via JavaScript you can probably get by with the normal Capybara actions. But Selenium itself has many actions that are not directly supported by Capybara.
But that’s ok! If you ask Capybara for page.driver.browser while in a Selenium-powered test, it’ll give you the Selenium::WebDriver::Driver object. You can then access any Selenium method according to the API here: http://selenium.googlecode.com/svn/trunk/docs/api/rb/Selenium/WebDriver/Driver.html
Checking for an Alert
Here’s a complete example of how you could use Selenium to check that an alert pops up when we attempt to delete an article:
describe “on the show page for an article” do
before(:all) do
Capybara.current_driver = :selenium
end
before(:each) do
@article = @articles.first
visit article_path(@article)
end
it “pops up a confirm dialog when we click delete” do
page.click_link(“Delete”)
dialog = page.driver.browser.switch_to.alert
dialog.text.should == “Delete ‘#{@article.title}’?”
dialog.dismiss
end
after(:all) do
Capybara.use_default_driver
end
end
You could also use dialog.accept to click the OK button where dialog.dismiss clicks CANCEL.
Selenium Alternatives
Selenium, for one reason or another, makes developers a little uneasy. It sometimes has issues in the development versions but, most importantly, it’s slow. It would be awesome if we could run JavaScript without actually waiting for the slow rendering of a GUI window.
Using WebKit: JavaScript Testing
The WebKit framework powers Chrome, Safari, and most mobile phone browsers. It’s a popular open source project and is really at the vanguard of web browsers.
The team at ThoughtBot, a Rails consultancy in Boston, put together the capybara-webkit gem: https://github.com/thoughtbot/capybara-webkit
It uses the WebKit framework as a headless browser. We get almost all the speed of being headless with Rack::Test, but the power of a full, real-world JavaScript interpreter.
Add the Gem
Open your Gemfile and add the following in your development dependencies:
gem ‘capybara-webkit’
At the time of this writing, it was necessary to use the 1.0 branch of capybara-webkit like this:
gem “capybara-webkit”, git: “https://github.com/thoughtbot/capybara-webkit.git”, branch: “1.0”
Tell Capybara about Capybara-Webkit
Then you’d hop into your spec/spec_helper.rb and add this line inside the RSpec.configure block:
Capybara.javascript_driver = :webkit
Run Your Examples
Now all you do is run your examples! We just swapped the driver, but the way we tell Capybara to use it is exactly the same as Selenium. If you want to run a single test with WebKit, add js: true to the it line.
If you have a set of examples to run with JavaScript, wrap them in a describe block with a before-all and after-all like this:
describe “run with webkit” do
before(:all) do
Capybara.current_driver = :webkit
end
it “runs something fancy with javascript”
after(:all) do
Capybara.use_default_driver
end
end
Make your resume stand out and become a Certified Capybara Testing Professional. Try free practice tests here!
A great career is just a certification away. So, practice and validate your skills to become a Certified Capybara Testing Professional.
