Question

I am writing request specs … I use Capybara… And I am in trouble with some modal windows.

What I actually want in my test is to fill in a form that pops up in a modal window.

The modal is created with Bootstrap from Twitter (http://twitter.github.com/bootstrap/javascript.html#modals)… and it’s going through a set of transitions (but I don’t know if this is relevant to what I’m about to say).

I have tried a few workarounds I found on the web, like:

A) switching between pages with page.driver.browser.window_handles

page.driver.browser.switch_to.window(page.driver.browser.window_handles.last)

B) using wait_until to make sure that the modal loads

def modal_wrapper_id
  '#modal-edit'
end

def modal_visible
  wait_until { find(modal_wrapper_id).visible? }
rescue Capybara::TimeoutError
  flunk 'Expected modal to be visible.'
end

but none of those worked… so I thought to render the number of window handles at the moment when the modal window is active…

So I did this:

puts page.driver.browser.window_handles.length.should == 2 

And I got this:

Failure/Error: page.driver.browser.window_handles.length.should == 2
           expected: 2
           got: 1 (using ==)

From what I understand, practically my modal window doesn’t exist.

Any help on this one would be much appreciated.

Thank you.

Answer 1

I didn’t use Capybara, but your problem has to do with the fact that Bootstrap’s modal dialog is actually a pseudo-modal, in that it’s actually just a div element and a transparent overlay behind it. A true modal dialog would be one created using window.confirm, for example, which can indeed be queried using your sample code. In your case you should give the modal div element an id, and use that as a handle to query it from Capybara and wait until its display is “block”. Didn’t test anything though.