Capybara Webkit не обнаруживает обновления CSS при изменении DOM - PullRequest
Новая
       48

Capybara Webkit не обнаруживает обновления CSS при изменении DOM

0 голосов
/ 04 октября 2018

У меня есть плавающее меню, которое появляется, когда пользователь нажимает кнопку меню (кнопка скрыта за плавающим меню на изображении ниже).

enter image description here

Функциональность отлично работает в живом браузере (пробовал на 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 / Capybara

При тестировании я делаю следующее: 

// 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.

Как говорится в сообщении об ошибке, элемент найден, но не виден, хотя класс переключения добавлен правильно.Правило CSS, которое добавляет display: flex, не применяется, даже если класс-родитель существует.

Я могу убедиться, что это проблема, удалив display: none, чтобы меню отображалось по умолчанию, а затем все отлично работает и тест проходит.

Любая идея, почему Capybara или соответствующий браузерможет быть не удается повторно применить логику CSS после изменения DOM?

Я использую:

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

Спасибо!

1 Ответ

0 голосов
/ 04 октября 2018

capybara-webkit в основном эквивалентен 7-летней версии Safari (из-за QtWebkit, на которой он построен, не обновлявшейся долгое время).Как таковой он не поддерживает много современных JS / CSS, которые включают в себя flex box.Из-за этого display: flex будет считаться недействительным и игнорироваться.

Вам будет намного проще протестировать ваше приложение, если вы переключитесь с использования capybara-webkit на селен с безголовым хромом или firefox для вашего безголовоготестирование.

...