需要在 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 as opposed to XHR, core Cypress does not catch this type of request. You have to add a polyfill，这实际上修改了 window.fetch 方法以允许 cy.route() 成功。

cypress.json

{  
  "experimentalFetchPolyfill": true
}

请注意限制部分，

Limitations
The experimental polyfill is not foolproof. It does not work with fetch calls made from WebWorkers or ServiceWorker for example. It might not work for streaming responses and canceled XHRs. That's why we felt the opt-in experimental flag is the best path forward to avoid breaking already application under tests.

需要在 cypress 中模拟 POST 请求

need to mock POST request in cypress

testing

e2e-testing

cypress