时间戳

首页 > 解决方案 > Capybara Webkit 在 DOM 更改时未检测到 CSS 更新

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

问题描述

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

在此处输入图像描述

该功能在实时浏览器中运行良好（在 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，但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，然后一切正常并且测试通过。

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

我在用着：

谢谢！

标签： jquerycssruby-on-railscapybaracapybara-webkit

解决方案

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

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

推荐阅读