Synchronization

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?

Visible/Hidden Element

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]

Enabled/Disabled Element

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

Wait to match

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

Wait on url

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