Cypress测试中浏览器Token自动丢失导致登录后自动登出的替代解决方案咨询

First, let’s break down what’s likely happening here: your test completes the login flow, but the auth token gets cleared unexpectedly before you can verify the dashboard page. Since this is intermittent (80% failure rate) and manual testing works fine, it’s probably tied to timing, Cypress’s default browser state handling, or unhandled network events.

Here are several practical solutions beyond the temporary fix you mentioned:

1. Wait for the Login Request to Fully Complete #

Cypress can sometimes outpace your app’s backend/frontend token-processing logic. Instead of relying solely on URL changes, intercept the login API call to ensure the token is returned and processed before proceeding:

it('login successfully and stays logged in', function(){ 
  cy.visit('/login') 

  // Intercept the login API request to track its completion
  cy.intercept('POST', '/api/login').as('loginRequest')

  cy.get('[formcontrolname="username"]').type(Cypress.env('myuname')) 
  cy.get('[formcontrolname="password"]').type(Cypress.env('mypwd')) 
  cy.get('[type="submit"]').should('be.enabled').click() 

  // Wait for the login request to finish and validate the response
  cy.wait('@loginRequest')
    .its('response.statusCode').should('eq', 200)
    .its('response.body').should('have.property', 'token') // Adjust to match your API's response structure

  // Verify dashboard access and token persistence
  cy.url().should('include','/dashboard')
  cy.window().its('localStorage').invoke('getItem', 'authToken').should('exist') // Check token in localStorage
})

2. Preserve Auth-Related Cookies/LocalStorage #

Cypress automatically clears cookies and localStorage between tests by default, but even within a single test, it might accidentally clear state if your app uses non-standard storage keys. Explicitly preserve auth-related state:

beforeEach(() => {
  // Preserve cookies tied to authentication
  Cypress.Cookies.defaults({
    preserve: (cookie) => {
      return cookie.name === 'session_id' || cookie.name.includes('auth'); // Match your app's cookie names
    }
  })

  // For localStorage: prevent automatic clearing of auth tokens
  cy.on('window:before:load', (win) => {
    const existingToken = win.localStorage.getItem('authToken');
    if (existingToken) win.localStorage.setItem('authToken', existingToken);
  })
})

3. Slow Down Input to Mimic Real User Behavior #

Cypress’s type command runs extremely fast, which might skip frontend validation or event handlers your app relies on to persist the token. Add a small delay to simulate real user input:

cy.get('[formcontrolname="username"]').type(Cypress.env('myuname'), { delay: 100 }) 
cy.get('[formcontrolname="password"]').type(Cypress.env('mypwd'), { delay: 100 }) 

You can also validate input field values before submitting to ensure the form is fully processed:

cy.get('[formcontrolname="username"]').should('have.value', Cypress.env('myuname'))
cy.get('[formcontrolname="password"]').should('have.value', Cypress.env('mypwd'))
cy.get('[type="submit"]').should('be.enabled').click() 

4. Track Unexpected Logout Requests #

To pinpoint when the token is cleared, intercept any logout API calls and check if they’re triggered unexpectedly during the test:

it('login and verify no unexpected logout', function(){ 
  cy.visit('/login') 

  // Intercept logout requests to monitor them
  cy.intercept('POST', '/api/logout').as('logoutRequest')

  // ... perform login steps ...

  cy.url().should('include','/dashboard')
  
  // Wait a few seconds to check for unintended logout requests
  cy.wait(3000)
  cy.get('@logoutRequest').should('not.have.been.called') // Ensure no logout is triggered
})

If a logout request is detected, inspect its headers/body to trace the trigger (e.g., a frontend timeout, invalid token check, etc.).

5. Disable Experimental Session Isolation (If Enabled) #

If you’re using Cypress’s experimental sessionAndOrigin feature, it might cause unexpected state resets. Try disabling it in your cypress.config.js:

module.exports = {
  e2e: {
    experimentalSessionAndOrigin: false,
    // ... other config options ...
  }
}

6. Encapsulate Login in a Reusable Custom Command #

For multi-role testing, create a reliable login command that ensures consistent state for each user. This reduces flakiness and simplifies role switching:

Cypress.Commands.add('loginAs', (username, password) => {
  cy.visit('/login')
  
  cy.intercept('POST', '/api/login').as('login')
  
  cy.get('[formcontrolname="username"]').type(username, { delay: 50 })
  cy.get('[formcontrolname="password"]').type(password, { delay: 50 })
  cy.get('[type="submit"]').should('be.enabled').click()
  
  cy.wait('@login').its('response.statusCode').should('eq', 200)
  cy.url().should('include', '/dashboard')
  cy.window().its('localStorage.authToken').should('exist')
})

Use it in tests like this:

it('test admin dashboard', function(){
  cy.loginAs(Cypress.env('adminUname'), Cypress.env('adminPwd'))
  // ... test admin-specific views ...
})

it('test user dashboard', function(){
  cy.loginAs(Cypress.env('userUname'), Cypress.env('userPwd'))
  // ... test user-specific views ...
})

Start with the first two solutions (intercepting the login request and preserving auth state)—they’re the most likely to resolve intermittent timing-related issues. If those don’t work, move on to tracking logout requests or adjusting input speed.

内容的提问来源于stack exchange，提问作者Sebaorgo