Preserving state between tests in Cypress - Build an Automation Script

Preserve user login state between tests

Preconditions (2)

Step 1: Open the login page at 'https://example.com/login'.

Step 2: Enter 'testuser' in the username input field with id 'username'.

Step 3: Enter 'Test@1234' in the password input field with id 'password'.

Step 4: Click the login button with id 'loginBtn'.

Step 5: Verify that the URL changes to 'https://example.com/dashboard'.

Step 6: Navigate to the profile page at 'https://example.com/profile'.

Step 7: Verify that the profile page shows the username 'testuser'.

Step 8: Reload the profile page.

Step 9: Verify that the user is still logged in and the username 'testuser' is displayed.

✅ Expected Result: User remains logged in after page reload and between tests without needing to log in again.

Automation Requirements - Cypress

Assertions Needed:

Verify URL after login is 'https://example.com/dashboard'.

Verify username 'testuser' is visible on profile page.

Verify user remains logged in after page reload.

Best Practices:

Use Cypress commands to preserve cookies or local storage between tests.

Use before() or beforeEach() hooks to set up login state once.

Avoid repeating login steps in every test by preserving session state.

Use clear and stable selectors like IDs for locating elements.

Use Cypress assertions with .should() for validation.

Automated Solution

Cypress

describe('Preserve user login state between tests', () => {
  before(() => {
    // Log in once before all tests
    cy.visit('https://example.com/login');
    cy.get('#username').type('testuser');
    cy.get('#password').type('Test@1234');
    cy.get('#loginBtn').click();
    cy.url().should('eq', 'https://example.com/dashboard');

    // Save cookies/local storage to preserve session
    cy.getCookies().then(cookies => {
      Cypress.Cookies.preserveOnce(...cookies.map(c => c.name));
    });
  });

  beforeEach(() => {
    // Preserve cookies before each test to keep session
    Cypress.Cookies.preserveOnce('session_id', 'auth_token');
  });

  it('should show username on profile page', () => {
    cy.visit('https://example.com/profile');
    cy.contains('testuser').should('be.visible');
  });

  it('should remain logged in after page reload', () => {
    cy.visit('https://example.com/profile');
    cy.reload();
    cy.contains('testuser').should('be.visible');
  });
});

The before() hook logs in the user once before all tests run. It visits the login page, enters credentials, clicks login, and verifies the dashboard URL.

After login, it saves cookies to preserve the session. The beforeEach() hook preserves important cookies like session_id and auth_token before each test to keep the user logged in.

The first test visits the profile page and checks that the username testuser is visible, confirming the user is logged in.

The second test reloads the profile page and verifies the username is still visible, confirming the login state is preserved after reload.

This approach avoids logging in before every test and uses Cypress best practices for session preservation.

Common Mistakes - 4 Pitfalls

Not preserving cookies or local storage between tests

Logging in before every test instead of once

Using unstable selectors like XPath or complex CSS selectors

Not asserting URL or page content after login

Bonus Challenge

Now add data-driven testing with 3 different user accounts to verify login state preservation for each.

Show Hint