Capybara::Webkit::ClickFailed - Failed to click element because of overlapping element

Hi there,

Maybe you have experimented this issue using Capybara. I did too.

This was the Querying I was using from Capybara DSL:

find('.button.add-user').click  

In my local was working like a charm but CI: Continuos Integration Testing Server.

After many attempts, these were the options I've tried and maybe you should too:

Option (Querying) #1
find('.button.add-user', text: 'Add User').click  
Option (Scoping) #2

And then maybe you should check if there is a html element where you can scope or use as a wrapper

 within '.add-user-wrap' do
   find('.button.add-user').click
 end
Option (Scripting) #3

If not, maybe you need to check if is a visible element or maybe you are adding an opacity via CSS

At this point, you can use scripting for this try

script = "$('.add-user-wrap').css({opacity: 100, display: 'block'});"  
page.execute_script(script)  
Option (Another querying alternative) #4

Using trigger can be your solution:

find(:css, '.button.add-user').trigger('click')  
Option (Mix of options)#5

At the end, this was my final solution:

 script = "$('.add-user-wrap').css({opacity: 100, display: 'block'});"
 page.execute_script(script)
 within '.add-user-wrap' do
   find(:css, '.button.add-user').trigger('click') 
 end

Why? because using save_screenshot('/tmp/testing_name.png') I noticed .add-user-wrap was having a opacity on it. So I removed with the script and then I have used trigger to click the css element. And that was my solution. I hope this might help you out.

Victor Velazquez

Coder, Musician, Startups, Passionate Dancer & Life Lover. Software Engineer at MagmaLabs, Co-founder of Web Dev Talks, Co-founder of Voltaire, Co-founder of Paqkit, Ex-co-founder of Zaznova.

Subscribe to The zazvick's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!