Capybara-webkit 无法处理与 bootstrap glyphicon 的链接

问题描述

我有一个链接:

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

如果我用一些文本(例如)用字形替换跨度'删除'，测试有效.这似乎与 Github 上一个未解决的问题有关，可能是这样做的用 CSS 覆盖可点击的 html 元素.但是，我无法理解在这种情况下这种叠加是如何发生的，或者如何纠正它.

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?

推荐答案

似乎人们通过修改测试来解决这个问题，要么使用 javascript 单击元素，要么更改上层项目的不透明度.相反，我选择了以下内容，它更多地依赖于 rails 功能.我写了一个 trash_icon 助手如下:

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

并将我的链接修改为:

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

这会测试除生产系统中使用的确切文本/图标之外的所有内容.

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.

这篇关于Capybara-webkit 无法处理与 bootstrap glyphicon 的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！