Cypress获取Token存本地存储 Mock登录数据实现跳过登录页自动测试

你已经完成了通过接口拉取登录态写入本地存储的核心逻辑，不需要走UI登录流程，也不需要经过存在iframe兼容问题的首页，按以下步骤调整即可实现自动鉴权直达目标页：

1. 封装跳过登录的通用访问命令 #

在现有Commands.js的getToken命令后新增通用命令，解决本地存储作用域初始化、全局异常拦截的问题：

Cypress.Commands.add('visitWithAuth', (targetPath, username = defaultUsername, password = defaultPassword) => {
  // 全局拦截未捕获异常，屏蔽iframe相关js报错中断测试
  Cypress.on('uncaught:exception', () => false)
  // 先访问同域下无重定向的轻量静态路径，初始化localStorage作用域，避免存储的登录态不被页面识别
  cy.visit('/robots.txt', { failOnStatusCode: false })
  // 调用已实现的getToken命令，拉取真实有效登录态写入本地存储
  cy.getToken(username, password)
  // 直接跳转至目标测试页面，全程不经过登录页、首页
  cy.visit(targetPath)
})

为什么先访问/robots.txt：Cypress在未访问过目标域名的情况下直接操作localStorage，会出现存储作用域不匹配的问题，导致后续页面加载时读不到登录态触发重定向。选静态资源路径是因为这类路径不会触发前端路由跳转，不会加载存在iframe问题的首页内容。

2. 业务测试用例直接调用命令访问目标页 #

除了专门测试登录功能的用例外，所有业务页面的测试用例不需要再访问登录页，直接在钩子函数里调用封装好的命令，传入目标页面路径即可：

/// <reference types="cypress"/>

describe('目标业务页面测试', () => {
  beforeEach(() => {
    // 替换成你实际要测试的页面路径，比如'/agent/call-record'
    cy.visitWithAuth('/your-target-page-path')
  })

  it('页面正常加载核心模块', () => {
    // 直接写目标页面的断言逻辑，不需要处理登录、首页重定向、iframe报错问题
    cy.get('.target-page-container').should('be.visible')
  })
})

3. 优化：用官方会话缓存提升测试速度 #

可以替换原有cypress-localstorage-commands的存储逻辑，用Cypress官方的cy.session缓存登录态，整个测试集只需要请求一次登录接口，后续用例直接复用缓存，执行速度提升明显：

// 在support入口文件（e2e.js/support/index.js）添加全局钩子
beforeEach(() => {
  Cypress.on('uncaught:exception', () => false)
  // 缓存默认测试账号的登录态
  cy.session('default_test_user', () => {
    cy.getToken()
  }, {
    // 校验缓存是否有效
    validate: () => {
      expect(localStorage.getItem('dt.admin.token')).to.not.be.null
    },
    // 缓存失效时自动重新拉取登录态
    recreate: () => {
      cy.getToken()
    }
  })
})

加了全局缓存后，visitWithAuth命令可以简化，不需要每次都重新请求登录接口：

Cypress.Commands.add('visitWithAuth', (targetPath) => {
  cy.visit('/robots.txt', { failOnStatusCode: false })
  // 直接从缓存恢复登录态
  cy.session('default_test_user')
  cy.visit(targetPath)
})

注意事项 #

• 专门测试登录功能的Login.spec.js不需要调整，保持原有逻辑即可，跳过登录的逻辑仅用于其他业务页面测试
• 不要在注入登录态前访问根路径/，避免触发首页重定向加载iframe导致报错
• 如果前端路由加载时会额外请求用户信息、权限菜单接口，可以提前通过cy.intercept mock固定返回值，避免接口请求时序问题导致鉴权失败

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