当 DOM 更改时，水豚 Webkit 未检测到 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 在单击按钮时在顶层 <div> 设置一个切换 class (location-card--menu-open)。

$(".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，但当切换 class 出现在父项上时更改为 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.

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

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

知道为什么 Capybara 或底层浏览器可能无法在 DOM 更改后重新应用 CSS 逻辑吗？

我正在使用：

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

谢谢！

Answer 1

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

如果您从使用 capybara-webkit 切换到 selenium with headless chrome 或 firefox 进行无头测试，您将更容易测试您的应用程序。

当 DOM 更改时，水豚 Webkit 未检测到 CSS 更新

Capybara Webkit not detecting CSS updates when DOM changes

css

jquery

ruby-on-rails

capybara

capybara-webkit

HTML

JS

CSS

RSpec / 水豚