如何阻止Cypress删除Cookie与缓存以维持登录会话

问题根源 #

Cypress默认会在每个it()测试块执行前重置浏览器上下文，自动清除所有Cookie、localStorage和缓存，这就是跨测试块操作时登录会话丢失的核心原因。

解决方案 #

1. 合并测试步骤到单个it()块 #

最直接的方式是把所有操作放在同一个测试块里，避免跨块的上下文重置：

describe('go to the function', () => {
  const username = 'username'
  const password = 'password'

  it('complete flow to target function', () => {
    // 访问登录页
    cy.visit('/')

    // 输入账号密码登录
    cy.get('.kt-form > :nth-child(1) > .form-control').type(username)
    cy.get('.kt-form > :nth-child(2) > .form-control').type(password)
    cy.get('.kt-login__actions > .btn').click()

    // 全局处理异常（建议移到全局配置，避免重复编写）
    Cypress.on('uncaught:exception', (err, runnable) => {
      return false;
    })

    // 进入管理页
    cy.get('.kt-header__topbar-user').click()
    cy.get('.kt-nav__link-text').should('be.visible').click()

    // 确认弹窗并进入目标功能
    cy.get('.swal2-confirm').should('be.visible').click()
    cy.get('.kt-menu__nav > :nth-child(3) > .kt-menu__link').click()
  })
})

2. 使用Cypress.Cookies.preserveOnce()保留指定Cookie #

如果必须拆分测试块，可以在登录后保留会话Cookie，让后续测试块复用：

describe('go to the function', () => {
  const username = 'username'
  const password = 'password'

  it('login and preserve session', () => {
    cy.visit('/')
    cy.get('.kt-form > :nth-child(1) > .form-control').type(username)
    cy.get('.kt-form > :nth-child(2) > .form-control').type(password)
    cy.get('.kt-login__actions > .btn').click()

    // 替换成你的实际会话Cookie名称，比如'auth_token'
    Cypress.Cookies.preserveOnce('your_session_cookie_name')
  })

  it('go to admin page', () => {
    Cypress.on('uncaught:exception', (err, runnable) => {
      return false;
    })
    cy.get('.kt-header__topbar-user').click()
    cy.get('.kt-nav__link-text').should('be.visible').click()
  })

  it('Go to function that I need', () =>{
    cy.get('.swal2-confirm').should('be.visible').click()
    cy.get('.kt-menu__nav > :nth-child(3) > .kt-menu__link').click()
  })
})

3. 全局配置保留Cookie #

在cypress.config.js中设置全局Cookie白名单，让所有测试块都保留指定Cookie：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 禁用站点隔离，避免Cookie跨域问题
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--disable-site-isolation-trials')
        }
        return launchOptions
      })
    },
    // 全局保留指定Cookie
    cookies: {
      preserve: ['your_session_cookie_name', 'another_required_cookie']
    }
  }
});

4. 封装登录命令配合before()预登录 #

更优雅的方式是把登录逻辑封装成自定义命令，在整个测试套件开始前执行一次登录，后续所有测试块复用会话：

1. 在cypress/support/commands.js中添加自定义命令：

Cypress.Commands.add('login', (username, password) => {
  cy.visit('/')
  cy.get('.kt-form > :nth-child(1) > .form-control').type(username)
  cy.get('.kt-form > :nth-child(2) > .form-control').type(password)
  cy.get('.kt-login__actions > .btn').click()
})

2. 在测试文件中使用：

describe('go to the function', () => {
  const username = 'username'
  const password = 'password'

  // 整个测试套件开始前登录一次
  before(() => {
    cy.login(username, password)
    // 全局处理异常
    Cypress.on('uncaught:exception', (err, runnable) => {
      return false;
    })
  })

  it('go to admin page', () => {
    cy.get('.kt-header__topbar-user').click()
    cy.get('.kt-nav__link-text').should('be.visible').click()
  })

  it('Go to function that I need', () =>{
    cy.get('.swal2-confirm').should('be.visible').click()
    cy.get('.kt-menu__nav > :nth-child(3) > .kt-menu__link').click()
  })
})

额外建议 #

• 尽量避免在每个测试块中重复处理uncaught:exception，可以移到cypress/support/e2e.js中全局配置
• 确认你的应用使用的会话存储方式（Cookie或localStorage），如果是localStorage，可以通过自定义逻辑保留，或在全局配置中禁用自动清除

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