Many actions in a modern web page are asynchronous. User presses a button and a moment later a result appears. In modern web pages there is no full page reload and only a portion of a page will be changed.If a test will try to assert a value after a user action, chances are assertion will fail since it will take time for a result to appear on a page.Question: How do users know that their action is done and they can move on?

One way to deal with asynchronous pages is to wait for a feedback to appear or disappear. calculation.start() calculation.feedback.waitToBe visible calculation.results.should == [100, 230]

Disabled input box and buttons can be used as a user feedback as well. calculation.open() calculation.input.waitToBe enabled calculation.input.setValue(100)

If presence/absence of an element is not important, you can directly to wait for a matcher to match. calculation.start() calculation.results.waitTo == [100, 230] Note: any matcher that you can use with should and shouldNot can be used with waitTo and waitToNot

Use change matcher when you want to wait for any change of a value without knowing the specifics. def number = $("#number-to-change") def trigger = $("#change-number") number.takeSnapshot() trigger.click() number.waitTo change > taking value snapshot by css #number-to-change . value snapshot is taken for by css #number-to-change (19ms) > clicking by css #change-number . clicked by css #change-number (222ms) > waiting for by css #number-to-change to change . by css #number-to-change changed (18ms)

Another cue to use could be a url change after an action. browser.open('/resource-creation') $('#new').click() browser.url.ref.waitTo == 'created-id' Note: url exposes other parts that you can browser/navigation#assert-url read more about here