Trouble interacting with Bootstrap modals via Capybara (v2)

Question

In a Rails application I\'m trying to test a Bootstrap modal with a jQuery TokenInput field in Rspec using Capybara with the capybara-webkit driver. The portion

Answer 1

We just do this and it seems to work (for example to click on $('.tp-header-login'):

# instead of find(".tp-header-login")

find(".tp-header-login") # still do the find so you are sure its loaded then...
execute_script "$('.tp-header-login').click()"

Answer 2

I suggest to add falowing css in test env:

  div, a, span, footer, header {
      -webkit-transition: none !important;
      -moz-transition: none !important;
      -ms-transition: none !important;
      -o-transition: none !important;
      transition: none !important;
  }

  .modal {
    display: none !important;
  }

  .modal.in {
    display: block !important;
  }

  .modal-backdrop {
    display: none !important;
  }

Add this js in the and of body:

$(".fade").removeClass("fade");

That has solved most of my problems with capybara and bootstrap.

Answer 3

Try disabling animations in test env, layouts/application.html.erb

<% if Rails.env.test? %>
 <style type="text/css">
    .modal.fade, .fade {
      -webkit-transition: opacity 0.01s;
      -moz-transition: opacity 0.01s;
      -ms-transition: opacity 0.01s;
      -o-transition: opacity 0.01s;
      transition: opacity 0.01s;
    }
 </style>
<%end%>

Answer 4

For those wishing to avoid Rails.env.___? hacks*, the following seemed to work (so far -- fingers crossed) in avoiding problems with testing jQuery UI drag-and-drop functionality on a Bootstrap-based modal.

First, we were already "waiting" for the modal to appear, using a helper method like this:

def wait_for_modal_to_appear
  modal = wait_until {
    # Look for the modal by ID/whatever...
  }
  raise Capybara::ModalNotFound.new('...') if modal.nil?
  return modal
end

Yet still, we were having spurious issues when trying to drag-and-drop elements in that modal. The following code addition, added just before the return line, seems to have done the trick:

page.execute_script("document.getElementById('#{modal[:id]}').classList.remove('fade');")

---

* Just such a hack recently led to the need for an emergency deployment at a company I work with... A bad code-change managed to make it into production because it was only activated by a if Rails.env.production? qualifier; it would have failed half of the test-suite otherwise.