Testcafe unable to determine if an element is enabled or disabled

Question

I'm using the TestCafe 0.23.3. I'm trying to verify an element if it is enabled or disabled. Here is the HTML node of the element when it is disabled:

<button class="MuiButtonBase-root-415 MuiButtonBase-disabled-416 MuiButton-root-3719 MuiButton-text-3721 MuiButton-textPrimary-3722 MuiButton-flat-3724 MuiButton-flatPrimary-3725 MuiButton-disabled-3739" tabindex="-1" type="button" disabled=""><span class="MuiButton-label-3720">Add Person</span></button>

Here is the HTML node of the element when it is enabled:

<button class="MuiButtonBase-root-415 MuiButton-root-7365 MuiButton-text-7367 MuiButton-textPrimary-7368 MuiButton-flat-7370 MuiButton-flatPrimary-7371" tabindex="0" type="button"><span class="MuiButton-label-7366">Add Person</span><span class="MuiTouchRipple-root-778"></span></button>

Here is my TestCafe code to verify the element:

.expect(Selector('button').withText('Add Person').hasAttribute('disabled'))
.ok();

The above TestCafe code passes for both enabled/disabled state of the element which is incorrect as the expected result is to check if the element is disabled. I'm not sure what is the problem here.

Answer 1

As @lostlemon explained, such situation arises when there is multiple match.

To have only one match either use .withExactText('Add Person') or use a regex instead of a string literal.

It could also be possible that you have invisible element(s) that also matches. So the expect statement should be rewritten like this:

const button = Selector('button')
  .with({visibilityCheck: true})
  .withExactText('Add Person');
await t
  .expect(button.hasAttribute('disabled')).ok();