testing - Testcafe 无法确定元素是启用还是禁用

Question

我正在使用 TestCafe 0.23.3。我正在尝试验证一个元素是启用还是禁用。这是禁用时元素的 HTML 节点:

<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>

这是启用时元素的 HTML 节点:

<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>

这是我用于验证元素的 TestCafe 代码:

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

上面的 TestCafe 代码同时传递了元素的启用/禁用状态，这是不正确的，因为预期结果是检查元素是否被禁用。我不确定这里有什么问题。

Answer 1

正如@loSTLemon 解释的那样，当有多个匹配时会出现这种情况。

要只有一个匹配项，请使用 .withExactText('Add Person')或使用正则表达式而不是字符串文字。

您也可能有不可见的元素也匹配。
所以应该像这样重写expect语句:

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