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