Близкий модальный с капибарой


У меня есть модал, который закрывается при нажатии на его оверлейный div. Наложение распространяется на всю страницу, но ниже самого модала. Я хочу закрыть этот модал в своих тестах, и важно, чтобы он закрывался при нажатии на оверлей.

# modal, simplified
<div class="modal-container" id="modal">
  <div class="overlay"></div>
  <div class="content">Content</div>
</div>

Когда модал закрывается, его тег стиля читает "display: none"

# modal, closed
<div class="modal-container" id="modal" style="display:none;">
  <div class="overlay"></div>
  <div class="content">Content</div>
</div>

Я не смог закрыть эту модальность в капибаре. Я пытался:

1. page.execute_script("$('.overlay').trigger('click')")
2. page.evaluate_script("$('.overlay').trigger('click')")
3. find('.overlay').trigger('click')
4. page.driver.click(10, 10)

Опции 1 и 2 работают, когда я запускаю их в консоли браузера, но только не в моих тестах.

Когда я подглядываю в своем тесте, я нахожу следующее:

find('.overlay')
=> #<Capybara::Element tag="div">
page.has_content?("modal content")
=> true
find('.overlay').trigger('click')
=> "click"
find('.overlay')
Capybara::ElementNotFound: Unable to find css ".overlay"
page.has_content?("modal content")
=> true

Сон тоже не помог:

sleep(3)
page.evaluate_script("$('.overlay').trigger('click')")
sleep(3)
display = page.execute_script("document.getElementById('modal').style.display")

expect( display ).to eq("none")

Какие-нибудь мысли?

RSpec 2, Капибара, Полтергейст 1.5.1

2 3

2 ответа:

Наиболее вероятная проблема заключается в том, что, когда вы вручную делаете это в pry, вы достаточно медленны, чтобы событие click наложения было добавлено к тому моменту, когда вы его нажмете, следовательно, это приводит к исчезновению модала. Ваши тесты, вероятно, выполняются достаточно быстро, чтобы наложение было нажато до добавления события click.

Вам либо нужно будет добавить явный sleep(n) перед щелчком по нему (не лучшее решение), либо найти какой-то способ программного определения, когда страница готов к тому, что наложение будет нажато.

Это сработало для меня:

page.evaluate_script("$('#ModalID').modal('hide')")