Sync issues while checking contents of multiple text nodes in capybara

Question

We have a quick search box on the page that filters the list of results from a previous search using an AJAX call.

We tried several methods for checking the contents of the modified list.

At the beginning there is a list, for example, for example. this:

<div class="search-list"> <div class="entry"> <div class="job-title">Manager</div> ... </div> <div class="entry"> <div class="job-title">Slave</div> ... </div> </div> 

After a quick search, the entire search-list will be replaced with an AJAX response when you delete the second entry div.

We are trying to verify this condition with the following statement:

 page.find('.search-list .job-title').map(&:text) =~ ['Manager'] 

but it only sees the state before the AJAX request. This is likely due to the fact that the condition is checked immediately, without waiting for the completion of the AJAX request. We tried several methods, for example, the parameters of the Selenium driver resynchronize .

Sleeping 10 in front of the specified line works, but this is an unclean solution. We do not currently know how to do this, anyone else?

Answer 1

I use a helper method using wait_until to wait for ajax to finish, then do my test.

So maybe something like:

 page.wait_until { page.evaluate_script "jQuery.active == 0" } page.find('.search-list .job-title').map(&:text) =~ ['Manager'] 

wait_until wait until the true block is returned (although it will be a bit later). You can also pass it a wait_until(5) timeout wait_until(5) to exit after the allotted time.

You may also be able to extend Capybara's waiting time.

 Capybara.default_wait_time = 10 

---

Update for Angular.js

angular.element.active == 0 works the same.

jQuery.active == 0 stil works in Angular.js, but not sure if this is because I have jQuery as part of my javascript libraries.