Testcafe expect passes if await used but not if methods chained

Question

Take this Testcafe code:

test
    .page('https://testsite.com')
    ('button hidden after clicked', async t => {
        await t
            .expect(await Selector('button.cc-banner__button-accept').visible).ok({ timeout: 5000 })
            .setNativeDialogHandler(() => true)
            .click(await Selector('button.cc-banner__button-accept'))
            .expect(await Selector('button.cc-banner__button-accept').visible).notOk({ timeout:1000 });

The above fails when Testcafe runs.

However, the code below passes:

test
    .page('https://testsite.com')
    ('button hidden after clicked', async t => {
        await t
            .expect(await Selector('button.cc-banner__button-accept').visible).ok({ timeout: 5000 })
            .setNativeDialogHandler(() => true)
            .click(await Selector('button.cc-banner__button-accept'));
        await t
            .expect(await Selector('button.cc-banner__button-accept').visible).notOk({ timeout:1000 });

Why is this? Any ideas?

Answer 1

JS evaluates the real element value for Selector at the time of chain compiling. (JS works in this way). It means that the first test you evaluate calculates await Selector('button.cc-banner__button-accept').visible for the whole chain only once and then this value is used for checking. Since you get the value only once, the test fails as expected. You should remove await inside, before Selector inside assertions, as you can see in CLI warnings.