Testcafe expect 如果使用 await 则通过，但如果方法链接则不通过

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.