Capybara-webkit cannot handle link with bootstrap glyphicon

Question

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?

Answer 1

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.