需要在 cypress 中模拟 POST 请求答案

【问题标题】：need to mock POST request in cypress需要在 cypress 中模拟 POST 请求
【发布时间】：2020-09-15 12:55:38
【问题描述】：

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
    }
  });

【问题讨论】：

你cy.request()的目的是什么？注意cy.route() cannot be debugged using cy.request()
我正在尝试模拟登录。
怀疑该代码是否登录 - 如果您正在存根服务器并触发测试的登录请求，应用程序如何知道它已登录？当然，您需要点击应用程序的登录按钮或等效按钮。
删除了我的答案。根据 eric99 的链接，它不起作用。
@Ackroydd 我改写了我的问题。

标签： testing cypress e2e-testing

【解决方案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，则赛普拉斯核心不会捕获此类请求。您必须添加一个polyfill，它实质上修改了window.fetch 方法以允许cy.route() 成功。

cypress.json

{  
  "experimentalFetchPolyfill": true
}

请注意限制部分，

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

【讨论】：