Cypress 中的模拟网络请求

Question

多年来，我一直在为此烦恼-我希望有人能帮助我:)

多年来，我一直试图在 Cypress 中存根网络请求。

命令.js

Cypress.Commands.add('login', (
    email = 'email',
    password = 'pass'
) => {
    cy.server();
    cy.visit('url');
    cy.get('input[name="username"').type(email);
    cy.get('form').submit();
    cy.get('input[name="password"').type(password);
    cy.get('form').submit();
});

模拟.js

describe('mock', function() {
    it('user can login', function() {
        cy.login();
        cy.get('main[role="main"]');

        cy.route('GET',
            '**/getIncentives*',
            {info: {}, results: {}}
        ).as('oppty');

        cy.wait('@oppty');
    });
});

Chrome 开发工具请求

赛普拉斯请求失败

这里的任何帮助将不胜感激 - 我已经疯了！

非常感谢，
奥利

Answer 1

目前，赛普拉斯 cy.route只能存根使用XHRs

原生 HTML 表单元素不使用XMLHTTPRequest，因此您不能使用cy.route用来存根它。

大多数人不会遇到这个问题，因为现在使用原生 HTML 表单并不常见

编辑：

您也在waiting路线上，但实际上并没有在您的测试中做任何事情。您的测试应如下所示：

  cy.route('GET',
      '**/getIncentives*',
      {info: {}, results: {}}
  ).as('oppty');

  // cypress code that would cause a network request.

  cy.wait('@oppty');

另外，请确保请求的类型为XHR：：

Answer 2

Cypress 只会在它被别名后找到网络请求。您问题中的代码表明您没有执行会导致网络请求的操作：

        cy.route('GET',
            '**/getIncentives*',
            {info: {}, results: {}}
        ).as('oppty');

       // cypress expected something to cause a network request here

        cy.wait('@oppty');

您应该route在测试中将调用移至更早的位置，或者将调用后导致请求的代码移至route。