I have an if statement which checks that if element is visible, then do something else.

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

However, I'm noticing that in this case even though the element is visible on the page, TestCafe seems to wait for element to appear as defined in my testcaferc.json file.

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

Video where the page has loaded and the element is visible but TestCafe still waits before proceeding on:

https://recordit.co/Bbo9qZFWAL

If I switch to exists as seen below

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

Then TestCafe does not wait for 15 seconds and proceeds immediately.

Using visible does not always follow the same behavior though, sometimes TestCafe proceeds immediately without waiting for 15 seconds when the element is visible.

Any idea why visible acts this way in this example?

Thanks in advance for any response.

CodePudding user response：

The exists property and the visibility property work differently.

The exists only checks if the element is presented on the page. Meanwhile, the visibility property checks that the element is visible (does not have visibility:hidden or display: none), has clientWidth/clientHeight greater than 0, and is not overlapped by any other element.

Perhaps one of these conditions is not met in your case.

Please share your full example to reproduce the issue. It will allow me to research it further.