如何在Cypress中让Google Chrome缓存main.js文件

1. 调整Chrome启动参数 #

Cypress默认会给Chrome添加禁用缓存的启动参数，你可以修改cypress.config.js，移除这些参数并强制启用缓存：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.name === 'chrome') {
          // 移除禁用缓存的默认参数
          launchOptions.args = launchOptions.args.filter(arg => 
            arg !== '--disable-cache' && arg !== '--disable-application-cache'
          )
          // 强制开启缓存
          launchOptions.args.push('--enable-cache')
          return launchOptions
        }
      })
    },
  },
})

2. 验证静态资源的HTTP缓存头 #

确保你的应用返回的main.js带有正确的缓存响应头，比如：

• Cache-Control: public, max-age=31536000（适合带内容哈希的静态资源，长期缓存）
• 配合ETag或Last-Modified实现协商缓存

你可以在Cypress的Network面板查看main.js的响应头，确认缓存策略是否正确配置。

3. 用cy.intercept手动设置缓存规则 #

如果以上方法不生效，可通过拦截请求强制注入缓存头：

// 在测试文件的beforeEach或具体用例中添加
cy.intercept('GET', '/path/to/main.js', (req) => {
  req.on('response', (res) => {
    res.headers['cache-control'] = 'public, max-age=31536000'
  })
}).as('mainJS')

4. 调整测试隔离设置（谨慎使用） #

Cypress默认启用测试隔离，每次测试会重置浏览器上下文，可能清空缓存。如果测试间不需要严格隔离，可以在配置中禁用：

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

注意：禁用测试隔离后，测试间可能存在状态污染，需确保测试用例的独立性不受影响。

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