Cypress，如何从API响应中读取数据？

Question

我找到的所有示例都是通过调用API并定义方法和URL来实现的。例如：

  cy.server()

  cy.route({
    method: 'GET',
    url: 'https://www.something.com', 
  }).as('get_jobs')

  cy.get('[data-cy="job-search-input"] button').click()

  cy.wait('@get_jobs').then((xhr) => {
     cy.log(xhr.response.body.data)
  })

我想要的只是选择按钮，点击并读取它给我的响应。我不想再定义URL和方法，而是使用已经在代码中使用的那个，并在按下按钮后仅检查它所给出的响应。

我该如何做到这一点？

- Igor-Vuk

---

这里有点不太清楚你的要求。你是想使用Cypress向某个API发出请求并获取响应吗？cy.route函数用于为你的应用程序存根请求，因此在测试时你实际上并没有发出请求。 - Kryten

我的应用程序是这样设计的：当我按下按钮后，会发送一些数据并进行 API 请求。当我收到响应后，将其保存到 Redux 存储中。因此，我不打算模拟任何东西。所有功能都已经实现在应用程序中了。我只想用 Cypress 进行测试，看看在按下按钮后是否能收到响应，并将该响应用于下一个测试。 - Igor-Vuk

Answer 1

从上面的问题和评论中，看起来你想做这样的事情：

1.设置您的应用程序

2.点击一个按钮（或者执行其他操作）以发起对API的请求

3.捕获API的响应

4.使用响应测试应用程序中的其他内容（例如，确保页面上的某些文本更改了吗？）

虽然可以以这种方式编写测试，但存在一个问题：API的响应可能会因您无法控制的情况而发生变化。例如，如果您正在项目上工作，并且当天API出现问题怎么办？您的代码将崩溃，这不是由于代码中的错误造成的。实际上，您根本没有测试您的代码（至少不是您认为要测试的代码），因为您将无法从API获得所需的响应。

这就是Cypress提供一种方式来存根请求-以确保在运行测试时，您正在从API中获取所需的响应。如果要编写测试以查看API返回值A时会发生什么，您需要确保API不返回值B。存根请求允许您确保在需要时应用程序获得值A。

所以你看到的例子可能会这样做：

1.设置您的应用程序

2.使用cy.route来存根API请求以返回已知值

3.单击按钮-您的应用程序现在发出请求并收到已知值

4.测试您的应用程序，以确保它在获得已知值时执行所需的操作。

如果您有多个不同的响应值需要测试应用程序的行为，请编写一组测试，每个测试都对应一个值。

- Kryten

---

没错，但有时我只是想测试一下是否能收到响应。例如，我知道应该得到一个项目数组，但具体内容对我来说并不重要，我只是想检查当我按下按钮时是否会得到响应，并且数组的长度是否大于0，因为它始终如此并且必须如此。 - Igor-Vuk

实际上，你正在测试API。我建议Cypress不是正确的工具。 - Kryten

是的。但那只是众多测试中的一个。为了几个测试而包含完全不同的测试工具，这真是太可惜了。 - Igor-Vuk

Cypress也适用于端到端测试，因此检查响应是端到端测试的一部分！ - Akshay Vijay Jain

Answer 2

如果你只想阅读响应，可以使用{{link1：cy.server中的onResponse}}：

cy.server({
  onResponse(response) {
    // Log every response
    console.log("response", response);
    // Using the response URL from OP's question
    if (response.url.includes("https://www.something.com")) {
      // etc.
    }
  }
});

- zgreen