Capybara Webkit在DOM更改时未检测到CSS更新

Question

我有一个浮动菜单，当用户单击菜单按钮时，该菜单会弹出（下图中隐藏在浮动菜单后面的按钮）。

该功能在实时浏览器中运行良好（已在Firefox，Safari和Chrome上尝试过）。

但是，在使用Capybara-Webkit进行测试时，它似乎不起作用-菜单在单击时永远不可见

这是基本实现：

HTML

菜单是<ul>内的<div>

<div class="location-card">
  ...

  <div class="location-card__menu-btn">
    <%= inline_svg("icons/menu-btn-icon.svg", height: "20px", width: "20px") %>

    <ul class="location-card__menu">
      <li>Delete</li>
      <li>Open</li>
      <li>Share</li>
      ...
    </ul>
  </div>
</div>

JS

每点击一次按钮，简单的javascript / jquery就会在顶级location-card--menu-open上设置一个切换类（<div>）。

$(".location-card").on("click", ".location-card__menu-btn", function(e) {
  // Find the card element top-level div
  var card = $(e.currentTarget).parents(".location-card");

  // Set the toggle class 
  $(card).addClass("location-card--menu-open");
});

CSS

最后，菜单的CSS默认为display: none，但是当切换类出现在父级时，其CSS更改为display: flex。

.location-card__menu {
  display: none;
  ...
}

.location-card--menu-open .location-card__menu {
  display: flex;
  ...
}

RSpec /水豚

在测试时，请执行以下操作：

// Click the menu button
find(".location-card__menu-btn").click

// Verify that the menu opened and is visible
expect(page).to have_selector(".location-card__menu", visible: true)

水豚向其抛出错误：

expected to find visible css ".location-card__menu" within #<Capybara::Node::Element ... > but there were no matches. Also found "", which matched the selector but not all filters.

如错误所述，即使正确添加了toggle类，也可以找到该元素，但该元素不可见。即使在父级上存在切换类，也不会应用添加display: flex的CSS规则。

我可以通过删除display: none来默认显示菜单来验证这是问题所在，然后一切正常，测试通过。

有人知道，一旦DOM更改，为什么Capybara或底层浏览器可能无法重新应用CSS逻辑？

我正在使用：

• rspec-rails 3.4.0
• 水豚2.18.0
• capybara-webkit 1.15.0

谢谢！

Answer 1

capybara-webkit基本上等效于7年的Safari版本（由于QtWebkit是基于Safari构建的，因此没有长时间更新）。因此，它不支持很多现代的JS / CSS，恰好包括flex box。因此，display: flex将被视为无效并被忽略。

如果您从使用capybara-webkit换成无头铬或Firefox的硒进行无头测试，那么您的应用程序测试将更加轻松。