Cypress 是一个流行的前端测试框架，它可以帮助我们编写自动化测试用例来测试我们的应用程序。在测试过程中，我们经常需要与 API 接口进行交互，以确保我们的应用程序在使用 API 接口时的行为正确。在本文中，我们将介绍如何在 Cypress 中调用 API 接口。
使用 Cypress 的 cy.request() 方法
Cypress 提供了一个名为 cy.request() 的方法，它可以用来发出 HTTP 请求。使用 cy.request() 方法，我们可以轻松地与 API 接口进行交互。下面是一个示例：
----------------- -------------------------------- -- - -- ---- --
在这个示例中，我们向 /api/endpoint 发出了一个 GET 请求，并在响应完成后处理响应。我们可以使用类似的方式来发出 POST、PUT、DELETE 等其他类型的请求。
处理响应
在使用 cy.request() 方法发出请求后，我们需要处理响应。Cypress 提供了多种方法来处理响应。下面是一个示例：
----------------- -------------------------------- -- - ---------------------------------- ---------------------------------------------- --
在这个示例中，我们首先检查响应的状态码是否为 200，然后检查响应体是否有一个名为 data 的属性。
使用 cy.route() 模拟 API 接口
除了使用 cy.request() 方法与实际的 API 接口进行交互外，我们还可以使用 cy.route() 方法模拟 API 接口。使用 cy.route() 方法，我们可以模拟 API 接口的响应，以便在测试过程中对应用程序的行为进行测试。下面是一个示例：
----------- --------------- ---------------- -------------------- ------------- ------------------------- --------------------------------- ------- --------
在这个示例中，我们首先使用 cy.server() 方法启用 Cypress 的服务器，然后使用 cy.route() 方法模拟 /api/endpoint 的 GET 请求，并将响应设置为 fixture:data.json，这意味着我们将使用 data.json 文件中的数据作为响应。接下来，我们使用 cy.visit() 方法访问我们的应用程序，并使用 cy.get('#button').click() 方法模拟用户单击按钮的行为。最后，我们使用 cy.get('#data').should('contain', 'Hello, World!') 方法检查应用程序是否正确地显示了来自 API 接口的数据。
总结
在本文中，我们介绍了如何在 Cypress 中调用 API 接口。我们了解了如何使用 cy.request() 方法与实际的 API 接口进行交互，并介绍了如何使用 cy.route() 方法模拟 API 接口。我们还介绍了如何处理响应并在测试过程中对应用程序的行为进行测试。希望这篇文章能够帮助你更好地使用 Cypress 编写自动化测试用例。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66274d3dc9431a720c3e29f2