Capybara testing

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

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

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

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

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

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

WHERE TO APPLY CAPYBARA TESTING?
▸ Minimise number of capybara tests
▸ Happy paths
▸ Critical functions

WHEN I PUSH A MAJOR FEATURE TO
PRODUCTION,
I FEEL SAFER WHEN MY CAPYBARA
TESTS PASSED
Steven Yap

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

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

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

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)

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

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

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

TARGET ELEMENT WISELY
▸ Use “within ‘#modal’ { }” to scope your targeting
▸ Avoid targeting an element by text or label
▸ Target an element by ID or ﬁeld name
▸ Target an element by class

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>

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

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)

CAPYBARA DEBUGGING METHODS
▸ Make sure your development site works ﬁrst!
▸ https://github.com/jnicklas/capybara#debugging
▸ https://github.com/mattheworiordan/capybara-screenshot
▸ Painful examination of rendered HTML

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.ﬁnd(‘#user_terms_and_conditions’, visible:
false).trigger('click')

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

ACTIONVIEW::TEMPLATE::ERROR: END OF FILE REACHED
▸ Random bug that appeared
▸ https://github.com/jﬁrebaugh/konacha/issues/123
▸ Reason: sprockets reading uncompiled asset ﬁles
▸ Solution: gem 'sprockets-rails', '~> 3.0.0', :require =>
'sprockets/railtie'

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

DO CAPYBARA TEST
▸ It is the Ultimate Test
▸ Give assurances to critical functions
▸ Helps you to think about your views
▸ Easier with experience

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

Capybara testing

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Capybara testing (20)

Recently uploaded (20)

Capybara testing