Search code examples
rubyrspecmodal-dialogcapybarapoltergeist

Capybara - Div in modal found when using Selenium but not poltergeist

We have a site, and when clicking a link a modal appears

click $6/mo before modal enter image description here

After Modal

The modal

I'm trying to ensure that the modal is up by checking that the "Estimate My Payment" is present

<div class="modal fade modal-payment-options"
 id="mortgagePaymentModal"    tabindex="-1" role="dialog"
 aria-labelledby="mortgageModalLabel" aria-hidden="true"> <div
 class="modal-dialog modal-ad-lb"> <div class="modal-content"> <div
 class="modal-header"> <button type="button" class="close"
 data-dismiss="modal" aria-label="Close"
 id="estimate-modal-close-button"> <h2 id="mortgageModalLabel"
 class="modal-title">Estimate My Payment</h2>

Using Steps "Mortgage Loan Type' to 15 year Fixed Validate Remember Settings" do

Given 'I am a New User on a For Sale portait Tablet LDP and open payment modal'  do
  ResponsiveHelpers::resize_window_to_tablet_landscape
  visit '/realestateandhomes-detail/1049-E-Qa-Test-Pl_Binder_CA_00001_M10182-29255'
  click_link('mortgagePaymentPrice')
  wait_for_ajax
  **within('div.modal-content') {expect(page).to have_content('Estimate My Payment')}**

end

This works fine run in Selenium, but when I switch it over to poltergeist it always fails because it can't find the modal-content

 Failure/Error: within('div.modal-content') {expect(page).to have_content('Estimate My Payment')}
 Capybara::ElementNotFound:
   Unable to find css "div.modal-content"

Any suggestions, maybe it's a syntax issue?

Solution

  • Is your app using Bootstrap? I've just hit a similar problem today, and I suspect the Bootstrap modal animation may be causing the issue...this kind person explained it here:

    http://blog.crowdint.com/2013/09/20/poltergeist-and-bootstrap-modals.html