Embracing Capybara

Embracing Capybara

Who Has Used Capybara?

Who Has Been Bitten By Capybara?

TimMoore

tmoore

What’s a Capybara?

World’s Largest Rodent!

“Makes it easy to simulate how a user interacts with your application”

http://git.io/capybara

Capybara Anatomy

Browsing DSL

Matchers/Selectors

Browser Engines

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'

Understanding Capybara

Capybara is Patientvisit '/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

Capybara is Patientvisit '/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

Capybara is Patientvisit '/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

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.

Methods that Don’t• visit(path)

• current_path

• all(selector)

• first(selector) (counter-intuitively)

• execute_script/evaluate_script

• simple accessors: text, value, title, etc.

Don’t Do This

click_link('Search') expect(all('.search-result').count). to eq 2

Returns 0Does not wait

Good

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

Don’t Do This

click_button('Save') expect(find('.dirty-warning').text). not_to contain('Unsaved changes')

Does not wait

Good

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

Also Good

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

Training Capybara

Don’t Do ThisScenario: 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"

Don’t Do ThisScenario: 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"

“A step description should never contain regexen, CSS or XPath selectors”

“web_steps.rb is a terrible, terrible idea” - Boring scenarios - Brittle scenarios - Where is my workflow?

BetterScenario: 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

BestScenario: Searching for cats When I search for "cats" Then I should see "grumpy cat" within the search results

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

BetterWhen /^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

Betterclass MyAppTester def initialize @session = Capybara::Session.new(:selenium) end !

def search_page MyAppTester::SearchPage.new(@session) end end

Betterclass 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

BetterWhen /^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

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

Don’t Do Thisfind(: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"

Disciplining Capybara

Setting Breakpoints

When /^I debug$/ do debugger end

Taking ScreenshotsAfter do |scenario| filename = scenario.name.gsub(/\W/, '_') page.save_screenshot( "target/reports/#{filename}.png") end !

http://git.io/capybarascreenshot

Firefox•focusmanager.testmode = true

• Update selenium-webdriver gem

• Disable auto-update in CI

• Beware platform differences

• http://git.io/capybarafirebug

Getting Help

• http://groups.google.com/group/ruby-capybara

• Freenode (IRC): #capybara

• Stack Overflow

Summary• Understand Capybara synchronisation

• Be explicit with Capybara

• Use Page Objects for readable, flexible tests

• Keep selectors simple

• If you get bitten, seek help!

Fix Flaky Tests

Thanks! Any Questions?