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.

Knitting

Do you have any other disabled buttons on the page? If I'm understanding the docs correctly, the selector is matching both 'button' and 'button with Add Person', and then determining if any of those matches have the disabled attribute. See the note after first withText example: devexpress.github.io/testcafe/documentation/test-api/… Additionally, this github issue: github.com/DevExpress/testcafe/issues/1071 – Rus

What I understood from the documentation of withText is it will look for elements which contains text (here Add Person). It could also pass text Add Person People but it will not look for element matching for just button. I also tried withExactText but tests passed in both cases again. And I double-checked that there are no elements with the same text Add Person in the page. – Knitting

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();

Spradlin