Is element visible Vs Is element exist in Testcafe

Is element exist in Testcafe

Selector.exists function return boolean value and check element is exists or not on the page. To verify and find the exact results will use ok() or notOk() function below is the example.

await t.expect(selector.exists).ok();

Let’s create a Testcafe automation script to verify an element or list of elements is available on the page or not.

TestScenario:

  • Navigate to URL.
  • Verify login button is exists on the home page.
fixture `Login Page Auatomation`
    .page(config.url)

 test.only('Verfiy login button is exists on home page', async t => {
    
        await t    
           .wait(10000)   
           .expect(loginPage.LoginBtn.exists).ok();         
    })
    .meta('smoke', 'true').meta('platform', 'Web');

If the Login button is available on the home page it will pass otherwise testcase will fail.

Is element visible in Testcafe

.exists function only checks the element in the dom it is not responsible for the visibility of the element. To check is element visible or not in Testcafe let’s try a below simple line of code.

below are ways to check the visibility of an element in Testcafe

By using element.with({visibilityCheck: true} Attributes

await t.expect(element.with({visibilityCheck: true}).exists).ok();

By using element.visible function

await t.expect(element.visible).ok();

Another custom way using Try and Catch for better results

async ISDataAvailable(){
      var checkString
  await t .wait(5000)
   try {
    await t.expect(element.exists).ok()
    checkString = "NoData"
   } catch (error) {
    checkString = "Data"
   }
   return checkString
  }

Difference between Is element visible and Is element exist in Testcafe

IsElementExist checks the elements are available or not into the dom object of the page.

IsElementVisible Checks the elements are visible or on the web page.

Example:

await t.expect(element.visible).ok();
await t.expect(element.exists).ok();

element.visible is not recommended in the current testcafe version. it is my personal view because I am getting the expected results it might fix in the future.