35
Steven Yap [email protected] https://github.com/stevenyap

Capybara testing

Embed Size (px)

Citation preview

Page 1: Capybara testing

Steven [email protected]://github.com/stevenyap

Page 2: Capybara testing
Page 3: Capybara testing

A Garden City

Page 4: Capybara testing

A Lion City

Page 5: Capybara testing
Page 6: Capybara testing

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

Page 7: Capybara testing

Awesome Ruby on Rails Developmenthttp://www.futureworkz.com

http://playbook.futureworkz.com/

Page 8: Capybara testing

CAPYBARA TESTINGSTEVEN YAP

Page 9: Capybara testing

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

Page 10: Capybara testing

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

Page 11: Capybara testing

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

Page 12: Capybara testing

CAPYBARA TESTING BY STEVEN YAP

WHERE TO APPLY CAPYBARA TESTING?

▸ Minimise number of capybara tests

▸ Happy paths

▸ Critical functions

Page 13: Capybara testing

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

Steven Yap

CAPYBARA TESTING BY STEVEN YAP

Page 14: Capybara testing

WHY SO SLOW?

Page 15: Capybara testing

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

Page 16: Capybara testing

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

Page 17: Capybara testing

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

Page 18: Capybara testing

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)

Page 19: Capybara testing

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

Page 20: Capybara testing

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

Page 21: Capybara testing

WHY SO BREAKABLE?

Page 22: Capybara testing

CAPYBARA TESTING BY STEVEN YAP

WHY IS CAPYBARA SO BREAKABLE?

▸ Failed tests in model/controller

▸ Text changes

▸ Design changes (eg. layout)

Page 23: Capybara testing

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

Page 24: Capybara testing

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>

Page 25: Capybara testing

WHY SO HARD TO DEBUG?

Page 26: Capybara testing

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

Page 27: Capybara testing

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)

Page 28: Capybara testing

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

Page 29: Capybara testing

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')

Page 30: Capybara testing

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

Page 31: Capybara testing

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'

Page 32: Capybara testing

PAYPAL SANDBOX

Page 33: Capybara testing

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

Page 34: Capybara testing

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

Page 35: Capybara testing

Thank you!Awesome Ruby on Rails Development

http://www.futureworkz.comhttp://playbook.futureworkz.com/