在一些 JS 运行后如何让 Capybara 检查可见性？

我认为这里的 find 语句是带有隐式等待的语句，因此 Capybara 会等到元素出现在页面上，但不会等待它变得可见。

在这里，您希望 Capybara 等待可见元素出现，这应该可以通过指定 visible 选项来实现：

expect(page).to have_selector('#blah', visible: true)

我还没有尝试过，但如果您希望 find 始终等待可见元素，ignore_hidden_elements 配置选项在这里也可能很有用。

---

这是另一种对我来说非常有效的方法：

find(:css, "#some_element").should be_visible

特别是对于更复杂的发现，例如

find(:css, "#comment_stream_list li[data-id='#{@id3}']").should_not be_visible

这将断言一个元素已被隐藏。

---

如果您想检查某个元素是否在页面上但不可见，visible: false 将无法按预期工作。让我有点难过。

这是如何做到的：

# assert element is present, regardless of visibility
page.should have_css('#some_element', :visible => false)
# assert visible element is not present
page.should have_no_css('#some_element', :visible => true)

---

可见的意思并不明显

失败可能来自对什么被认为是可见或不可见的误解，因为它是不明显的，不是驱动程序可移植的，并且记录不足。一些测试：

HTML：

<div id="visible-empty"                                                                   ></div>
<div id="visible-empty-background"      style="width:10px; height:10px; background:black;"></div>
<div id="visible-empty-background-same" style="width:10px; height:10px; background:white;"></div>
<div id="visible-visibility-hidden"     style="visibility:hidden;"                        >a</div>
<div id="visible-display-none"          style="display:none;"                             >a</div>

Rack 测试唯一认为不可见的是内联 display: none（不是内部 CSS，因为它不做选择器）：

!all('#visible-empty',                 visible: true).empty? or raise
!all('#visible-empty-background',      visible: true).empty? or raise
!all('#visible-empty-background-same', visible: true).empty? or raise
!all('#visible-visibiility-hidden',    visible: true).empty? or raise
 all('#visible-display-none',          visible: true).empty? or raise

Poltergeist 有类似的行为，但它可以处理内部 CSS 和 Js style.display 操作：

Capybara.current_driver = :poltergeist
!all('#visible-empty',                 visible: true).empty? or raise
!all('#visible-empty-background',      visible: true).empty? or raise
!all('#visible-empty-background-same', visible: true).empty? or raise
!all('#visible-visibiility-hidden',    visible: true).empty? or raise
 all('#visible-display-none',          visible: true).empty? or raise

Selenium 的行为完全不同：如果认为空元素不可见并且 visibility-hidden 以及 display: none：

Capybara.current_driver = :selenium
 all('#visible-empty',                 visible: true).empty? or raise
!all('#visible-empty-background',      visible: true).empty? or raise
!all('#visible-empty-background-same', visible: true).empty? or raise
 all('#visible-visibiility-hidden',    visible: true).empty? or raise
 all('#visible-display-none',          visible: true).empty? or raise

另一个常见的问题是 visible 的默认值：

它曾经是错误的（同时看到可见和不可见的元素），

目前是真的

由 Capybara.ignore_hidden_elements 选项控制。

Reference。

完整的可运行测试 on my GitHub。

---

使用：

 Ruby:     ruby 1.9.3dev (2011-09-23 revision 33323) [i686-linux]
 Rails:    3.2.9
 Capybara: 2.0.3

我有一个 Rails 应用程序，其中有一个链接，单击该链接应提交 AJAX 发布请求并返回 JS 响应。

链接代码：

 link_to("Send Notification", notification_path(user_id: user_id), remote: true, method: :post)

JS 响应（.js.haml 文件）应在链接存在的页面上切换以下隐藏 div：

 #notification_status(style='display:none')

js.haml 文件内容：

:plain
  var notificationStatusContainer = $('#notification_status');
  notificationStatusContainer.val("#{@notification_status_msg}");
  notificationStatusContainer.show();

我正在测试使用 Cucumber 向用户发送通知并向用户显示通知状态消息的场景（具有内置 Capybara 支持的 cucumber-rails gem）

我试图测试具有 id: notification_status 的元素在我的步骤定义中的成功响应中可见。为此，我尝试了以下语句：

page.find('#notification_status').should be_visible
page.should have_selector('#notification_status', visible: true)
page.should have_css('#notification_status', visible: true)
page.find('#notification_status', visible: true)
page.find(:css, 'div#notification_status', visible: true)

以上都没有为我工作并且我的步骤失败了。在上面列出的 5 个片段中，最后 4 个片段失败并出现以下错误：

'expected to find css "#notification_status" but there were no matches. Also found "", which matched the selector but not all filters. (Capybara::ExpectationNotMet)'

这很奇怪，因为以下语句正确传递：

page.has_selector?('#notification_status')

事实上，我使用

  print page.html

出现了

<div style='' id='notification_status'></div>

这是意料之中的。

最后我找到了这个链接 capybara assert attributes of an element，它显示了如何以原始方式检查元素的属性。

我还在 Capybara 文档中找到了可见的？方法 (http://rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Element#visible%3F-instance_method) 以下信息：

 Not all drivers support CSS, so the result may be inaccurate.

因此我得出的结论是，在测试元素的可见性时不要依赖 Capybara 的可见性结果？使用 CSS 选择器并使用链接 capybara assert attributes of an element 中建议的解决方案时的方法

我想出了以下内容：

 module CustomMatchers
   def should_be_visible(css_selector)
    find(css_selector)['style'].should_not include('display:none', 'display: none')
   end
 end

 World(CustomMatchers)

用法：

should_be_visible('#notification_status')

---

您可能想查看 this post，它提供了一个等待所有 ajax 请求完成的示例方法：

def wait_for_ajax(timeout = Capybara.default_wait_time)
  page.wait_until(timeout) do
    page.evaluate_script 'jQuery.active == 0'
  end
end

---

接受的答案现在有点过时了，因为“应该”是不推荐使用的语法。这些天你最好按照expect(page).not_to have_css('#blah', visible: :hidden)的方式做一些事情

---

这里的其他答案是“等待”元素的最佳方式。但是我发现这不适用于我正在开发的网站。基本上，需要点击的元素在其背后的功能完全加载之前是可见的。这是几分之一秒，但我发现我的测试有时运行得如此之快，以至于它点击了按钮，但什么也没发生。我设法通过做这个临时的布尔表达式来解决它：

if page.has_selector?('<css-that-appears-after-click>')
  puts ('<Some-message-you-want-printed-in-the-output>')
else
  find('<css-for-the-button-to-click-again>', :match == :first).trigger('click')
end

基本上它使用 capybara 默认等待时间来寻找应该出现的东西，如果它不在那里，它会重试你的点击。

我再说一遍，应该先尝试 should have_selector 方法，但如果它不起作用，试试这个

---