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

Practice

1. What is the main reason to preserve state between tests in Cypress?

easy

A. To clear all cookies after each test

B. To make tests dependent on each other

C. To avoid repeating login steps and speed up test execution

D. To disable assertions in tests

Solution

1. Step 1: Understand test state preservation

   Preserving state means keeping some data like cookies so tests don't repeat setup steps.

2. Step 2: Identify the benefit

   Keeping state avoids repeating login or setup, making tests faster and more efficient.

3. Final Answer:

   To avoid repeating login steps and speed up test execution -> Option C

4. Quick Check:

   Preserving state = faster tests [OK]

Hint: Preserve state to skip repeated steps and save time [OK]

Common Mistakes:

• Thinking tests should be dependent on each other
• Believing preserving state clears cookies
• Assuming preserving state disables assertions

2. Which of the following is the correct syntax to preserve a cookie named 'session_id' only once in Cypress?

easy

A. Cypress.Cookies.preserveOnce('session_id')

B. cy.preserveCookie('session_id')

C. Cypress.preserveCookieOnce('session_id')

D. cy.Cookies.preserve('session_id')

Solution

1. Step 1: Recall Cypress cookie preservation method

   The correct method to preserve cookies once is Cypress.Cookies.preserveOnce.

2. Step 2: Match method and argument

   The method takes the cookie name as a string argument, e.g., 'session_id'.

3. Final Answer:

   Cypress.Cookies.preserveOnce('session_id') -> Option A

4. Quick Check:

   Preserve once = Cypress.Cookies.preserveOnce [OK]

Hint: Use Cypress.Cookies.preserveOnce('cookieName') to keep cookies once [OK]

Common Mistakes:

• Using cy.preserveCookie which does not exist
• Mixing method names like preserveCookieOnce
• Calling preserve on cy.Cookies which is invalid

3. Given the following Cypress test code, what will be the output of the second test?

describe('Test Suite', () => {
  beforeEach(() => {
    Cypress.Cookies.preserveOnce('token')
  })

  it('Test 1: Set cookie', () => {
    cy.setCookie('token', 'abc123')
  })

  it('Test 2: Check cookie', () => {
    cy.getCookie('token').should('have.property', 'value', 'abc123')
  })
})

medium

A. Test 2 passes because the 'token' cookie is preserved

B. Test 2 fails because cookies are cleared between tests

C. Test 2 throws a syntax error

D. Test 2 passes but the cookie value is empty

Solution

1. Step 1: Analyze cookie preservation in beforeEach

   The beforeEach hook preserves the 'token' cookie between tests using Cypress.Cookies.preserveOnce('token').

2. Step 2: Understand cookie setting and checking

   Test 1 sets the cookie 'token' to 'abc123'. Test 2 checks the cookie value. Since the cookie is preserved, the check passes.

3. Final Answer:

   Test 2 fails because cookies are cleared between tests -> Option B

4. Quick Check:

   PreserveOnce keeps cookie for next test [OK]

Hint: Preserve cookie in beforeEach to keep it for next test [OK]

Common Mistakes:

• Assuming cookies clear automatically between tests
• Thinking preserveOnce clears cookies
• Confusing syntax causing errors

4. You wrote this code to preserve cookies but the second test fails because the cookie is missing:

beforeEach(() => {
  Cypress.Cookies.preserveOnce('auth_token')
})

it('Login test', () => {
  cy.setCookie('auth_token', 'xyz789')
})

it('Dashboard test', () => {
  cy.getCookie('auth_token').should('exist')
})

What is the likely cause of the failure?

medium

A. The cookie is set after the beforeEach hook runs, so it is not preserved

B. The cookie name is misspelled in preserveOnce

C. Cypress cannot preserve cookies between tests

D. The assertion syntax is incorrect

Solution

1. Step 1: Understand when preserveOnce runs

   The beforeEach hook runs before each test, so it preserves cookies existing before the test starts.

2. Step 2: Analyze cookie setting timing

   The cookie is set inside the first test, after beforeEach runs, so it is not preserved for the next test.

3. Final Answer:

   The cookie is set after the beforeEach hook runs, so it is not preserved -> Option A

4. Quick Check:

   PreserveOnce must run after cookie set [OK]

Hint: Set cookies before preserveOnce runs to keep them [OK]

Common Mistakes:

• Thinking preserveOnce preserves cookies set during the test
• Assuming Cypress can't preserve cookies
• Blaming assertion syntax instead of timing

5. You want to preserve multiple cookies named 'token' and 'user_id' across all tests without calling preserveOnce in every test. Which is the best way to do this in Cypress?

hard

A. Disable cookie clearing globally with Cypress.config

B. Call Cypress.Cookies.preserveOnce('token', 'user_id') in each test

C. Set cookies again in every test manually

D. Use Cypress.Cookies.defaults({ whitelist: ['token', 'user_id'] }) in support file

Solution

1. Step 1: Understand preserving multiple cookies globally

   Using Cypress.Cookies.defaults with a preserve array keeps specified cookies across all tests automatically.

2. Step 2: Compare with other options

   Calling preserveOnce in every test is repetitive. Manually setting cookies each time is inefficient. Disabling cookie clearing globally is not recommended.

3. Final Answer:

   Use Cypress.Cookies.defaults({ whitelist: ['token', 'user_id'] }) in support file -> Option D

4. Quick Check:

   Defaults preserve multiple cookies globally [OK]

Hint: Use Cypress.Cookies.defaults to preserve cookies globally [OK]

Common Mistakes:

• Calling preserveOnce repeatedly instead of defaults
• Manually resetting cookies each test
• Trying to disable cookie clearing globally