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

【问题标题】：Capybara Webkit not detecting CSS updates when DOM changesCapybara Webkit 在 DOM 更改时未检测到 CSS 更新
【发布时间】：2019-03-10 06:10:06
【问题描述】：

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

该功能在实时浏览器中运行良好（在 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> 上设置一个切换类 (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，但在父级上存在切换类时更改为 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)

Capybara 向其抛出错误：

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.

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

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

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

我正在使用：

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

谢谢！

【问题讨论】：

标签： jquery css ruby-on-rails capybara capybara-webkit

【解决方案1】：

capybara-webkit 基本上相当于一个 7 年前的 Safari 版本（由于它是基于 QtWebkit 构建的，很久没有更新了）。因此它不支持很多现代 JS/CSS，而后者恰好包括 flex box。因此，display: flex 将被视为无效并被忽略。

如果您从使用 capybara-webkit 切换到使用 selenium 和无头 chrome 或 firefox 进行无头测试，您将可以更轻松地测试您的应用。

【讨论】：