在 Cypress 中模拟网络请求答案

【问题标题】：Mock network requests in Cypress在 Cypress 中模拟网络请求
【发布时间】：2019-03-18 19:56:26
【问题描述】：

我已经为此烦恼很久了 - 我希望有人可以帮助我:)

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

commands.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();
});

mock.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 开发工具请求

赛普拉斯请求失败

非常感谢这里的任何帮助 - 我快疯了！

非常感谢，
奥利

【问题讨论】：

标签： node.js request cypress

【解决方案1】：

Currently, Cypress cy.route can only stub network requests that use XHRs

原生 HTML 表单元素不使用 XMLHTTPRequest，因此您不能使用 cy.route 对其进行存根。

大多数人不会遇到这个问题，因为使用原生 HTML 表单是not as common nowadays

编辑：

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

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

  // cypress code that would cause a network request.

  cy.wait('@oppty');

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

【讨论】：

嗨 Bkucera - 实际上失败的请求是 @oppty 请求 - 而不是表单。我应该更清楚地说明这一点。我回家后会编辑 - 谢谢:)

【解决方案2】：

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

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

       // cypress expected something to cause a network request here

        cy.wait('@oppty');

您应该在测试的早期将调用移至route，或将调用后引起请求的代码移至route。

【讨论】：

【解决方案3】：

另请注意，cy.route() 可能不适用于服务器端渲染（显然）。
我在使用 NextJs 时遇到了这个问题，首先调用其他页面解决了这个问题，然后在客户端上导航到我真正想要测试的页面。

像这样：

describe('test cy.route', function() {
  it( 'test 1', () => {

    cy.server();
    cy.route({
        method: 'GET',
        url: /.*\/api\/someApiCall/,
        response: { 'someApiResponse': 'ok' },
        status: 200
    } ).as('myRouteAlias');

    // go to start page: first page is server side rendered. cy.route doesn't work.
    cy.visit('/');

    // go to page to be tested: client side, cy.route works then.
    cy.get( `a[href="/pageToBeTested"` ).should('exist').click();

    // wait for page loaded
    cy.url().should('include', 'pageToBeTested' );  

    // do something that requests '/api/someApiCall'.
    invokeFunctionThatDoesTheRequest();

    // wait for the request
    cy.wait('@myRouteAlias');

  });
});

【讨论】：