Javascript 使用Cypress在单击按钮时模拟GetAPI

我正在寻找一种方法，通过单击按钮模拟现有API的响应。当点击按钮（比如按钮A）时，页面将转到，比如说

#/create something

在FE上显示了一个加载程序，而在后台有两个XHR请求。这两个API的响应用于填充

#/create something

上的两个表单字段

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

这就是我想要表现的-

点击按钮A

模拟这两个API，以便根据模拟API的响应填充表单字段X和Y

执行一些表单操作

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

编辑1：我正在添加一个示例。假设我点击了这个网址- 在初始页面加载时，会进行几个XHR调用。我想使用fixture模拟

me

和

cats

API调用

我有一个包含路由的

url

文件-

url.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-如果已经有人问过，请给我指出相同的问题。

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

您可以尝试任何模拟服务器，它们允许您配置静态模拟API，该API将始终返回在该服务器上配置的内容

对于个人使用，我建议，因为它可以作为一个非常快速的运行。此外，您还可以将其集成为您的应用程序的一部分

当然，在Cypress已经做过的事情上使用此工具的唯一一点是，您可以将现有API保存为静态，例如，您可以将其指向生产，保存每个结果，然后将其重新用作测试

其他选择：

• ：为需要快速后端进行原型设计和模拟的前端开发人员创建
• ：这是根据Apache许可证发布的HTTP和HTTPS的开源模拟框架

Cypress允许您连接请求。当应用程序向特定端点发出请求时，您可以拦截它以返回模拟响应。您可以将fixture用于模拟响应，也可以将普通对象作为第三个参数传递给

cy.request（）

您的设置应如下所示：

it('should...', () => {

  cy.server();
  cy.visit('/');

  // load your mock data
  cy.fixture('me-mock.json').as('meJSON');
  cy.fixture('me-cats.json').as('catsJSON');

  // stub the two server requests to return your mock data
  // make sure you use the full URL
  cy.route('GET', serverUrl + '/users/me', '@meJSON').as('me');
  cy.route('GET', serverUrl + '3/gallery/r/cats', '@catsJSON').as('cats');

  // trigger the requests
  cy.get('#createSomething').click();

  // wait for both requests to resolve
  cy.wait(['@me', '@cats']);

  // then trigger more actions, make assertions, etc...

});

---

但请确保在定义路由时使用完整的URL。

您好，请检查这是否符合您的需要：此模拟用于使用

POST

的API。我需要有一个

GET

方法，然后获取伪值并填充表单元素。将“POST”替换为“GET”。；-）我尝试了乔瑟夫比勒的方法。但是，它抱怨

http://localhost/API1

找不到。我甚至尝试过使用fixture，但同样的错误也发生了。现在，如果不看您编写的代码，我将无法再为您提供帮助；-）也许你可以把它发布在这里或发布在github上？我认为使用一些外部工具是没有意义的，因为cypress可以做sameI认为我误解了这个问题，我只是给他提供了一种“如何”模拟GET api的方法，我已经添加了一些关于你评论的反馈，谢谢。看起来不错。但我个人更喜欢将装置名称写入

route

方法。PS：如果你想为你的夹具文件提供intellisense，你可以尝试提供这种功能的VSCode扩展。