如何在Cypress测试间完全重置状态，解决测试顺序依赖问题？

针对测试依赖执行顺序、前端状态残留的问题，可通过以下方法实现测试间的完全状态隔离：

1. 每个测试前强制重置浏览器前端状态 #

放弃仅在文件开头执行一次的before，改用beforeEach确保每个测试启动前都清理状态：

beforeEach(() => {
  // 清除所有Cookie
  cy.clearAllCookies()
  // 清空LocalStorage和SessionStorage
  cy.window().then(win => {
    win.localStorage.clear()
    win.sessionStorage.clear()
  })
  // 先跳转到空白页卸载当前页面上下文，再回到应用初始路由
  cy.visit('about:blank')
  cy.wait(300) // 给浏览器足够时间完成页面卸载
  cy.visit('/') // 替换为你的应用根路径
})

about:blank能彻底卸载当前页面的所有JS实例和渲染视图，避免残留代码干扰后续测试。

2. 拦截第三方服务的Cookie注入 #

针对before块执行前第三方JS设置Cookie的问题，用Cypress拦截功能从根源阻止：

beforeEach(() => {
  // 拦截第三方域名的所有请求，移除Set-Cookie响应头
  cy.intercept('https://third-party-domain.com/**', (req) => {
    req.on('response', (res) => {
      delete res.headers['set-cookie']
    })
  })
  // 若第三方脚本不影响测试，可直接阻止加载
  // cy.intercept('https://third-party-domain.com/script.js', { statusCode: 404 })
})

3. 使用Cypress会话隔离创建全新浏览器上下文 #

Cypress 9+支持的cy.session能为每个测试创建独立的浏览器会话，彻底隔离状态：

beforeEach(() => {
  cy.session('isolated-test-session', () => {
    // 这里放置测试前的初始化操作（如登录）
    cy.visit('/login')
    cy.get('#username').type('test-user')
    cy.get('#password').type('test-pass')
    cy.get('#submit').click()
  }, {
    cacheAcrossSpecs: false, // 禁止跨测试文件缓存会话
    validate: () => {
      // 验证会话有效性，确保状态正确
      cy.get('#user-avatar').should('be.visible')
    }
  })
  // 每次测试回到初始页面
  cy.visit('/')
})

4. 启用Cypress严格测试隔离模式 #

在cypress.config.js中配置严格隔离，让Cypress自动处理测试间的状态重置：

module.exports = defineConfig({
  e2e: {
    experimentalSessionAndOrigin: true,
    testIsolation: 'strict', // 强制每个测试后重置浏览器状态
  }
})

该配置会自动清除Cookie、LocalStorage，卸载当前页面，无需手动编写清理逻辑。

5. 手动清理全局变量污染 #

若应用代码存在全局变量污染，可在beforeEach中手动重置：

beforeEach(() => {
  cy.window().then(win => {
    // 删除自定义全局状态变量
    delete win.appGlobalState
    // 重置第三方库状态（如第三方统计脚本）
    if (win.gtag) {
      win.gtag('reset')
    }
  })
})

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