protractor - Should I await expect(<async>) conditions

Question

https://www.protractortest.org/#/async-await shows an example of using async/ await in protractor, but includes the line:

    expect(await greeting.getText()).toEqual('Hello Julie!');

But I don't understand how that can be correct: if the greeting.getText() is async (indicated by the await), then the text won't be known until after that line has completed. Isn't:

    await expect(await greeting.getText()).toEqual('Hello Julie!');

So we definitely wait for the text to be obtained (and checked) before we move on. In this example, it's not too important (assuming the expect check does execute), but in general, is there any risk of re-ordering the getText() with further operations (which may remove it from the DOM, for example).

Is it in practice safe if it's only browser-based async operations, as they execute serially anyway (so the getText() will complete before a subsequent operation?

Presumably if we included non-browser based async operations (e.g. we did a http request to a server), then the ordering wouldn't be guaranteed, so best practice would be to write 'await expect(...).toX(...)' (which is safe even if the expect expression is not async).

Of course, with all that, we end up with 'await' on the beginning of nearly every line, which looks a bit ugly.

Answer 1

expect(await greeting.getText()).toEqual('Hello Julie!');

is the correct way to go.

await stops execution queue and waits until first command is done before moving on to the second one, IN ORDER TO RESOLVE PROMISE. So if your function is synchronous and doesn't return a promise, why await it?

From protractor page, .getText() returns !webdriver.promise.Promise.<string> - long story short, it returns you a promise, thus it needs to be resolved

expect(await greeting.getText()).toEqual('Hello Julie!'); on the other hand returns undefined (try to console.log it). And since it doesn't return promise, and there is nothing to resolve, await is not needed

Additional example

Lets assume you want a synchronous function to take parameters:

someFunction("2" === "1", 1, await $welcomeMessage.getText());

First thing js does, is it runs each argument of the function as a separarte statement. i.e.

"2" === "1" // false
1 // 1
await $welcomeMessage.getText() // 'welcome user'

So by the time when function will be ready to be executed the overall statement will look like so

someFunction(false, 1, 'welcome user');

In other words, even though it looks like the function takes asynchronous promise which you need to wait for, in fact, this promise is resolved before it's executed. So if someFunction itself is synchronous, it doesn't need to be awaited