如何让Cypress测试绕过Varnish、Redis等缓存并统一添加请求头

方法一：修复全局cy.intercept配置（推荐） #

你之前用cy.intercept没生效，大概率是拦截规则或头的设置方式不对。在cypress/support/e2e.js的beforeEach里按以下写法配置，就能给所有cy.visit和cy.request自动添加自定义头：

beforeEach(() => {
  // 拦截所有HTTP请求，注入绕过缓存的自定义头
  cy.intercept('*', (req) => {
    req.headers['X-Cypress-Bypass-Cache'] = 'true';
  }).as('bypassCache');
});

• *表示拦截所有请求，覆盖页面加载的HTML、静态资源及后续接口请求；如果只需要针对站点域名，可替换为https://your-site.com/*
• 自定义头名称X-Cypress-Bypass-Cache可根据你的Varnish/Redis配置调整
• 所有测试用例会自动继承该配置，无需手动修改每个请求

方法二：简化自定义命令写法 #

如果偏好自定义命令，无需复杂流程，直接覆写原有visit和request命令即可：

在cypress/support/commands.js中添加：

// 覆写cy.visit，自动添加自定义头
Cypress.Commands.overwrite('visit', (originalFn, url, options = {}) => {
  options.headers = {
    ...options.headers,
    'X-Cypress-Bypass-Cache': 'true'
  };
  return originalFn(url, options);
});

// 覆写cy.request，兼容两种调用格式：cy.request(url) 或 cy.request(optionsObj)
Cypress.Commands.overwrite('request', (originalFn, options) => {
  if (typeof options === 'string') {
    options = { url: options };
  }
  options.headers = {
    ...options.headers,
    'X-Cypress-Bypass-Cache': 'true'
  };
  return originalFn(options);
});

配置完成后，直接使用原有cy.visit()和cy.request()语法即可，命令会自动带上自定义头。

验证请求头是否生效 #

可在测试用例中添加断言，确认自定义头已成功注入：

it('确认请求头已添加', () => {
  cy.intercept('*', (req) => {
    expect(req.headers['X-Cypress-Bypass-Cache']).to.equal('true');
  }).as('checkHeader');
  cy.visit('/');
  cy.wait('@checkHeader');
});

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