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

Question

加载页面后，我有一些代码可以根据 xhr 返回的数据运行、隐藏和显示各种项目。

我的集成测试看起来像这样：

it "should not show the blah" do
    page.find('#blah').visible?.should be_true
end 

当我手动转到此测试运行的上下文中的页面时，#blah 不如我预期可见。我怀疑 Capybara 正在查看页面的初始状态（在本例中不可见），评估 DOM 的状态并在 JS 运行之前测试失败。

是的，我设置了 :js =>; true 在包含描述块上:)

任何想法将不胜感激！我希望我不必在这里故意拖延，这感觉不稳定并且会减慢速度。

Answer 1

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

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

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

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

Answer 2

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

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

特别是对于更复杂的查找，例如

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

断言元素已被隐藏。

Answer 3

如果您想检查某个元素是否在页面上但不可见，则 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)

Answer 4

可见意味着不明显

失败可能来自于对可见或不可见内容的误解，因为它不明显，驱动程序不便携，并且记录不足。一些测试：

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的：

• 以前为false（看到both可见和不可见元素），
• 目前为true
• 控制通过Capybara.ignore_hidden_​​elements选项。

参考。

完整的可运行测试在我的 GitHub 上。

Answer 5

使用：

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

我有一个 Rails 应用程序，其中有一个链接，单击该链接应提交 AJAX post 请求并返回 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 向用户发送通知状态消息（cucumber-rails gem 内置
Capybara 支持）

我试图测试具有 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断言元素的属性，它显示了如何以原始方式检查元素的属性。

我还在水豚文档中找到了可见的？方法（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.

因此我得出的结论是，在测试元素的可见性时
不靠水豚的可见结果吗？使用 CSS 选择器时的方法
并使用链接中建议的解决方案 capybara 断言元素的属性

我想出了具有以下内容：

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

Answer 6

您可能需要查看这篇文章，其中提供了等待所有 ajax 请求完成的示例方法：

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

Answer 7

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

Answer 8

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

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

基本上，它使用水豚默认等待时间来查找应该出现的内容，如果它不存在，它将重试您的单击。

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