Cypress 如何设置http referer？

在使用 Cypress 进行自动化测试的时候，有时候我们需要设置 HTTP 请求头的 referer 字段。referer 字段用于指示请求发起的源地址。在 Cypress 中，我们可以通过修改测试脚本中的请求配置来设置 referer。下面是具体的操作方法：

1. 使用 cy.request() 设置 referer

如果你在测试中需要直接发送 HTTP 请求，可以使用 cy.request() 方法。cy.request() 方法允许你自定义请求头部，包括 referer。例如：

javascript
describe('Set Referer in cy.request', () => {
  it('sends a request with a custom referer', () => {
    cy.request({
      url: 'https://api.example.com/data',
      headers: {
        'Referer': 'https://custom-referer.com'
      }
    }).then((response) => {
      expect(response.status).to.eq(200);
    });
  });
});

在这个例子中，我们向 https://api.example.com/data 发送了一个带有自定义 referer 的 HTTP 请求，然后验证响应状态码是否为 200。

2. 使用 cy.visit() 和 onBeforeLoad 设置 referer

如果你需要在访问一个页面时设置 referer，可以通过 cy.visit() 方法的 onBeforeLoad 选项来实现：

javascript
describe('Set Referer in cy.visit', () => {
  it('visits a page with a custom referer', () => {
    cy.visit('https://example.com', {
      onBeforeLoad: (win) => {
        Object.defineProperty(win.document, 'referrer', {
          value: 'https://custom-referer.com'
        });
      }
    });

    // 进行其他相关的测试断言
  });
});

在这个例子中，我们在访问 https://example.com 之前，使用 Object.defineProperty 修改了 window.document 的 referrer 属性，从而模拟浏览器发送请求时带上自定义的 referer。

总结

通过以上两种方法，我们可以在使用 Cypress 进行自动化测试时，根据需要设置或修改 HTTP 请求的 referer 字段。这在测试需要验证不同来源请求的行为或进行安全性测试时非常有用。