option.timeout ignored waiting for Selector.withAttribute

Question

I have tried this every which way, but I can't get TestCafe to wait for the disabled attribute to be removed from an element.

This obviously blocks all further testing, since I need the button to be clickable before I can proceed in the flow.

fixture('create').page('locahost:3000');

test('one', async  => {
  const myIframe = Selector('#myIframe');

  await t
    .typeText('#input', 'words')
    .click('#update')
    .expect(myIframe.exists).ok('', { timeout: 10000 })
    .switchToIframe(myIframe)

  const activeStartButton = await Selector('#start').withAttribute('disabled');

  await t
    .expect(activeStartButton).notOk('', { timeout: 60000, allowUnawaitedPromise: true });
});

Regardless of whether I defined activeStartButton ahead of time, or add or remove await from the definition, put the selector directly in expect with or without await, separate this await block from the previous one or add it to the previous chain, TestCafe immediately throws an error atexpect(activeStartButton).notOk`

The error varies depending on my approach, but for this code:

AssertionError: start button remains disabled: expected [Function: __$$clientFunction$$] to be falsy"

Answer 1

Your code should look like this:

const selector = Selector('#start')
    .with({visibilityCheck: true});

await t
    .expect(selector.exists).ok({timeout: 10000}) // ensure the button is visible on the screen
    .hover(selector) // access to the button via the mouse
    .expect(selector.hasAttribute("disabled")).notOk({timeout: 10000}) // ensure the field is enabled
    .click(selector);

Maybe you should also have a look to say goodbye to flakyness