Cypress : How to know if element is visible or not in using If condition?

Cypress is a frontend automation testing framework. It does not natively support traditional conditional statements (such as if), as it operates in an asynchronous JavaScript environment. Conditional checks in Cypress typically rely on its chaining commands and assertions. If you wish to execute different commands based on whether an element exists, you can use the .then() method to access the state of the current command queue and implement your own logic.

Here is an example of how to determine the execution logic based on the existence of an element in Cypress:

javascript
// Check if the element exists
cy.get('body').then($body => {
  // If the element exists
  if ($body.find('.my-element').length) {
    // Execute code when the element exists
cy.get('.my-element').click();
  } else {
    // Execute code when the element does not exist
    // For example: click another button or log a message
cy.get('.other-button').click();
  }
});

In this example, the .then() method is used to access the DOM and perform checks. We first attempt to get the body element, then within the callback of .then(), we check for the existence of elements with the .my-element class. By checking the length of elements with the .my-element class, we can determine if they exist to decide the execution logic. If they exist, execute certain actions (e.g., click on it); if not, you may need to execute other actions (e.g., click an alternative button or log a message). This allows you to control the test flow based on whether elements exist on the page.

Here's an example code snippet:

javascript
isElementVisible(xpathLocator) {
    this.xpath(xpathLocator).should('be.visible');
};

isElementNotVisible(xpathLocator) {
    this.xpath(xpathLocator).should('not.exist');
};

Then use these methods with if statements as follows:

javascript
if (isElementNotVisible(locator)) {
}

or

if (isElementVisible(locator)) {
}

Cypress allows jQuery to manipulate DOM elements, which can be beneficial for you:

javascript
cy.get("selector_for_your_button").then($button => {
  if ($button.is(':visible')){
    // you reach this point only if the button is visible
  }
});

Update: You need to distinguish between existing buttons and visible buttons. The following code distinguishes three scenarios: (exists and visible, exists but invisible, does not exist). If you want to pass the test when the button does not exist, you can do this: assert.isOk('everything', 'everything is OK').

javascript
cy.get("body").then($body => {
  if ($body.find("selector_for_your_button").length > 0) {   
    // evaluates as true if button exists at all
    cy.get("selector_for_your_button").then($header => {
      if ($header.is(':visible')){
        // you reach this point only if the button EXISTS and is VISIBLE
      } else {
        // you reach this point only if the button EXISTS but is INVISIBLE
      }
    });
  } else {
    // you reach this point if the button DOESN'T EXIST
    assert.isOk('everything', 'everything is OK');
  }
});