This document discusses Capybara testing. It begins by explaining what Capybara is and why it is used for feature testing in Ruby on Rails applications. It then acknowledges common complaints about Capybara tests being slow, breakable, and hard to debug. The document provides tips on running JavaScript tests, using database cleaner, targeting elements wisely, and debugging Capybara tests. It also provides an example of testing a PayPal sandbox integration.

1. StevenYap
stevenyap@futureworkz.com
https://github.com/stevenyap

3. A Garden City

4. A Lion City

6. • Host Saigon.rb Ruby Meetup
• Co-Founder of Futureworkz
• Ruby on Rails coder
• Agile startup consultant

7. Awesome Ruby on Rails Development
http://www.futureworkz.com
http://playbook.futureworkz.com/

8. CAPYBARA TESTING
STEVEN YAP

9. CAPYBARA TESTING BY STEVEN YAP
WHAT IS CAPYBARA TESTING?
▸ Capybara is a gem for feature test (a.k.a. integration test)
▸ Loads your app in a browser and runs a test like a user

10. CAPYBARA TESTING BY STEVEN YAP
WHY DO CAPYBARA TESTING?
▸ Ensure all models/controllers/views are working together
▸ Ensure important user interactions are working
▸ Tests/Works with external scripts/windows such as Google
Map API, Paypal Sandbox

11. CAPYBARA TESTING BY STEVEN YAP
I HATE CAPYBARA TESTING!!!
▸ Slow
▸ Very slow
▸ Very very slow
▸ Breakable
▸ Very breakable
▸ Very very breakable
▸ Hard to debug
▸ Very hard to debug
▸ Very very hard to debug

12. CAPYBARA TESTING BY STEVEN YAP
WHERE TO APPLY CAPYBARA TESTING?
▸ Minimise number of capybara tests
▸ Happy paths
▸ Critical functions

13. WHEN I PUSH A MAJOR FEATURE TO
PRODUCTION,
I FEEL SAFER WHEN MY CAPYBARA
TESTS PASSED
Steven Yap
CAPYBARA TESTING BY STEVEN YAP

14. WHY SO SLOW?

15. CAPYBARA TESTING BY STEVEN YAP
WHY IS CAPYBARA TESTS SO SLOW?
▸ Loads entire app stack
▸ Calls many controllers/models/views
▸ By default, capybara does not run JS

16. CAPYBARA TESTING BY STEVEN YAP
RUNNING JAVASCRIPT WITH CAPYBARA
▸ https://rubygems.org/gems/selenium-webdriver/versions/
2.48.1 with Firefox
▸ https://github.com/thoughtbot/capybara-webkit with Qt
▸ https://github.com/teampoltergeist/poltergeist with
PhantomJS
▸ Add ‘js: true’ to your test case

17. CAPYBARA TESTING BY STEVEN YAP
WHY IS CAPYBARA TESTS SO SLOW?
▸ Loads entire app stack
▸ Runs Javascript including AJAX calls
▸ Loads external scripts such as Google fonts, CDN
Javascript libraries, etc (and executes it)
▸ Fully functional browser to test on
▸ Poor coding

18. CAPYBARA TESTING BY STEVEN YAP
POOR CODING
▸ Bloated CSS
▸ Slow/Too many AJAX calls
▸ Poor performance (eg. N + 1 queries)
▸ Too many external scripts (eg. 2 x date-picker libraries, full
modernizr library for video checking only)

19. CAPYBARA TESTING BY STEVEN YAP
DATABASE CLEANER
▸ Problem: Created user cannot login in Capybara JS test
▸ Reason: Javascript driver runs in a separate process from
database
▸ Solution: Change from transaction to truncation using
https://github.com/DatabaseCleaner/database_cleaner
▸ Read more: https://github.com/DatabaseCleaner/
database_cleaner#rspec-with-capybara-example

20. CAPYBARA TESTING BY STEVEN YAP
EXCLUDE CAPYBARA TEST
▸ RSpec.configure do |config|
config.filter_run_excluding(:js) unless ENV['ALL']
end
▸ rspec
=> will not run capybara tests
▸ ALL=1 rspec
=> will run all tests including capybara

21. WHY SO
BREAKABLE?

22. CAPYBARA TESTING BY STEVEN YAP
WHY IS CAPYBARA SO BREAKABLE?
▸ Failed tests in model/controller
▸ Text changes
▸ Design changes (eg. layout)

23. CAPYBARA TESTING BY STEVEN YAP
TARGET ELEMENT WISELY
▸ Use “within ‘#modal’ { }” to scope your targeting
▸ Avoid targeting an element by text or label
▸ Target an element by ID or field name
▸ Target an element by class

24. CAPYBARA TESTING BY STEVEN YAP
GOOD USE OF CSS CLASS NAME + SEMANTIC HTML
▸ Descriptive CSS class naming:
<button class=“green” />
▸ Functional CSS class naming:
<button class=“submit-button” />
▸ Non-semantic HTML:
<div class=“wrapper”><h1>Product Title</h1></div>
▸ Semantic HTML:
<div class=“product wrapper”>
<h1 class=“title”>Product Title</h1>
</div>

25. WHY SO
HARD TO DEBUG?

26. CAPYBARA TESTING BY STEVEN YAP
TOO MANY THINGS HAPPENING!
▸ Asset pipeline, Javascript functions, CSS rendering, partials,
controllers, models, database, EVERYTHING!!!
▸ Failure can come from anywhere (unlike functional/unit tests)
▸ External script loads too slow (timeout)
▸ Performance too bad (AJAX call timeout)
▸ Errors in assets compilation (SASS error)
▸ Javascript driver bugs

27. CAPYBARA TESTING BY STEVEN YAP
THINK LIKE A USER
▸ Capybara tests run like a real user using the site
▸ Anything your users cannot do = Your test cannot do
▸ User cannot post to a URL directly so your test code cannot
post to a URL directly like a controller test
▸ User cannot click on hidden elements (eg. a hidden link)

28. CAPYBARA TESTING BY STEVEN YAP
CAPYBARA DEBUGGING METHODS
▸ Make sure your development site works first!
▸ https://github.com/jnicklas/capybara#debugging
▸ https://github.com/mattheworiordan/capybara-screenshot
▸ Painful examination of rendered HTML

29. CAPYBARA TESTING BY STEVEN YAP
OVERLAYED ELEMENTS VS HIDDEN ELEMENTS
▸ Sometimes CSS styling overlay the original element with
another layout
▸ Eg. http://materializecss.com/forms.html#checkbox
▸ Forced click:
page.find(‘#user_terms_and_conditions’, visible:
false).trigger('click')

30. CAPYBARA TESTING BY STEVEN YAP
AJAX CALLS
▸ Difficult to debug
▸ Is the AJAX fired or fired with errors?
▸ Console.log() will output when running the test
▸ Understand when Capybara will wait or will not wait
▸ https://github.com/jnicklas/capybara#asynchronous-
javascript-ajax-and-friends

31. CAPYBARA TESTING BY STEVEN YAP
ACTIONVIEW::TEMPLATE::ERROR: END OF FILE REACHED
▸ Random bug that appeared
▸ https://github.com/jfirebaugh/konacha/issues/123
▸ Reason: sprockets reading uncompiled asset files
▸ Solution: gem 'sprockets-rails', '~> 3.0.0', :require =>
'sprockets/railtie'

32. PAYPAL SANDBOX

33. CAPYBARA TESTING BY STEVEN YAP
PAYPAL SANDBOX
def make_payment_via_paypal()
using_wait_time(30) do
resolve_paypal_js_error
click_on 'Pay with my PayPal account'
within '#method-paypal' do
fill_in 'Email', with: Rails.application.secrets.paypal_testing_email
fill_in 'PayPal password', with: Rails.application.secrets.paypal_testing_password
click_on 'Log In'
end
find('#continue_abovefold').click
expect(page).not_to have_content 'Loading...'
end
end
# Paypal has a JS error
# where it cannot find div#paywithmybank_container
def resolve_paypal_js_error
execute_script <<-EOF
var ele = document.createElement("DIV");
ele.id = "paywithmybank_container";
document.getElementsByTagName("body")[0].appendChild(ele);
EOF
end

34. CAPYBARA TESTING BY STEVEN YAP
DO CAPYBARA TEST
▸ It is the Ultimate Test
▸ Give assurances to critical functions
▸ Helps you to think about your views
▸ Easier with experience

35. Thank you!
Awesome Ruby on Rails Development
http://www.futureworkz.com
http://playbook.futureworkz.com/