Cypress测试注册流程时跨测试用例保留缓存与Cookie的解决方案求助

嗨，我看了你遇到的Cypress测试会话丢失问题，这确实是Cypress默认的测试隔离机制导致的——每个it块执行前都会清掉浏览器的Cookie、缓存这些状态，所以你验证完OTP后再访问网站，之前的会话就没了，才会出现500错误。下面给你几个实用的解决方案，结合你的代码来改：

方法1：使用cy.session()（Cypress 12+ 推荐） #

cy.session()是Cypress官方推荐的会话管理方式，它能在测试间安全保存并恢复浏览器状态，既保证测试隔离，又能复用必要的会话信息。

修改你的代码如下：

const faker = require("faker"); 
const firstName = faker.Name.firstName(); 
const lastName = faker.Name.lastName(); 
const email = firstName + "@mailinator.com"; 

describe('My Registration Test Suite', function () {
  // 第一步：发送OTP并初始化会话
  it('Send OTP and save session', function () { 
    cy.visit('https://outsized.site/') 
    cy.get('.css-jqdzg6-commonButtonStyle > canvas', { timeout: 30000 }).click() 
    cy.get('#email').type(email.toLocaleLowerCase()) 
    cy.get('.ant-btn').click() 

    // 保存邮箱信息到fixture
    cy.fixture('data1').then((profile) => { 
      profile.FreelancerName = firstName.toLocaleLowerCase() 
      profile.FreelancerEmail = email.toLocaleLowerCase() 
      cy.writeFile("cypress/fixtures/data1.json", profile) 
    })

    // 创建会话，保存当前认证相关的Cookie/localStorage
    cy.session('verified-email-session', () => {
      // 可选：添加确认会话状态的逻辑，比如检查是否生成了认证Cookie
      cy.getCookie('auth_token').should('exist') // 替换成你网站实际的认证Cookie名称
    })
  }) 

  // 第二步：从Mailinator获取OTP
  it('Retrieve OTP from Mailinator', function () { 
    cy.visit('https://www.mailinator.com/') 
    cy.fixture("data1.json").then(profile => { 
      cy.get("#addOverlay").type(profile.FreelancerName) 
    }) 
    cy.get("#go-to-public").click() 
    cy.wait(2000) 
    cy.contains('table tbody tr', 'OTP').click() 

    cy.get('#html_msg_body') 
      .its('0.contentDocument.body').should('not.be.empty') 
      .find("table > tbody > tr:nth-child(3) > td > h2") 
      .then($h2 => { 
        const OTP = $h2.text() 
        cy.fixture("data1.json").then(profile => { 
          profile.OTP = OTP 
          cy.writeFile("cypress/fixtures/data1.json", profile); 
        }) 
      }) 
  }) 

  // 第三步：验证OTP并复用会话访问网站
  it('Verify OTP and access site with preserved session', function () { 
    cy.fixture('data1').then((profile) => { 
      // 调用API验证OTP
      cy.request({ 
        method: 'POST', 
        url: 'https://api.outsized.site/graphql', 
        headers: { 'Content-Type': 'text/plain' }, 
        body: `mutation { verifyEmailOtp(email: "${profile.FreelancerName}@mailinator.com", otp: ${profile.OTP}){ message } }` 
      })
    }) 

    // 恢复之前创建的会话，自动加载保存的Cookie状态
    cy.session('verified-email-session', () => {
      // 如果会话不存在，这里可以重新执行初始化步骤（可选）
      cy.visit('https://outsized.site/')
      cy.get('.css-jqdzg6-commonButtonStyle > canvas').click()
      cy.get('#email').type(email.toLocaleLowerCase())
      cy.get('.ant-btn').click()
    })

    // 复用会话访问网站，此时之前的认证状态已恢复
    cy.visit("https://outsized.site") 
    cy.wait(2000) 
    cy.get('.css-jqdzg6-commonButtonStyle > canvas', { timeout: 30000 }).click() 
    cy.get('#email').type(profile.FreelancerEmail) 
    cy.get('.ant-btn').click() 

    cy.request({ 
      method: 'POST', 
      url: 'https://api.outsized.site/graphql', 
      headers: { 'Content-Type': 'text/plain' }, 
      body: `mutation { addNewEmail(email: "${profile.FreelancerName}@mailinator.com"){ message } }` 
    }) 
    cy.get('.ant-btn').click() 
  }) 
})

方法2：使用Cypress.Cookies.preserveOnce()（旧版本兼容） #

如果你用的是Cypress 12以下版本，可以用Cypress.Cookies.preserveOnce()指定保留特定Cookie，在beforeEach中配置：

describe('My Registration Test Suite', function () {
  // 在每个测试前保留认证相关的Cookie
  beforeEach(() => {
    // 替换成你网站实际使用的认证Cookie名称，比如'session_id'、'auth_token'
    Cypress.Cookies.preserveOnce('auth_token', 'session_id')
  })

  // 你的三个测试块保持原有逻辑即可
  // ... 这里放你原来的测试代码 ...
})

方法3：全局禁用Cookie清除（不推荐） #

你可以在cypress.config.js中修改配置，禁止Cypress自动清除Cookie，但这会破坏测试的隔离性，容易导致测试间互相影响，仅在特殊场景下使用：

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 辅助配置（针对Chromium浏览器）
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--disable-site-isolation-trials')
        }
        return launchOptions
      })
    },
    // 全局保留匹配规则的Cookie
    cookies: {
      preserve: /^auth_/, // 保留所有以auth_开头的Cookie，用['*']则保留全部
    },
  },
})

额外小贴士 #

• 你可以通过浏览器开发者工具的Application标签，查看网站用来维持会话的具体Cookie名称，替换示例中的占位符。
• cy.session()还支持直接传递数据，比如把邮箱信息存在会话里，不用依赖fixture文件：

  cy.session('user-data', () => {
    return { email: email }
  })
  // 在其他测试中获取数据
  cy.session('user-data').then((data) => {
    cy.log(`当前用户邮箱：${data.email}`)
  })
  

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