Capybara-Webkit

capybara-webkitTesting Javascript without pain or loss of life Joe Ferris

Modern applications use Javascript• Rich user interfaces• Faster, more responsive interfaces• Easier to build reusable interface components

You need to test your Javascript• No excuses• Broken Javascript means a broken page• In Javascript-heavy applications, it’s difﬁcult to write capybara tests without running Javascript

Limits of rack-test• “Dumb” web browser• Follows redirects• Rendering engine is Nokogiri• Fill out forms, click links• Handles 90% of the web• (but the other 10% is the shiny part)

Simple TestFeature: sign up for an account Scenario: sign up When I go to the home page And I ﬁll in the following: | Email | jferris@thoughtbot.com | | Password | taters | And I press "Sign up" Then I should have an email of "jferris@thoughtbot.com"1 scenario (1 passed)4 steps (4 passed)0m0.446s

Simple ChangeFeature: sign up for an account Scenario: sign up When I go to the home page And I ﬁll in the following: | Email | jferris@thoughtbot.com | | Password | taters | And I press "Sign up" Then I should have an email of "jferris@thoughtbot.com" And I should have an account name of "jferris"

Add some Javascript<script type="text/javascript"> $("#email").keyup(function () { var email = $(this).val(); var name = email.replace(/@.*$/, ""); $("#accountName").val(name); });</script>

Feature: sign up for an account Scenario: sign up and get the default account name When I go to the home page And I fill in the following: | Email | jferris@thoughtbot.com | | Password | taters | And I press "Sign up" Then I should have an email of "jferris@thoughtbot.com" And I should have an account name of "jferris" expected: "jferris" got: "" (using ==) (RSpec::Expectations::ExpectationNotMetError) ./features/step_definitions/web_steps.rb:218:in `/Î should have an accountname of "([^"]*)"$/ features/sign_up_javascript.feature:10:in Ànd I should have an account name of"jferris"Failing Scenarios:cucumber features/sign_up_javascript.feature:31 scenario (1 failed)5 steps (1 failed, 4 passed)0m0.398s

@javascript

Selenium• Runs tests in a real browser (usually Firefox, but supports Chrome, Safari, and Internet Explorer)• Supports any Javascript your browser supports, just like real users• Easy to set up with capybara

Limits of Selenium• Slow, slow, slow• GUI browser adds a lot of cruft you don’t want that gets in the way• Browsers were designed to be clicked on and looked at, not controlled and queried

Slow• Boot up Firefox with fresh proﬁle• Set up Firefox with extension• Communicates over JSON REST API

Unfriendly• Automatic updates• Download dialogs• No console.log output• Invisible Javascript errors

And I should see "Hello" expected there to be content "Hello" in ""

capybara-webkit• Fast, fast, fast• No browser UI• Uses the WebKit engine• console.log output• Errors in standard output

Fast capybara- rack-test selenium webkitSimple scenario 4.6s 8.3s 4.8s Filling in a bunch of text 42s 23s 6.4s ﬁelds

TypeError: Result of expression("#email").keyup [undeﬁned] is not afunction.

Mostly EasyGemﬁle:gem "capybara-webkit"features/support/env:Capybara.javascript_driver = :webkit

But you need Qt• Download installer on OS X• Most Linux distros have a package

Caveats• capybara-webkit’s engine is still designed to build browsers, so there are some interactions we can’t get between• All tests are asynchronous (like with Selenium), so you still need Capybara’s retrying methods• capybara-webkit is still young, so things are ﬂakier than with Selenium

WebKits: how do they work? • capybara-webkit is built around QtWebKit • Headless browser listens for commands using a lightweight socket layer • Ruby driver implements the capybara API and communicates with the server

WebKit• Based on KHTML• Open source• Powers Safari, Chrome, and other browsers• Cross-platform, fast, standards-compliant

WebKit• WebKit is not a browser, or really even a browser engine• WebKit is a set of libraries for building browsers• WebKit is not packaged as a standalone library• There is no one WebKit

Qt• Powers the KDE desktop• Tools, extensions, and libraries for building GUI applications in C++• Provides a packaged wrapper around WebKit called QtWebKit

QtWebKit• Qt implementation of WebKit with nice API and documentation• Lots of injection points for building your own browser• We built a test harness instead

• capybara makes acceptance tests easy to write• capybara-webkit is fast and easy to set up• There is no excuse (anymore) for not testing Javascript

• capybara-webkit is open source• Please submit pull requests

Thank You Joe Ferris @joeferristhoughtbot/capybara- webkit

Capybara-Webkit

by bostonrb on Sep 14, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Capybara-Webkit — Presentation Transcript