wait for a few seconds before running next step protractor

What function do you use to wait for a few seconds before running next step in protractor. I have a span with a text and I want to wait for the text to be changed from an external source before I check for it again.

HTML:

<div> <button type="submit" onclick="promptTransaction()">Load Transaction</button> <button type="submit" onclick="handleMessage()">Post Message</button> <select name="messageType"> <option>Submit</option> <option>Amount</option> </select> <div><b>Sending message to hosted page:</b><span>waiting...</span></div> <div><b>Receiving message from hosted page:</b><span>waiting...</span></div>
</div>

so when I click the 'post message' button, I should receive a new text from external source and change the span with a classname 'message-in'.

Currently, my test looks like this:

 element(by.cssContainingText('button','Post Message')).click().then(function() { //WAIT FOR 10 seconds element(by.css('.message-box .message-in')).getText().then(function (text) { var response = JSON.parse(text); expect(response.type).toBe('msax-cc-result'); expect(response.value.Transaction).toBe('Tokenize'); expect(response.value.CardToken).not.null(); }) });

Also, in the text result that is returned from external source, I converted it to json object, but can't since there is a '\' on it, is there a way to remove it before converting it into an object.

passed data:

{"type":"msax-cc-result","value":"{\"Transaction\":\"Tokenize\",\"CardToken\":\"ba9c609f-45fc-49aa-b8b2-ecaffbc56d43\"}"}

1 Answer

Usually this is browser.sleep(N), but it is generally speaking not recommended to introduce hardcode delays between browser actions. A better mechanism is an Explicit Wait - waiting for a specific condition to be met on a page using browser.wait() which would periodically check the expected condition status until a timeout happens. Comparing to browser.sleep(), browser.wait() would stop waiting immediately after the wait condition becomes truthy.

For instance, if you know what text to wait for,textToBePresentInElement should fit:

var EC = protractor.ExpectedConditions;
var elm = $(".message-out");
browser.wait(EC.textToBePresentInElement(elm, "Some message"), 5000);

Or, you may for instance, wait for waiting... not to be present in element:

browser.wait(EC.not(EC.textToBePresentInElement(elm, "waiting...")), 5000);

where 5000 is a timeout in milliseconds.