使用 Cypress 在按钮单击时模拟 GET api

Question

我正在寻找一种方法来模拟现有 API 在单击按钮时的响应。当单击按钮（假设按钮 A）时，页面将路由到（假设）#/create-something。

在 FE 上，显示了一个加载程序，而在后台则发出了两个 XHR 请求。这两个 API 的响应用于填充 上的两个表单字段#/create-something。

如果我不加载这两个 api，页面会抛出控制台错误。因此，我想模拟这两个 api，并使用这些模拟响应填充两个表单字段。

这就是我想要执行的 -

1. 点击按钮A
2. 模拟两个 API，以便根据模拟 API 的响应填充表单字段 X 和 Y。
3. 执行一些表单操作。

我还没有完成或编写这部分的代码，因为我不熟悉如何解决这个问题。我已经阅读了本教程，但无法理解这是否是解决此问题的正确方法/方法。

编辑 1：我正在添加一个示例。假设我正在访问此 URL - Cats 在初始页面加载时，会进行几次 XHR 调用。我想使用固定装置来模拟me APIcats调用。

我有一个urls包含路线的文件 -

urls.js

 export const me='/users/me';
 export const cats='3/gallery/r/cats'

在我的cats.spec.js文件夹中，我有这段代码

   import {
       me,
       cats  
    } from '../cats'

 context('Checking if mocking can be done',()=>{
   const mockingAPI = () =>{
       cy.server();
       cy.route(me, 'fixtures:me-mock.json);
       cy.route(cats,'fixtures:me-cats.json);
       cy.wait(2000);
        }

   describe('Actual mock and tests',()=>{
       before(mockingAPI());

       it('lets add some tests',()=>{
        cy.visit('/');

         })

  })
})

PS - 如果已经有人问过这个问题，请指出同样的问题。

Answer 1

我可以看到，在您的问题中，之前的调用中没有声明任何固定装置。我假设 json 文件位于您的装置文件夹中。请添加/更正示例，以便它具有可编译的代码。还要更正 api 路由，使它们具有相同的行为（添加前导正斜杠或将其删除并更正访问方法）。确保这些路由是在您的实际（实时）应用程序上调用的路由，并且您正确地模拟了它们（具有正确的响应）。将访问移至之前的方法中。删除等待调用，因为它可能隐藏一些需要解决的错误。检查页面是否在 cy.visit() 上加载，以及所有必要的“GET”调用是否都被模拟。如果您模拟所有 get 方法并正确进行身份验证（如果适用），您应该会看到您需要的内容。只有一个问题是测试编写不正确，无法找到您正在寻找的查询选择器，但这不是问题的一部分。