In WebdriverIO, why does the `expect` line require an `await` in front of it to correctly test something?

Question

This is a somewhat advanced question about WebdriverIO and ES6 JavaScript promises:

I just followed the instructions on WebdriverIO to create the project:

npx wdio TryWDIO
cd TryWDIO

and then I modified the test file:

// test/specs/example.e2e.js

describe('Trying it', () => {
  it('should have some text', async () => {
    await browser.url('https://www.amazon.com');
    const elem = await $('body');

    await expect(elem).toHaveTextContaining('Best Sellers');
  });
});

and run it using

npm run wdio

and so the test passed.

And if I change that last line to

await expect(elem).toHaveTextContaining('BBBest Sellers');

The test failed as expected.

However, when that line is changed to:

expect(elem).toHaveTextContaining('BBBest Sellers');

then the test passed again.

Why is that? I thought whether we await or not, that promise should fail regardless.

And in fact it seems a bit fragile, because if a programmer forgot to put await there, the test passes but indeed it may not have passed. But somebody told me we can have a linting rule to guarantee it... but some hobbyist are going to write scripts and not going to use eslint to guard against that.

Answer 1

1. Your function is async, you should await for promises. Removing awaits has sense in sync mode. Answer about async and await
2. Sync mode is removed from wdio and NodeJS v16 Sync vs. Async Mode. So you will have to use async and await in further versions
3. I think you have a typo in expect(elem).toHaveTextContaining('Best Sellers');. If you want it to fail it should be expect(elem).toHaveTextContaining('BBBest Sellers');