如何在Cypress中为所有测试仅加载一次Web应用？

你的cy.session()用法存在偏差，且它并不是当前场景的最优解决方案——cy.session()的核心作用是维持会话级状态（如登录态、Cookie），而非缓存应用初始化时的资源加载，这也是你遇到页面空白问题的原因：会话恢复仅保留浏览器上下文，不会自动恢复已渲染的页面内容；若重新执行cy.visit('/')，则又会触发全量JSON读取，完全没利用到会话的优势。

你的代码问题点 #

• 在cy.session()内部执行cy.visit('/')，会话恢复后Cypress不会自动还原页面DOM，导致测试时页面空白。
• 测试中重复cy.visit('/')会重新触发所有JSON文件的加载，无法达到提速目的。

针对场景的优化方案 #

方案1：启用浏览器资源缓存

通过Cypress配置让浏览器缓存静态资源（包括你的JSON文件），避免重复请求。修改cypress.config.js：

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234',
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          // 启用50MB磁盘缓存
          launchOptions.args.push('--disk-cache-size=52428800')
          return launchOptions
        }
      })
    }
  }
})

方案2：全局预加载+缓存重载

在全局before()钩子中仅执行一次完整的应用加载，后续测试用缓存重载替代重新访问：

// test1.spec.js
before(() => {
  cy.visit('/')
  // 等待所有JSON加载完成（以目标元素出现为标志）
  cy.get('#customer-logo').should('be.visible')
})

beforeEach(() => {
  // 从缓存重载页面，避免重新加载JSON
  cy.reload(true)
})

it('Check the customer logo if exist 1', () => {
  cy.get('#customer-logo').should('be.visible')
})

it('Another test case', () => {
  // 直接执行测试逻辑，页面已从缓存加载完成
})

方案3：Mock JSON请求（推荐）

如果JSON内容固定，直接在Cypress中Mock所有JSON请求，彻底跳过真实文件读取：

// commands.js
Cypress.Commands.add('mockJsonRequests', () => {
  cy.intercept('GET', '**/*.json', (req) => {
    // 根据请求路径返回对应Mock数据
    if (req.url.includes('customer')) {
      req.reply({ logoId: 'customer-logo' })
    } else {
      // 其他JSON返回预设的基础数据
      req.reply({})
    }
  })
})

// test1.spec.js
before(() => {
  cy.mockJsonRequests()
  cy.visit('/')
})

it('Check the customer logo if exist 1', () => {
  cy.get('#customer-logo').should('be.visible')
})

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