Capybara-webkit 无法处理 link with bootstrap glyphicon

Question

我有一个 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'

和以下功能规范代码

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 替换为字形图标，例如'Delete'，测试有效。这似乎与 Github 上未解决的 issue 有关，并且可能与 CSS 覆盖可点击的 html 元素有关。但是，我无法理解这种覆盖在这种情况下是如何发生的，也无法理解如何更正它。

在“编辑”或 'Delete' 等常见任务中使用图标已成为一种普遍做法，因此最好找到解决方案。

如何解决这个问题？

Answer 1

使用 Qt 5.5.1 构建你的 capybara-webkit，在 < 5.3 左右的版本中存在一个问题，伪元素没有为 link 提供任何大小，所以没有地方可以点击它

Answer 2

人们似乎通过修改测试以使用 javascript 单击元素或更改覆盖项目的不透明度来解决此问题。相反，我选择了以下内容，它更多地依赖于 rails 功能。我写了一个 trash_icon helper 如下：

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

并将我的 link 修改为：

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

这会测试除生产系统中使用的 text/icon 之外的所有内容。

不过，希望有人能提出一个不是解决方法的解决方案。

Answer 3

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

你可以做的就是使用这个：

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

而不是这个：

click_link 'delete_post'

Answer 4

除了@ariel_scherman 的回答之外，您不会忘记在测试示例的开头添加 js: true。

像这样：

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

这可以启用您的 javascript 驱动程序

Capybara-webkit 无法处理 link with bootstrap glyphicon

Capybara-webkit cannot handle link with bootstrap glyphicon

rspec

ruby-on-rails

twitter-bootstrap

capybara-webkit