时间戳

首页 > 解决方案 > 需要在 cypress 中模拟 POST 请求

testing - 需要在 cypress 中模拟 POST 请求

问题描述

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

标签： testingcypresse2e-testing

解决方案

如果在调用 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();

但是，如果您的应用程序使用原生获取而不是 XHR，则赛普拉斯核心不会捕获此类请求。您必须添加一个polyfill，它实质上会修改window.fetch方法以允许cy.route()成功。

柏树.json

{  
  "experimentalFetchPolyfill": true
}

请注意限制部分，

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

推荐阅读