Using if/else and for loops in Cypress tests

Cypress is a popular JavaScript testing framework that makes it easy to write end-to-end tests for web applications. As with any testing framework, you’ll likely need to use conditional logic and iteration in your tests to handle different scenarios and data sets. In this blog post, we’ll look at how to use if/else and for loops in Cypress to write more powerful and flexible tests.

if/else statements in Cypress tests

The if statement is a fundamental control flow statement in JavaScript that allows you to execute different code depending on a condition. In Cypress tests, you might use an if statement to check if an element is visible, or to branch your code depending on the result of a previous assertion.

Here’s an example of using an if statement to check if an element is visible:

it('checks if element is visible', () => {
  cy.get('#myElement')
    .then($el => {
      if ($el.is(':visible')) {
        // do something if element is visible
      } else {
        // do something else if element is not visible
      }
    });
});

In this example, we use cy.get() to select an element with the ID “myElement”, then we use a then() callback to perform some logic on the selected element. Inside the then() callback, we use an if statement to check if the element is visible using the $el.is(':visible') method. If the element is visible, we execute one block of code, and if it’s not visible, we execute another block of code.

for loops in Cypress tests

The for loop is another fundamental control flow statement in JavaScript that allows you to iterate over a collection of values. In Cypress tests, you might use a for loop to check multiple elements on a page, or to perform a series of actions on a collection of elements.

Here’s an example of using a for loop to iterate over a list of elements:

it('checks each item in a list', () => {
  cy.get('ul li').each(($li, index, $lis) => {
    if (index === 0) {
      // do something special for the first item
    }

    // do something with each item in the list
  });
});

In this example, we use cy.get() to select all <li> elements inside a <ul> element, then we use the each() method to iterate over each selected element. Inside the each() callback, we use an if statement to perform a specific action for the first item in the list, then we perform some other action on each item in the list.

Using if/else and for loops together

Of course, you’re not limited to using if/else and for loops separately in Cypress tests. In fact, you’ll often want to use them together to handle more complex scenarios. Here’s an example of using both statements in the same test:

it('checks multiple elements on a page', () => {
  cy.visit('https://www.example.com/');

  cy.get('h1').then($h1 => {
    if ($h1.text() === 'Welcome to Example.com') {
      cy.get('ul').each(($ul, index, $uls) => {
        if (index === 0) {
          // do something with the first <ul> element
        } else {
          // do something with the other <ul> elements
        }
      });
    } else {
      for (let i = 0; i < 3; i++) {
        // perform some action three times
      }
    }
  });
});

In this example, we first visit the example.com website, then we use an if statement to check if the page’s main heading matches a specific text. If it does, we use a for loop with each() to iterate over the page’s unordered lists (<ul> elements), performing different actions depending on whether we’re looking at the first list or a subsequent one. If the heading doesn’t match our expected text, we assume we’re on a login page (or some other form-based page) and submit the form using the submit() method.