需要在cypress中模拟POST请求

Question

9/16 更新： 我已经改写了我的问题。我正在尝试使用 cypress 来测试具有 Angular 前端（http://localhost:4200）和 .NET Core 后端（http://localhost:5000）的工作应用程序。

应用程序启动时，将加载包含用户名和密码字段的登录页面。 cypress代码测试填写用户名和密码，点击提交按钮，如下我的代码所示。

当点击登录（提交）按钮时，会触发对.NET Core后端的POST请求。该请求提交用户名和密码，如果用户通过验证，则会返回一个令牌作为响应。该令牌将添加到会话存储中并且用户已登录。会话存储中的此令牌值表示用户已登录。添加令牌后，用户将被重定向到主页。

现在后端没有运行。我需要模拟这个 POST 请求，以便 cypress 测试可以到达实际的主页。

我想我需要存根这个 POST 请求，但我无法让这个代码工作。该请求只是中止，并且查看控制台，它说该请求没有被阻止。

这是我更新的赛普拉斯代码：

  const username = 'johndoe';
  const password = 'pass1234';
  
  cy.server();
  cy.get('h1').should('contain', 'Login');
  cy.get('input[placeholder=Username]').type(username);
  cy.get('input[placeholder=Password]').type(password);
  cy.get('button[type=submit]').click();  
  cy.route({
    method: 'POST',
    url: 'http://localhost:5000/Authentication/Login',
    response: {
      access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9' // some random characters
    }
  });

Answer 1

如果在调用 POST（单击提交）之前设置路由，可能会取得更大成功，

cy.server();
cy.route({
  method: 'POST',
  url: 'http://localhost:5000/Authentication/Login',
  response: {
    access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9' // some random characters
  }
});
...
cy.get('button[type=submit]').click();  

但是，如果您的应用程序使用 native fetch 而不是 XHR，则 Cypress 核心不会捕获此类请求。您必须添加一个 polyfill ，它本质上修改了

window.fetch

方法以允许

cy.route()

成功。

cypress.json

{  
  "experimentalFetchPolyfill": true
}

请注意限制部分，

限制
实验性的 Polyfill 并不是万无一失的。例如，它不适用于从 WebWorkers 或 ServiceWorker 发出的 fetch 调用。它可能不适用于流式响应和取消的 XHR。这就是为什么我们认为选择加入实验标志是避免破坏测试中的应用程序的最佳途径。

Answer 2

Cypress 已更新，从 12.0.0 版本开始，您可以使用

cy.intercept

来模拟任何响应

• 有关 网络请求的 cypress 文档
• cypress 文档关于 cy.intercept

cy.intercept(
  {
    method: "GET", // or another method e.g. "POST
    url: `<MOCKED_API_URL>`, // change to your desired API endpoint
  },
  MOCKED_RESPONSE,
).as("mocked"); // or any other name, just will be used for the cy.wait later

cy.visit("url-you-want-to-visit");
cy.wait("@mocked");

// ... continue your testing