Capybara-Webkit

6,611 views

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,611
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
35
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Capybara-Webkit

    1. 1. capybara-webkitTesting Javascript without pain or loss of life Joe Ferris
    2. 2. Modern applications use Javascript• Rich user interfaces• Faster, more responsive interfaces• Easier to build reusable interface components
    3. 3. You need to test your Javascript• No excuses• Broken Javascript means a broken page• In Javascript-heavy applications, it’s difficult to write capybara tests without running Javascript
    4. 4. 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)
    5. 5. Simple TestFeature: sign up for an account Scenario: sign up 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"1 scenario (1 passed)4 steps (4 passed)0m0.446s
    6. 6. Simple ChangeFeature: sign up for an account Scenario: sign up 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"
    7. 7. Add some Javascript<script type="text/javascript"> $("#email").keyup(function () { var email = $(this).val(); var name = email.replace(/@.*$/, ""); $("#accountName").val(name); });</script>
    8. 8. 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 `/^I should have an accountname of "([^"]*)"$/ features/sign_up_javascript.feature:10:in `And 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
    9. 9. @javascript
    10. 10. 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
    11. 11. 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
    12. 12. Slow• Boot up Firefox with fresh profile• Set up Firefox with extension• Communicates over JSON REST API
    13. 13. Unfriendly• Automatic updates• Download dialogs• No console.log output• Invisible Javascript errors
    14. 14. And I should see "Hello" expected there to be content "Hello" in ""
    15. 15. capybara-webkit• Fast, fast, fast• No browser UI• Uses the WebKit engine• console.log output• Errors in standard output
    16. 16. Fast capybara- rack-test selenium webkitSimple scenario 4.6s 8.3s 4.8s Filling in a bunch of text 42s 23s 6.4s fields
    17. 17. TypeError: Result of expression("#email").keyup [undefined] is not afunction.
    18. 18. Mostly EasyGemfile:gem "capybara-webkit"features/support/env:Capybara.javascript_driver = :webkit
    19. 19. But you need Qt• Download installer on OS X• Most Linux distros have a package
    20. 20. 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 flakier than with Selenium
    21. 21. 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
    22. 22. WebKit• Based on KHTML• Open source• Powers Safari, Chrome, and other browsers• Cross-platform, fast, standards-compliant
    23. 23. 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
    24. 24. Qt• Powers the KDE desktop• Tools, extensions, and libraries for building GUI applications in C++• Provides a packaged wrapper around WebKit called QtWebKit
    25. 25. 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
    26. 26. • 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
    27. 27. • capybara-webkit is open source• Please submit pull requests
    28. 28. Thank You Joe Ferris @joeferristhoughtbot/capybara- webkit

    ×