使用Cypress切换Tab A到Tab B显示空白，如何维持Tab A会话？

嘿，我明白你遇到的麻烦了——登录后从Tab A切到Tab B页面就空白，还没法维持之前的会话对吧？其实这是Cypress的一个常见“特性”，因为它本身是单上下文设计的，默认不会自动切换到新标签页的上下文，而且新标签页经常没法继承原有的登录状态，所以才会空白。下面给你几个实用的解决办法，你可以根据自己的场景选：

1. 别用真实新标签页，直接在当前上下文打开Tab B #

如果你的操作是点击带有target="_blank"的链接打开Tab B，那最简单的办法就是先去掉这个target属性，让链接在当前标签页打开，这样会话肯定能保留：

// 找到打开Tab B的链接，移除target属性后点击
cy.get('a[href="/tab-b-path"]').invoke('removeAttr', 'target').click()

或者你也可以直接获取链接的URL，用cy.visit()直接访问，效果一样：

cy.get('a[href="/tab-b-path"]').invoke('attr', 'href').then(tabBUrl => {
  cy.visit(tabBUrl)
})

2. 拦截新标签页打开事件，手动接管上下文 #

如果必须模拟“打开新标签页”的操作，你可以拦截浏览器的window.open方法，把新标签页的URL拿到后，在当前Cypress上下文里访问，同时保留原会话：

// 先拦截window.open事件
cy.window().then(win => {
  cy.stub(win, 'open').as('openNewTab').callsFake((targetUrl) => {
    // 直接在当前标签页访问Tab B的URL，自动带上登录会话
    cy.visit(targetUrl)
    // 保留原始open方法的行为（可选）
    return win.open.wrappedMethod.apply(win, arguments)
  })
})

// 现在点击打开Tab B的按钮/链接
cy.get('#open-tab-b-button').click()

// 这时候你已经在Tab B页面了，会话是完整的，可以继续操作
cy.get('#tab-b-element').should('be.visible')

3. 手动持久化会话数据（针对localStorage存储的会话） #

如果你的登录会话存在localStorage里（而不是cookie），Cypress有时候不会自动同步，这时候可以在Tab A登录后先保存localStorage数据，切换到Tab B后再恢复：

// 登录成功后，保存当前的localStorage数据
cy.window().then(win => {
  const savedLocalStorage = JSON.stringify(win.localStorage)
  cy.wrap(savedLocalStorage).as('tabALocalStorage')
})

// 访问Tab B页面
cy.visit('/tab-b-path').then(() => {
  // 恢复之前保存的localStorage
  cy.get('@tabALocalStorage').then(storageData => {
    const parsedData = JSON.parse(storageData)
    cy.window().then(win => {
      Object.keys(parsedData).forEach(key => {
        win.localStorage.setItem(key, parsedData[key])
      })
    })
    // 刷新页面让会话生效
    cy.reload()
  })
})

4. 用cy.request()提前维持会话状态 #

如果Tab B的操作需要先加载数据，你可以先用cy.request()带着登录后的cookie请求接口，确保会话有效后再访问页面：

// 登录后，先请求Tab B的接口（Cypress会自动带上登录cookie）
cy.request({
  url: '/api/tab-b-initial-data',
  method: 'GET'
}).then(response => {
  // 可以在这里验证响应是否正常，确保会话有效
  expect(response.status).to.eq(200)
})

// 再访问Tab B页面，这时候页面就能正常加载了
cy.visit('/tab-b-path')

这些方法基本能覆盖大部分场景啦，你可以根据自己代码的实际情况调整～

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