需要在赛普拉斯中模拟POST请求

问题描述

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

应用程序启动时，登录页面将加载用户名和密码字段。赛普拉斯代码测试填写了用户名和密码，然后单击提交按钮，如下面的代码所示。

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

现在后端未运行。我需要模拟此POST请求，以便赛普拉斯测试可以到达实际的主页。

我认为我需要对这个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
    }
  });

解决方法

如果在调用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
}

请注意“限制”部分，

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