Cypress基于Token的身份认证在多测试用例执行时失效问题

异常现象 #

写的测试用例可正常执行、所有断言都能通过校验，但存在明确的状态异常：

• before 钩子执行阶段，浏览器面板可观测到认证token已经完成写入
• 进入正式测试用例（Test 1）执行环节时，登录态已经完全失效，页面呈现未认证状态
• 核心疑问：当前的认证逻辑实现是否存在错误？有没有通用方案能在所有测试执行前稳定完成用户身份认证，避免这类状态丢失问题？

已定位的问题根因 #

本次异常的核心触发原因：

• 写入存储认证信息的键值__auth_token相比站点实际读取的键名，少了一个下划线，键名匹配失败
• 这类键名错误不会触发Cypress的执行报错，代码可以正常跑完全流程、所有断言也能通过校验，但因为键名和站点预期的不一致，站点根本读取不到你写入的认证信息，最终没有呈现预期的已认证效果

当前代码的其他潜在缺陷 #

就算修正键名，现有实现的执行顺序也存在逻辑bug：

1. 现在的逻辑是先写入localStorage，再执行cy.visit()加载目标站点—— 但Cypress执行cy.visit()时，会重置当前域下的存储上下文，提前写入的token会被直接清空，根本留不到页面加载完成的阶段
2. 用cy.then()包裹window.localStorage.setItem的写法没有必要，反而会打乱Cypress的命令执行队列时序，导致状态不同步

稳定的全局认证实现方案 #

要在所有测试执行前稳定完成认证、避免登录态丢失，可以参考以下实现逻辑：

• 把写入认证信息的时机，调整到cy.visit()的onBeforeLoad回调中。这个回调会在目标站点的所有前端脚本加载、初始化之前触发，此时写入的token不会被站点的初始化流程清空
• 如果需要减少重复的登录流程，可把认证逻辑封装为自定义Cypress命令，结合Cypress提供的会话持久化能力实现全局只完成一次认证，后续所有用例直接复用已保存的登录态
• 修正后的代码参考：

/// <reference types="cypress" />
const token = '6232i3232j3hg23g2jh3gj2hg3jg2jg3j23'

describe('Basic authentication Test', () => {
  beforeEach(() => {
    cy.viewport(1280, 720)
    // 调整token写入时机到页面加载前的回调中
    cy.visit('https://youtube.com', {
      onBeforeLoad: (win) => {
        // 键名需和站点实际读取的认证存储键完全一致，不要漏写下划线
        win.localStorage.setItem('__auth_token', token)
      }
    })
  })

  it('Test 1 - Should load webpage 1 correctly', () => {
    cy.get('div')
  })
})

注意：如果站点的认证信息同时存在cookie、sessionStorage中，也要通过同样的onBeforeLoad时机完成写入，不要提前在cy.visit()之前直接操作全局window对象，避免被页面加载流程清空。

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