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.