Capybaras are the largest rodents in the world. They are related to guinea pigs, but are the size of a big dog or small pig. They live in South America, and they're pretty damn cute. Capybara is also the name of a Ruby gem written by Jonas Nicklas. It helps you write integration tests for web apps by pretending to be a user with a web browser. It takes a black box approach to testing, letting you go to URLs, click links and buttons, fill in forms, and check that the rendered page contains what you think it should have in it. This talk is about Embracing Capybara: how to understand Capybara, train it to do new tricks, and discipline it when it misbehaves.

1. Embracing
Capybara

2. Who Has Used
Capybara?

3. Who Has Been
Bitten By Capybara?

4. TimMoore
tmoore

9. http://git.io/capybara
What’s a
Capybara?
World’s
Largest Rodent!
“Makes it easy to
simulate how a
user interacts with
your application”

10. Matchers/
Selectors
Browsing
DSL
Browser
Engines
Capybara Anatomy

11. visit '/sessions/new'
within("#session") do
fill_in 'Login',
with: 'user@example.com'
fill_in 'Password',
with: 'password'
end
click_link 'Sign in'
expect(page).to have_content 'Success'

12. Understanding
Capybara

13. Capybara is Patient
visit '/sessions/new'
within("#session") do
fill_in 'Login',
with: 'user@example.com'
fill_in 'Password',
with: 'password'
end
click_link 'Sign in'
expect(page).
to have_content 'Success'
Waits for page to load

14. Capybara is Patient
visit '/sessions/new'
within("#session") do
fill_in 'Login',
with: 'user@example.com'
fill_in 'Password',
with: 'password'
end
click_link 'Sign in'
Capybara.using_wait_time(60) do
expect(page).
to have_content 'Success'
end
Waits for page to load

15. Capybara is Patient
visit '/sessions/new'
within("#session") do
fill_in 'Login',
with: 'user@example.com'
fill_in 'Password',
with: 'password'
end
click_link 'Sign in'
expect(page).
to have_content 'Success',
wait: 60
Waits for page to load

16. Methods that Wait
•
•
•
•
find(selector), find_field, find_link, etc.
within(selector) (scoping)
has_selector?/has_no_selector? & assertions
form & link actions
• click_link/button
• fill_in
• check/uncheck, select, choose, etc.

17. Methods that Don’t
•
•
•
•
•
•
visit(path)
current_path
all(selector)
first(selector) (counter-intuitively)
execute_script/evaluate_script
simple accessors: text, value, title, etc.

18. Don’t Do This
click_link('Search')
expect(all('.search-result').count).
to eq 2
Does not wait
Returns 0

19. Good
click_link('Search')
expect(page).
to have_css '.search-result',
count: 2

20. Don’t Do This
click_button('Save')
Does not wait
expect(find('.dirty-warning').text).
not_to contain('Unsaved changes')

21. Good
click_button('Save')
expect(find('.dirty-warning')).
to have_no_text('Unsaved changes')

22. Also Good
click_button('Save')
expect(find('.dirty-warning')).
not_to have_text('Unsaved changes')

23. Training Capybara

24. Don’t Do This
Scenario: Searching for cats
Given I am on "/search"
When I fill in "input.search_text"
with "cats"
And I press "Search"
Then I should see "grumpy cat"
within "div.search-results"

25. Don’t Do This
“web_steps.rb is a terrible, terrible idea”
- Boring scenarios cats
Scenario: Searching for
- Brittle scenarios
Given I am - Where is my workflow?
on "/search"
When I fill in "input.search_text"
with "cats"
And I
“A step description
press "Search" contain
should never
regexen, CSS or
should XPath selectors” cat"
see "grumpy
Then I
within "div.search-results"

26. Better
Scenario: Searching for cats
Given I am on the search page
When I fill in "Search" with "cats"
And I press "Search"
Then I should see "grumpy cat"
within the search results

27. Best
Scenario: Searching for cats
When I search for "cats"
Then I should see "grumpy cat" within
the search results

28. Don’t Do This
When /^I search for "([^"]*)"$/
do |search_text|
visit "/search"
fill_in "input.search_text",
with: search_text
click_button "Search"
end

29. Better
When /^I search for "([^"]*)"$/
do |search_text|
search_page =
my_app.search_page
search_page.search_input.
fill_in search_text
search_page.search_button.click
end

30. Better
class MyAppTester
def initialize
@session = Capybara::Session.new(:selenium)
end
!
def search_page
MyAppTester::SearchPage.new(@session)
end
end

31. Better
class MyAppTester::SearchPage
def initialize(session)
session.visit "/search"
@session = session
end
def search_input
@session.find "input.search_text"
end
def search_button
@session.find "button.search"
end
end

32. Better
When /^I search for "([^"]*)"$/
do |search_text|
search_page =
my_app.search_page
search_page.search_input.
fill_in search_text
search_page.search_button.click
end

33. Best
When /^I search for "([^"]*)"$/
do |search_text|
my_app.search_for search_text
end

34. Don’t Do This
find(:css, "div.main div.sidebar
div.search div.advanced div.actions
button.submit").click
Failure/Error: find(:css, "div.main div.sidebar
div.search div.advanced div.actions button.submit").click
Capybara::ElementNotFound:
Unable to find css "div.main div.sidebar
div.search div.advanced div.actions button.submit"

35. Disciplining
Capybara

36. Setting Breakpoints
When /^I debug$/ do
debugger
end

37. Taking Screenshots
After do |scenario|
filename =
scenario.name.gsub(/W/, '_')
page.save_screenshot(
"target/reports/#{filename}.png")
end
!
http://git.io/capybarascreenshot

38. Firefox
• focusmanager.testmode = true
• Update selenium-webdriver gem
• Disable auto-update in CI
• Beware platform differences
• http://git.io/capybarafirebug

39. Getting Help
•
http://groups.google.com/group/
ruby-capybara
•
•
Freenode (IRC): #capybara
Stack Overflow

40. Summary
•
•
•
Understand Capybara synchronisation
•
•
Keep selectors simple
Be explicit with Capybara
Use Page Objects for readable,
flexible tests
If you get bitten, seek help!

41. Fix Flaky Tests

42. Thanks!
Any Questions?