Capybara-webkit cannot handle link with bootstrap

问题:

I have a link:

link_to %q(<span class='glyphicon glyphicon-trash'/>).html_safe, feed_item, data: {confirm: 'Are you sure?',toggle: 'tooltip'}, method: :delete, title: 'Delete', id: 'delete_post'

and the following feature spec code

page.accept_confirm do
  click_link 'delete_post'
end

and I get the following error

Capybara::Webkit::ClickFailed:
       Failed to find position for element /html/body/div[@id='wrapper']/div[@id='page-content-wrapper']/div/div[@id='main']/div[@id='main_content']/div[4]/div/div/div[1]/h3/div/a[@id='delete_post']

If I replace the span with the glyphicon by some text e.g. 'Delete', the test works. This appears to be related to an unresolved issue on Github, and may be to do with CSS overlaying the clickable html element. However, I cannot understand how this overlaying is happening in this case or how to correct it.

It is becoming a common practice to use icons for common tasks like 'Edit" or 'Delete', so it would be good to find a solution to this.

How do I work around this problem?

回答1:

Although Obromios answer would work, I don't think it's a good idea to change the way you render icons. Specially because you would need to add the if Rails.env.test? to every icon rendering in order to make the test work.

What you can do is to use this:

find('.glyphicon.glyphicon-trash').trigger('click')

instead of this:

click_link 'delete_post'

回答2:

It appears that people work around this by modifying the test to either click the element using javascript or change the opacity of the overlying item. Instead, I went for the following, which is relies more on rails capabilities. I wrote a trash_icon helper as follows:

  def trash_icon
    if Rails.env.test?
      'proxy_for_trash_icon'
    else
      "<span class='glyphicon glyphicon-trash'/>".html_safe
    end
  end

and modified my link to:

link_to trash_icon, feed_item, data: {confirm: 'Are you sure?',toggle: 'tooltip'}, method: :delete, title: 'Delete', id: 'delete_post'

and the test to:

page.accept_confirm do
  click_link 'proxy_for_trash_icon'
end

This tests everything except the exact text/icon used in the production system.

Still, hopefully someone will come up with a solution that is not a workaround.

回答3:

In addition to @ariel_scherman's answer, you will not want to forget to add js: true to the beginning of your test example.

Something like this:

feature "delete the glyphicon", js: true do
   ............
end

This enables your javascript drivers to be enabled

回答4:

Build your capybara-webkit with Qt 5.5.1 , there was an issue in < 5.3 or so where pseudo elements didn't provide any size to the link so there was nowhere to click it