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.
OutputExample 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.
OutputConclusion
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.
Similar Reads
How to write a for loop in ES6 ? Loops are the way to do the same task again and again in a cyclic way. A loop represents a set of instructions that must be repeated. In a loop’s context, a repetition is termed an iteration. There are mainly two types of loops: Entry Controlled loops: In this type of loop the test condition is test
3 min read
How to wait for a page to load in Cypress? In Cypress, waiting for a page to fully load is essential to ensure that the necessary DOM elements are available for interaction and that any asynchronous content (such as API responses or resources) has been fetched. While Cypress automatically waits for the page to load when using commands like c
4 min read
Swift - For-in Loop The for-in loop in Swift is very similar to for loop in Python. In Python, we write for iteration in range(). Here iteration is just a variable for iteration. In swift, also we write for iteration in range. We have collections like sets, arrays, dictionaries, so we can iterate their items using a fo
6 min read
For loop in R For loop in R Programming Language is useful to iterate over the elements of a list, data frame, vector, matrix, or any other object. It means the for loop can be used to execute a group of statements repeatedly depending upon the number of elements in the object. It is an entry-controlled loop, in
5 min read
Reports in Cypress Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for unit tests and integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.It's built to w
5 min read