Cypress测试时LocalStorage未清除导致二次运行自动登录问题

问题根因 #

你之前的清除逻辑无效，核心是三个问题：

• 清除的存储类型不全：你只调用了clearLocalStorage()和clearCookies()，但从你贴的存储面板截图可以看到，触发自动登录的bluelibs-token存储在Session Storage中，LocalStorage的清除逻辑完全不会触及这个值。
• 清除时机错误：你把清除逻辑写在cy.visit('/')之前的before()钩子里，在未加载目标站点页面前，Cypress无法访问对应站点的存储上下文，此时执行的清除命令不会作用到站点实际存储的数据上，等于无效操作。
• 钩子作用范围不匹配：before()钩子仅在当前测试套件的第一个用例执行前触发一次，后续用例运行时根本不会执行这段清除逻辑，状态残留是必然的。

修复方案 #

1. 调整清除逻辑的位置与覆盖范围 #

把全量存储清除逻辑移到beforeEach()钩子中，在每次访问页面前清空所有类型的客户端存储，再执行页面跳转，代码如下：

// 删除原来写在before()里的清除逻辑
beforeEach(() => {
  // 清空所有Cookie
  cy.clearCookies()
  // 清空所有LocalStorage数据
  cy.clearLocalStorage()
  // 清空SessionStorage，Cypress无原生清除命令，通过页面上下文执行清除
  cy.window().then(win => {
    win.sessionStorage.clear()
  })
  // 所有存储清除完成后再访问目标页面
  cy.visit('/')
})

it('First Test Case', () => {
  cy.contains('Sign In').click();
  // 此时无有效token，页面会正常停留在未登录态，可正常进入登录流程
})

2. 开启Cypress默认测试隔离（适配Cypress 12+版本） #

如果你使用的是Cypress 12及以上版本，可以在配置文件中确认开启测试隔离，框架会自动在每个用例执行前重置所有页面上下文、清空存储，从根源避免状态残留：

// cypress.config.js
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    testIsolation: true, // 开启后每个用例前自动重置页面状态
    // 其余原有配置保持不变
  },
});

3. 稳妥性增强（推荐） #

如果你的应用服务端也会保存登录会话，可以在清除客户端存储后，主动请求登出接口清除服务端会话，避免服务端侧的状态残留：

beforeEach(() => {
  cy.clearCookies()
  cy.clearLocalStorage()
  cy.window().then(win => win.sessionStorage.clear())
  // 主动请求登出接口，清除服务端会话
  cy.request({
    url: '/api/logout',
    failOnStatusCode: false // 未登录状态下请求登出不阻断测试
  }).then(() => {
    cy.visit('/')
  })
})

调整完成后，每次测试运行前所有认证相关的存储都会被完全清除，访问根路径时会因为无有效token正常展示未登录状态，不会直接跳转至账户页，登录流程可以正常执行。

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