开发者问题收集

使用 Cypress 模拟按钮点击时的 GET API

2019-12-24
5358
javascript e2e-testing cypress

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

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

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

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

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

由于我不熟悉如何解决这个问题，所以我没有为这部分做或写代码。我已经完成了 这个 教程，但无法理解这是否是解决这个问题的正确方法/方法。

编辑 1：我正在添加一个例子。假设我访问的是这个 URL - Cats 在初始页面加载时，会进行几次 XHR 调用。我想使用装置模拟 me 和 cats API 调用。

我有一个 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 - 如果已经有人问过这个问题，请指出我的问题。

3个回答

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

mstuartf
2020-01-25

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

Stanimir Georgiev
2020-01-21

您可以尝试任何模拟服务器，它们允许您配置一个静态 MockAPI，它将始终返回其配置的内容。

对于个人使用，我推荐 Wiremock ，因为它可以非常快速地作为 独立服务器 运行。您还可以将其集成为 maven 测试目标 的一部分。

当然，与 Cypress 已经完成的功能相比，使用此工具的唯一好处可能是您可以将现有 API 保存为静态，例如，您可以将其指向生产，保存每个结果，然后将其重新用作测试。

其他选项：

  • JsonServer ：专为需要快速后端进行原型设计和模拟的前端开发人员创建。
  • MockServer ：这是一个在Apache 许可证。
luiscla27
2020-01-23