title: How can I waitFor an element to have children with Geb?
body: <p>I'm executing a test that runs a functional use of a "click to add" feature.
  The user is given a table of items that allow them to click an "Add" button to add the item to their cart.</p>
  
  <p>The button executes an ajax call to append the item to the user's cart. When the item is added successfully, the item is then displayed in the Cart UI. The Cart UI is essentially another table.</p>
  
  <pre><code>//pseudo code
  $('.addButton').on('click', function (event) {
      $.ajax({
          url:...,
          success: updateCart
      });
  });
  function updateCart (data) {
      // use data to create tr_fragment
      $("#cart-ui-target").append(tr_fragment); //new row
  }
  </code></pre>
  
  <p>What I've tried is in the <code>then</code> statement is use waitFor until the <code>#cart-ui-target</code> has a <code>&lt;tr&gt;</code> size greater or equal to 1:</p>
  
  <pre><code>waitFor(5) {$('#cart-ui-target').find('tr').size() &gt;= 1}
  </code></pre>
  
  <p>However, every once in a while the test fails with the following exception:</p>
  
  <pre><code>geb.waiting.WaitTimeoutException: condition did not pass in 5.0 seconds (failed with exception)
  </code></pre>
  
  <p>I've even tried to increase the waitFor time to 10 seconds with a 2 second interval, but it still doesn't work:</p>
  
  <pre><code>waitFor(10, 2) {$('#cart-ui-target').find('tr').size() &gt;= 1}
  </code></pre>
  
  <p>What can I do to make this a better wait and prevent the sporadic failures? </p>
  
  <p><strong>UPDATE</strong>
  This is what I'm seeing in the log info of phantomjs.</p>
  
  <pre><code>$('#cart-ui-target').find('tr').size()
  |                  |          |
  |                  []         0
  [[[[[PhantomJSDriver: phantomjs on LINUX (113358b0-7bf1-11e4-a10e-9f2b2537fa31)] -&gt; tag name: html]] -&gt; css selector: #cart-ui-target]]
  </code></pre>