How to Test Forms Using Cypress

Testing forms in Cypress involves simulating user interactions like typing into input fields, selecting options, and submitting the form. Here's a step-by-step example:

---

✅ 1. Basic Setup

First, ensure Cypress is installed in your project:

npm install cypress --save-dev

Then open Cypress:

npx cypress open

---

✍️ 2. Example Form HTML

Let’s assume you have a form like this:

<form id="loginForm">
  <input type="email" id="email" />
  <input type="password" id="password" />
  <button type="submit">Login</button>
</form>

---

🧪 3. Cypress Test for the Form

Create a test file in cypress/e2e/form_spec.cy.js:

describe('Login Form Test', () => {
  it('fills out and submits the form', () => {
    cy.visit('http://localhost:3000'); // Change URL as needed

    // Type into input fields
    cy.get('#email').type('test@example.com');
    cy.get('#password').type('Password123');

    // Submit the form
    cy.get('form').submit();

    // Assert something after submit
    cy.url().should('include', '/dashboard');
  });
});

---

🛠️ 4. Tips for Better Testing

• Use data-testid attributes for more stable selectors.

• Add assertions after submission (e.g., check success message, route change, etc.).

• Test for validation errors with invalid input.

---

📦 5. Sample Validation Test

it('shows error on empty input', () => {
  cy.visit('/login');

  cy.get('form').submit();

  cy.contains('Email is required');
  cy.contains('Password is required');
});

---

✅ Conclusion

Cypress makes form testing simple by mimicking user behavior. Practice by testing various forms with validations, edge cases, and different user flows.

Learn Cypress Course in Hyderabad

Read More 

Introduction to Cypress Test Runner

How Cypress Works Behind the Scenes

Installing Cypress: Step-by-Step Guide