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?

score 4 · Answer 1 · answered Jan 13 '17 at 00:16

4

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'

answered Jan 13 '17 at 00:16

ascherman

1,762
2
20
41

I had to use `find('.glyphicon.glyphicon-trash').click` to work – GuiGS Sep 05 '17 at 13:24

score 2 · Accepted Answer · answered Apr 14 '16 at 10:42

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.

score 0 · Answer 3 · answered Feb 22 '17 at 16:14

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

score -1 · Answer 4 · answered Apr 13 '16 at 23:50

-1

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

answered Apr 13 '16 at 23:50

Thomas Walpole

48,548
5
64
78

Alas, I am using Q5 5.5.1_1 and just to be sure, I rebuilt Capybara and Webkit using http://stackoverflow.com/a/33643674/1299362, and this did not solve the problem. – Obromios Apr 14 '16 at 02:06
I can vouch for the comment here, 551 does not solve this issue. (we hacked around and added a min-width: 1px; for icons in our test run via a page.evaluate_script injection on visit. – 安杰帅 May 17 '17 at 20:18

Capybara-webkit cannot handle link with bootstrap glyphicon

4 Answers4

Linked