Capybara-webkit无法处理带有Bootstrap glyphicon的链接。

Question

我有一个链接：

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'

和以下功能规范代码

page.accept_confirm do
  click_link 'delete_post'
end

我得到了以下错误

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']

如果我使用一些文本（例如“删除”）替换span中的glyphicon，则测试将正常工作。这似乎与Github上未解决的问题有关，可能与CSS覆盖可点击的html元素有关。但是，我无法理解在这种情况下如何发生覆盖以及如何进行更正。

现在使用图标执行常见任务（如“编辑”或“删除”）正在变得越来越普遍，因此找到解决方案将是很好的选择。

如何解决这个问题？

- Obromios

Answer 1

虽然Obromios的回答可以起作用，但我认为改变渲染图标的方式并不是一个好主意。特别是因为你需要在每个图标渲染中添加if Rails.env.test?才能使测试工作。

你可以尝试使用以下方法：

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

改为这样：

click_link 'delete_post'

- ascherman

---

我不得不使用 find('.glyphicon.glyphicon-trash').click 才能正常工作。 - GuiGS

Answer 2

看起来人们通过修改测试方法，以使用Javascript点击元素或更改覆盖物的不透明度来解决此问题。相反，我选择依赖Rails能力，并编写了一个以下代码的trash_icon助手：

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

并将我的链接修改为：

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

并测试：

page.accept_confirm do
  click_link 'proxy_for_trash_icon'
end

这个测试覆盖了除生产系统中使用的确切文本/图标之外的所有内容。

但愿有人能提出一种不是权宜之计的解决方案。

- Obromios

Answer 3

除了 @ariel_scherman 的回答之外，您还需要记得在测试示例的开头添加 js: true。

类似这样：

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

这使得您的JavaScript驱动程序可以启用

- Van_Paitin

Answer 4

使用Qt 5.5.1构建你的capybara-webkit，之前在5.3版本或更早的版本中存在一个问题，伪元素没有为链接提供任何大小，因此无法点击。

- Thomas Walpole

---

唉，我正在使用Q5 5.5.1_1版本，为了确保，我重新构建了Capybara和Webkit，使用http://stackoverflow.com/a/33643674/1299362，但这并没有解决问题。 - Obromios

我可以证实这里的评论，551并没有解决这个问题。（我们通过在访问时注入page.evaluate_script进行测试，并解决了图标的最小宽度问题。） - 安杰帅