Rails : Capybara::Webkit::ClickFailed, because of overlapping element

 Failed to click element /html/body/div[@id='wrapper']/div[@id='page-content-wrapper']/div/div/div/form[@id='signup']/div[@id='user_section']/div[7]/div[3]/div/button[@id='review_button'] because of overlapping element /html/body/div[8] at position 209, 718; 
 A screenshot of the page at the time of the failure has been written to /tmp/click_failed_S10458.png


The actual problem was; there was a link_tag (<a>) inside the <label> tag. So when I asked the capybara to click on the <label> it clicked on the  “Terms and Conditions” area and a popup appeared.




To Solve this, I kept the link separate from the Label


Some useful links




Rails : Capybara : When Checkboxes and Radio buttons are not found

There may come situation when you try to check(tick) the checkboxes via RSpec. using codes like



Problem was:

We have hidden the original checkbox and the fancy checkbox was being shown. Since the item was hidden Capybara was not able to find the element.


Instead of searching for hidden item, I triggered the click event on the Label for that Checkbox

within('.term-condition') do

Useful links


Rails : Capybara Webkit : Issue : Multiple JS events in single example

I recently moved from Selenium Web Driver to Thoughtbot’s Capybara Webkit as JS Driver for Capybara. The main reason is, webkit is super fast in running the test suite and its headless (no browser pops up ) .

Problem I faced

I was changing the option in select box and expecting the change in span’s content. Actually some sort of calculation should have been triggered. Webkit was not triggering the ‘change‘ event properly.

Continue reading

Capybara : RSpec : filling and assertion tips

To use helper method you need to visit some web page like

visit '/signup'

For Text fields

fill 'user[email]', with: 'john@example.com'
fill_in 'user[name]', with: 'John Smith'
fill_in 'user[email]', with: 'john@example.com'

For Select box

select 'Annually', from: 'subscription_type'
# The `Annually` is the text not the value attribute
# 'subscription_type' is name attribute
select 'Monthly', from: 'subscription_type'

Continue reading