如何在Cypress中设置sessionStorage？读取vuex返回null的问题

• Cypress存在双上下文隔离机制：测试代码默认执行在Cypress自身的Node.js控制层上下文，和被测Web应用运行的浏览器页面上下文完全独立，直接在测试顶层写sessionStorage.getItem("vuex")，访问的是Cypress工具页的存储内容，根本碰不到目标应用的sessionStorage，自然会返回null。
• 执行时序错位：即便代码进入了页面上下文，如果执行时机早于被测应用自身往sessionStorage写入vuex字段的时间，也会读到null。多数单页应用的Vuex store初始化、sessionStorage持久化操作是在页面组件挂载后异步完成的，并非DOM加载完成就立刻写入。

这类操作完全可以正常实现，核心是确保代码在正确的上下文、正确的时机执行：

• 所有sessionStorage读写操作，必须绑定到被测应用的窗口实例上执行，不能直接调用全局的原生存储API。
• 根据测试场景选择合适的执行时机，避免修改后的值被应用初始化逻辑覆盖。

基础修改代码示例 #

cy.window().then((win) => {
  // 兼容值不存在的边界，避免JSON.parse空值报错
  const rawStore = win.sessionStorage.getItem("vuex")
  const storeData = rawStore ? JSON.parse(rawStore) : {}
  // 修改目标参数
  storeData.country = "DE"
  // 写回页面sessionStorage
  win.sessionStorage.setItem("vuex", JSON.stringify(storeData))
})

场景适配优化 #

如果需要在页面刷新、路由跳转后保留修改的存储值，建议将修改逻辑放到cy.visit()的onBeforeLoad回调中执行——这个时机介于页面框架加载完成、业务初始化逻辑启动之间，既拥有sessionStorage的操作权限，也不会被应用后续的初始化流程覆盖写入值：

cy.visit("/your-app-entry", {
  onBeforeLoad: (win) => {
    const storeData = { country: "DE" }
    win.sessionStorage.setItem("vuex", JSON.stringify(storeData))
  }
})

常见误区提醒：不要直接在Cypress测试代码顶层用console.log(sessionStorage.getItem("vuex"))验证结果，这类输出读到的始终是Cypress工具页的存储值，会造成“写入失败”的误判。验证时同样需要通过cy.window()切到页面上下文读值确认。

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