使用 Capybara 关闭模态

Question

我有一个模式，当它的覆盖 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>

我无法在 Capybara 中关闭此模式。我试过了：

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、Capybara、Poltergeist 1.5.1

Answer 1

最可能的问题是，当您手动执行此操作时，您的速度足够慢，以至于在您单击叠加层的点击事件时已经添加了它，因此它会导致模态框消失。您的测试可能执行得足够快，以至于在添加点击事件之前就已经点击了叠加层。

您要么需要在点击之前添加一个明确的sleep(n)（不是最佳解决方案），要么找到某种方式以编程方式确定页面何时可以点击覆盖。

Answer 2

这对我有用：

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