Cypress测试中如何实现sessionStorage在不同测试用例间持久化

问题根因 #

Cypress默认在每个it()测试用例执行完成后，会重置页面上下文、清空包括Session Storage在内的存储数据，这是内置的测试隔离机制，避免用例之间互相干扰。你之前在before钩子中设置的存储数据只会在第一个用例中生效，beforeEach硬编码部分key无法覆盖登录后应用自动写入的其他Session Storage项，也会出现数据缺失问题。

可行解决方案 #

方案1：使用官方cy.session() API（推荐，Cypress 8.0及以上版本支持） #

cy.session()是官方专门用于缓存登录状态、存储数据的API，会自动持久化cookie、LocalStorage、Session Storage内容，避免每个用例重复执行登录流程。
修改后的代码示例：

describe('Quickpanel', () => {
    before(() => {
        // 把登录和前置操作都包在cy.session里，缓存所有生成的存储数据
        cy.session('userLoginState', () => {
            cy.visit(base_url, {onBeforeLoad: (window) => {
                window.sessionStorage.setItem('someInfo',
                `{"SubsId":${info[0]},"RId":${info[1]}}`)
               window.sessionStorage.setItem('loc', `${info[2]}`)
            }})
            LoginPage
                .login(login_username, login_password)
            Navbar
                .clickOnBookingsSubLink('Beta Calendar')
                .verifyCalendarLoads()
                .clickBookReservationButton()
                .verifyQuickPanelIsOpen()
        })
    })

    // 每个用例执行前先访问对应页面，存储数据会自动恢复
    beforeEach(() => {
        cy.visit(base_url + '/your-target-page')
    })

    it('测试用例1', () => {
        // 你的测试逻辑
    })

    it('测试用例2', () => {
        // 此时Session Storage数据不会丢失
    })
})

如果需要关闭全局测试隔离，可以在cypress.config.js中添加配置：

module.exports = defineConfig({
  e2e: {
    testIsolation: false
  }
})

方案2：手动实现Session Storage的存储与恢复（兼容低版本Cypress） #

如果使用的Cypress版本不支持cy.session，可以手动在钩子函数中实现数据的备份和恢复：

describe('Quickpanel', () => {
    before(() => {
        cy.visit(base_url, {onBeforeLoad: (window) => {
            window.sessionStorage.setItem('someInfo',
            `{"SubsId":${info[0]},"RId":${info[1]}}`)
           window.sessionStorage.setItem('loc', `${info[2]}`)
        }})
        LoginPage.login(login_username, login_password)
        Navbar
            .clickOnBookingsSubLink('Beta Calendar')
            .verifyCalendarLoads()
            .clickBookReservationButton()
            .verifyQuickPanelIsOpen()
    })

    // 每个用例执行完备份Session Storage所有数据
    afterEach(() => {
        cy.window().then(window => {
            const sessionData = JSON.stringify(window.sessionStorage)
            Cypress.env('sessionStorageBackup', sessionData)
        })
    })

    // 每个用例执行前恢复备份的Session Storage数据
    beforeEach(() => {
        cy.visit(base_url + '/your-target-page', {
            onBeforeLoad: (window) => {
                const backup = Cypress.env('sessionStorageBackup')
                if (backup) {
                    const sessionData = JSON.parse(backup)
                    Object.keys(sessionData).forEach(key => {
                        window.sessionStorage.setItem(key, sessionData[key])
                    })
                }
            }
        })
    })

    it('测试用例1', () => {
        // 测试逻辑
    })

    it('测试用例2', () => {
        // Session Storage数据正常保留
    })
})

验证方法 #

可以在测试用例中加入调试代码确认Session Storage是否正常恢复：

cy.window().then(window => {
    console.log(window.sessionStorage.getItem('someInfo'))
})

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