6

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.

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
Psdet
  • 659
  • 9
  • 24
  • 2
    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: https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#withtext Additionally, this github issue: https://github.com/DevExpress/testcafe/issues/1071 – lostlemon Feb 20 '19 at 18:32
  • 1
    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. – Psdet Feb 20 '19 at 21:31

1 Answers1

13

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();
hdorgeval
  • 3,000
  • 8
  • 17