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 代码通过了元素的两个 enabled/disabled 状态，这是不正确的，因为预期的结果是检查元素是否被禁用。我不确定这里有什么问题。

Answer 1

正如@lostlemon 所解释的，当有多个匹配项时，就会出现这种情况。

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

您也可能有匹配的不可见元素。所以expect语句应该改写成这样：

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

Testcafe 无法确定某个元素是启用还是禁用

Testcafe unable to determine if an element is enabled or disabled

testing

automated-tests

e2e-testing

testcafe

web-testing