cy.session() for session caching in Cypress - Build an Automation Script

Automate login with session caching using cy.session()

Preconditions (3)

Step 1: Visit the login page at '/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 '/dashboard'

Step 6: Log out by clicking the logout button with id 'logoutBtn'

Step 7: Visit the login page again at '/login'

Step 8: Use cy.session() to restore the previous login session

Step 9: Visit '/dashboard' directly and verify the user is still logged in

✅ Expected Result: The user logs in successfully once, the session is cached, and subsequent visits restore the session without requiring login again. The URL after login is '/dashboard'. After logout, the session is cleared and login is required again.

Automation Requirements - Cypress

Assertions Needed:

Verify URL is '/dashboard' after login

Verify session is cached and reused on subsequent visits

Verify user is logged out after clicking logout

Verify login page is shown after logout

Best Practices:

Use cy.session() to cache login session

Use selectors by id for stability

Use explicit assertions for URL and element visibility

Avoid hardcoded waits; use Cypress automatic waits

Structure test with beforeEach to handle session setup

Automated Solution

Cypress

describe('Login with session caching using cy.session()', () => {
  const username = 'testuser';
  const password = 'Test@1234';

  function login() {
    cy.visit('/login');
    cy.get('#username').type(username);
    cy.get('#password').type(password);
    cy.get('#loginBtn').click();
    cy.url().should('include', '/dashboard');
  }

  beforeEach(() => {
    cy.session('user-session', login);
  });

  it('should login and cache session', () => {
    // Session is created in beforeEach
    cy.visit('/dashboard');
    cy.url().should('include', '/dashboard');
    cy.get('#logoutBtn').should('be.visible');
  });

  it('should logout and require login again', () => {
    cy.visit('/dashboard');
    cy.get('#logoutBtn').click();
    cy.url().should('include', '/login');
    // After logout, session should be cleared
    cy.session('user-session', login, { cacheAcrossSpecs: false });
  });
});

The test suite uses cy.session() to cache the login session under the name 'user-session'.

The login function performs the login steps: visiting the login page, entering credentials, clicking login, and verifying the dashboard URL.

In beforeEach, cy.session() runs the login function only if the session is not cached, speeding up tests by reusing the session.

The first test verifies that after session caching, visiting '/dashboard' shows the dashboard page and logout button.

The second test logs out by clicking the logout button, verifies the URL returns to '/login', and clears the session cache to ensure login is required again.

Selectors use stable IDs, and assertions check URL and element visibility to confirm correct behavior.

Common Mistakes - 4 Pitfalls

Not using cy.session() and logging in before every test

Using unstable selectors like CSS classes that change often

Using cy.wait() with fixed time instead of relying on automatic waits

Not clearing session after logout

Bonus Challenge

Now add data-driven testing with 3 different sets of valid user credentials using cy.session()

Show Hint