Fill in an input text in a modal popin

Question

I'm triing to test a modal form with cucumber/capybara. The modal is loaded after page rendering. But the input text is not found.

Here is my sourcecode.

1. The view is rendering the modal

   <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" style="width:600px; padding:30px">Loading...</div>
   
   <script type="text/javascript">
     $(document).ready(function() {
       $('#myModal').modal('show');
       $('#myModal').html("<%= j render("form")%>");
     });
   </script>
   

2. The modal contains only a input text

   <input id="project_title" name="project[title]" type="text" value="">
   

3. The test is like this (I have tried differents methods in comments)

   # find(:css, "#project_title").set value
   # within("#myModal") do
   #   find(:css, "#project_title", visible: false).set value
   # end
   # sleep 3
   find(:css, "#project_title", visible: false).set value
   

The error is Unable to find css "#project_title" (Capybara::ElementNotFound) I have tried to put the input text in the div to test the selector, it works good. So, it is really a problem with the modal form.

Thanks for your help.

Eric

Answer 1

It might take some times to trigger the modal after the document is ready. To increase the chance, you may prolong the default wait time (which is 2 seconds by default).

Capybara.default_wait_time = 10

Hope this help.

Answer 2

You're setting Capybara to search for a hidden element, but the element is visible on the modal.

within("#myModal") do
  find(:css, "#project_title").set value
end

Or alternatively:

find("#myModal").find("#project_title").set value