Steven [email protected]://github.com/stevenyap
A Garden City
A Lion City
• Host Saigon.rb Ruby Meetup• Co-Founder of Futureworkz• Ruby on Rails coder• Agile startup consultant
Awesome Ruby on Rails Developmenthttp://www.futureworkz.com
http://playbook.futureworkz.com/
CAPYBARA TESTINGSTEVEN YAP
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
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
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
CAPYBARA TESTING BY STEVEN YAP
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
CAPYBARA TESTING BY STEVEN YAP
WHY SO SLOW?
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
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
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
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)
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
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
WHY SO BREAKABLE?
CAPYBARA TESTING BY STEVEN YAP
WHY IS CAPYBARA SO BREAKABLE?
▸ Failed tests in model/controller
▸ Text changes
▸ Design changes (eg. layout)
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
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>
WHY SO HARD TO DEBUG?
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
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)
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
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')
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
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'
PAYPAL SANDBOX
CAPYBARA TESTING BY STEVEN YAP
PAYPAL SANDBOXdef 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...' endend
# 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); EOFend
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
Thank you!Awesome Ruby on Rails Development
http://www.futureworkz.comhttp://playbook.futureworkz.com/