How to wait till an element appears after an AJAX

问题:

The capybara method, wait_until doesn't seems to work for capybara-webkit. Is there any alternate solution for that, or any Javascript implementations?

Intentionally need some replacement for sleep, e.g. sleep 2.

回答1:

You can take a look at this solution wrapped up by Thoughtbot: here

I found it very useful.

回答2:

If your AJAX call results in a change to the DOM, Capybara will wait for it if you do

page.should have_selector?("some selector")

It is an intentional Capybara feature that it waits (up to Capybara.default_wait_time) for have_selector? and related methods to be true.

If your AJAX call does not result in a change to the DOM, there's no way to wait for it on the browser side using Capybara. You might be able to detect when the AJAX call is complete in Javascript and somehow communicate that to Capybara, but that would couple your test and implementation rather tightly. A common approach in this case is to wait for the server-side effect of your AJAX call (creation or update or deletion of a model object, sending of an email, etc.) to take place. Since Capybara can't see the server side you have to wait for the server-side change yourself.

In Capybara 1 you can use Capybara's wait_until to wait for the server-side change. wait_until was removed from Capybara 2. I posted an implementation of wait_until in my answer to Why does adding "sleep 1" in an after hook cause this Rspec/Capybara test to pass?

回答3:

Maybe something like this:

# AJAX BEGIN
  expect(page).to have_selector('form#new_user_video .submit > .throbber')
  expect(page).to_not have_selector('form#new_user_video .submit > .throbber')
  # AJAX END

Manually in your js code set 'ajax:send' (append throbber) and 'ajax:success' (remove throbber). This way you'll be able to know when request is finished.

And you should set enough time for ajax to complete:

Capybara.default_wait_time = 5