Question

我正在寻找一种在单击按钮时模拟现有API响应的方法。单击按钮（例如按钮A）后，页面转到#/create-something。

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

如果我不加载这两个API，则该页面将引发控制台错误。因此，我想模拟这两个api，并使用这些模拟的响应填充两个表单字段。

这就是我想要执行的操作-

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

由于我不熟悉该问题的处理方法，因此我尚未完成或编写此部分的代码。我已经看过this教程，但无法理解这是否是解决此问题的正确方法。

PS-如果已经问过这个问题，请指向我。

Answer 1

Cypress允许您stub个网络请求。当您的应用程序向特定端点发出请求时，您可以拦截该请求以返回模拟响应。您可以使用夹具进行模拟响应，也可以将普通对象作为第三个参数传递给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。

Answer 2

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

Answer 3

您可以尝试使用任何模拟服务器，它们可以让您配置静态MockAPI，该API始终会返回在其上配置的内容。

对于个人用途，我建议使用Wiremock，因为它可以作为standalone server很快运行。您也可以将其集成为maven test goal的一部分。

当然，在赛普拉斯已做的事情上使用此工具的唯一目的可能是可以将现有的API保存为静态，例如，可以将其指向生产环境，保存每个结果，然后将其重新用作测试

另一个选项：

JsonServer：专为需要快速后端进行原型制作和模拟的前端开发人员而设计。
MockServer：这是在Apache许可下发布的，用于HTTP和HTTPS的开源模拟框架。

使用赛普拉斯在按钮单击上模拟GET api

3 个答案: