代码之家  ›  专栏  ›  技术社区  ›  user2490003

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

  •  0
  • user2490003  · 技术社区  · 6 年前

    enter image description here

    该功能在实时浏览器中运行良好(在Firefox、Safari和Chrome上试用过)。

    然而,当使用水豚Webkit进行测试时,它似乎不起作用-菜单在单击时永远不可见

    基本实现如下:

    菜单是一个 <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>
    

    简单javascript/jquery设置一个toggle类( 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 当父级上存在toggle类时。

    .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类,元素仍被找到但不可见。添加 显示:flex 即使父级上存在toggle类,也不会应用。

    我可以通过删除 显示:无

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

    我正在使用:

    • rspec轨道3.4.0
    • 水豚webkit 1.15.0

    谢谢!

    1 回复  |  直到 6 年前
        1
  •  1
  •   Thomas Walpole    6 年前

    capybara-webkit 基本上相当于7年前的Safari版本(由于QtWebkit,它是建立在QtWebkit之上的,很久没有更新)。因此,它不支持很多现代的JS/CSS,而这些JS/CSS恰好包含flex-box。因为这个 display: flex 将被视为无效和忽略。

    水豚网套