Testcafe 在使用 .visible 时等待元素出现，即使该元素在加载页面上已经可见

Question

我有一个 if 语句来检查元素是否可见，然后执行其他操作。

if (await locators.courseHeaderEditButton.visible) {
  //code
}

但是，我注意到在这种情况下，即使元素在页面上可见，TestCafe 似乎也在等待元素按照我的 testcaferc.json 文件中的定义出现。

  "selectorTimeout": 15000,
  "assertionTimeout": 15000,

页面已加载且元素可见但 TestCafe 仍在等待的视频：

如果我切换到 exists 如下所示

if (await locators.courseHeaderEditButton.exists){
      //code
    }

然后TestCafe不等待15秒，直接进行。

虽然使用 visible 并不总是遵循相同的行为，有时 TestCafe 会在元素可见时立即继续而不等待 15 秒。

知道为什么 visible 在此示例中以这种方式运行吗？

提前感谢您的回复。

Answer 1

exists 属性和 visibility 属性的工作方式不同。

exists 只检查元素是否出现在页面上。同时，visibility 属性检查元素是否可见（没有 visibility:hidden 或显示：none），clientWidth/clientHeight 大于 0，并且是不与任何其他元素重叠。

您的情况可能不满足其中一个条件。

请分享您的完整示例以重现该问题。这将使我能够进一步研究它。

Testcafe waits for element to appear when using .visible even though the element already visible on the loaded page