Write a For Loop in Cypress

Last Updated : 23 Sep, 2024

A for loop is a common control structure in programming that allows us to repeat actions multiple times. In Cypress, we can utilize JavaScript's for loop to perform repetitive actions such as interacting with multiple DOM elements, iterating through arrays, or executing assertions.

Example of For Loop in Cypress

Example 1: Checking the Text of Multiple Buttons

HTML Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Check</title>
</head>
<body>
    <button id="button-1">Button One</button>
    <button id="button-2">Button Two</button>
    <button id="button-3">Button Three</button>
</body>
</html>

Cypress Test Code

JavaScript

describe('Button Text Check', () => {
  it('should check the text of all buttons', () => {
    // Visit the page where the buttons are located
    cy.visit('http://localhost:3000/button-check.html');
    
    // Create an array with the expected button texts
    const buttonTexts = ['Button One', 'Button Two', 'Button Three'];
    
    // Use a for loop to check each button's text
    for (let i = 1; i <= 3; i++) {
      cy.get(`#button-${i}`).should('have.text', buttonTexts[i - 1]);
    }
  });
});

Explanation

HTML: The page contains three buttons, each with unique IDs and text values.
Test Code:
- The test visits the page and stores the expected button texts in an array.
- The for loop iterates over the buttons (from 1 to 3), fetching each button by its ID and asserting that its text matches the expected value from the buttonTexts array.

Output

Cypress will check the text of each button and ensure it matches the expected values: "Button One", "Button Two", and "Button Three". If all assertions pass, the test will succeed.

Example 2: Submitting Multiple Forms

HTML Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Forms</title>
</head>
<body>
    <form id="form-1">
        <input type="text" name="name" placeholder="Name for Form 1">
        <button type="submit">Submit Form 1</button>
    </form>
    <form id="form-2">
        <input type="text" name="name" placeholder="Name for Form 2">
        <button type="submit">Submit Form 2</button>
    </form>
    <form id="form-3">
        <input type="text" name="name" placeholder="Name for Form 3">
        <button type="submit">Submit Form 3</button>
    </form>
</body>
</html>

Cypress Test Code

JavaScript

describe('Multiple Form Submission', () => {
  it('should fill and submit each form', () => {
    // Visit the page with multiple forms
    cy.visit('http://localhost:3000/multiple-forms.html');
    
    // Use a for loop to submit each form
    for (let i = 1; i <= 3; i++) {
      cy.get(`#form-${i} input[name="name"]`).type(`Test Name ${i}`);
      cy.get(`#form-${i} button[type="submit"]`).click();
      
      // Simulate form submission response
      cy.on('window:alert', (txt) => {
        expect(txt).to.contains(`Form ${i} submitted`);
      });
    }
  });
});

Explanation

HTML: The page contains three forms, each with a text input and a submit button.
Test Code:
- The test visits the page, iterates over the forms using a for loop, fills in each form's input field with a unique name, and clicks the submit button.
- After submission, Cypress checks for an alert message confirming the submission of the form.

Output

The Cypress test will simulate the form submission process for all three forms, typing unique values into each form's input and confirming submission via alert pop-ups.

Conclusion

Using a for loop in Cypress can greatly simplify repetitive tasks, such as checking multiple elements or submitting several forms. By iterating over elements, Cypress tests can be more efficient and reduce the amount of redundant code, making test maintenance easier.

Swift - For-in Loop

sachinyadavshiv8

Improve

Article Tags :

Write a For Loop in Cypress

Example of For Loop in Cypress

Example 1: Checking the Text of Multiple Buttons

Explanation

Output

Example 2: Submitting Multiple Forms

Explanation

Output

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?