How to add test case grouping in Cypress

In Cypress, adding test case groups primarily relies on the describe and context functions. These two functions are essentially equivalent, both used to define a group of related test cases. This approach not only organizes and modularizes test code but also enhances clarity in presenting test logic and structure.

Example

Suppose we need to test a user login feature; we can group related test cases together:

javascript
describe('User Login Feature', () => {
  before(() => {
    // Executed before all test cases in this group run, such as visiting the login page
    cy.visit('https://example.com/login');
  });

  it('should verify that the login page is displayed correctly', () => {
    // Test if the login page loads successfully
    cy.contains('h1', 'Login');
  });

  it('should display an error message when incorrect credentials are entered', () => {
    // Enter incorrect username and password, expect error message
    cy.get('input[name="username"]').type('wronguser');
    cy.get('input[name="password"]').type('wrongpassword');
    cy.get('form').submit();
    cy.contains('Login failed');
  });

  it('should navigate to the homepage upon successful login', () => {
    // Enter correct username and password, expect navigation to homepage
    cy.get('input[name="username"]').clear().type('correctuser');
    cy.get('input[name="password"]').clear().type('correctpassword');
    cy.get('form').submit();
    cy.url().should('include', '/homepage');
  });

  afterEach(() => {
    // Executed after each test case, such as cleaning up the test environment
    cy.clearCookies();
  });
});

Explanation

In this example, describe('User Login Feature', () => {...}) defines a test case group containing three test cases:

1. should verify that the login page is displayed correctly: Verifies the login page loads successfully.
2. should display an error message when incorrect credentials are entered: Tests if an error message appears when invalid credentials are provided.
3. should navigate to the homepage upon successful login: Confirms navigation to the homepage after valid login.

Using the before() and afterEach() hook functions, you can initialize the test environment before the group runs (e.g., visiting the login page) and clean up after each test case (e.g., clearing cookies), which ensures test independence and repeatability.

By implementing this structure, test cases become better organized, with each test focusing on its specific behavior, resulting in a clearer and more maintainable test structure.