前言
随着现代 web 应用程序的复杂性增加，测试异步请求变得越来越重要。Cypress 是一个前端自动化测试工具，它提供了易于使用和可读性高的 API。在本文中，我们将介绍在 Cypress 测试框架中如何处理异步请求。
Cypress 中的异步处理
在 Cypress 中，异步请求通常是通过 cy.request() 命令发起的。这个命令可以让我们向服务器发送 AJAX 请求并且验证响应内容。这种方式可以在测试中模拟用户操作并且验证后端 API 的正确性。下面是一个例子：
-- -------------------- ---- -------
--------- - ------ ----- -- -- -
------------------ ---------------------------------- -
------ ---- ------
------- ----- -----
---- ------------------------
--
---------------- -- -
--------------------------------------------
----------------------------------------------- ---- ------
--
--在这个例子中，我们向 http://localhost:3000/api/blogs 发送了一个 POST 请求，并且带有一些数据。一旦接收到服务器的响应，我们将验证结果确实包含有 id 和 title 属性。
虽然上面的代码很简单明了，但是在真实的测试中，我们可能需要处理更加复杂的场景。比如，我们需要处理更多的请求和响应，或者是在请求过程中遇到一个错误。对于这种情况，Cypress 提供了多种处理异步请求的方法。
Cypress 中的异步命令
Cypress 提供了很多处理异步命令的 API，包括 cy.wait()，cy.get()，cy.request()，cy.contains() 等等。这些命令可以帮助我们等待异步任务完成，或者是检查 DOM 中的某个元素。
使用 cy.wait()
cy.wait() 命令会等待给定时间，或者是等待某个特定的条件变为真。因此，它常常被用来等待异步操作完成。下面是一个例子：
it('tests the login form', () => {
cy.visit('/login')
cy.get('input[name="username"]').type('username')
cy.get('input[name="password"]').type('password')
cy.get('button[type="submit"]').click()
cy.wait(3000)
cy.url().should('include', 'dashboard')
})在这个例子中，我们等待了 3 秒钟后再次验证了当前的 URL 是否包含了我们想要的 dashboard 关键字。在真实的测试中，这种方式并不推荐，因为可能会出现性能问题。
使用 cy.get()
cy.get() 命令被广泛用于获取页面中的某个元素。这个命令返回一个 Promise，因此我们可以在命令链中继续使用。下面是一个例子：
it('tests the login form', () => {
cy.visit('/login')
cy.get('input[name="username"]').type('username')
cy.get('input[name="password"]').type('password')
cy.get('button[type="submit"]').click()
cy.get('#header').should('contain', 'Welcome')
})在这个例子中，我们等待用户登录后，检查顶部导航栏是否包含了欢迎消息。如果代码中的 #header 元素不包含欢迎消息，那么测试就会失败。
使用 cy.request()
cy.request() 命令允许我们发送 AJAX 请求，并且验证服务器返回的响应。在请求过程中，我们可以使用 then() 回调函数来处理响应。下面是一个例子：
-- -------------------- ---- -------
--------- - ------ ----- -- -- -
------------------ ---------------------------------- -
------ ---- ------
------- ----- -----
---- ------------------------
--
---------------- -- -
--------------------------------------------
----------------------------------------------- ---- ------
--
--在这个例子中，我们向 http://localhost:3000/api/blogs 发送了一个 POST 请求，并且带有一些数据。一旦接收到服务器的响应，我们将验证结果确实包含有 id 和 title 属性。
使用 cy.contains()
cy.contains() 命令被用来检查页面上是否存在某个元素，并且验证它的文本内容是否匹配。下面是一个例子：
it('tests the home page content', () => {
cy.visit('/')
cy.contains('h1', 'Welcome to my website')
cy.contains('p', 'Learn web development with us')
})在这个例子中，我们检查首页是否包含了一个标题和一个段落。
Cypress 中的错误处理
在 Cypress 中处理异步请求的过程中，我们有时会遇到一些错误。如果我们没有正确处理这些错误，那么测试就会失败或者出现内存泄漏等问题。下面是一些常见的错误，以及它们的解决方案。
请求超时
当请求超时时，我们需要使用 cy.wait() 命令来等待需要的时间。下面是一个例子：
it('tests the login form', () => {
cy.visit('/login')
cy.get('input[name="username"]').type('username')
cy.get('input[name="password"]').type('password')
cy.get('button[type="submit"]').click()
cy.wait(3000).url().should('include', 'dashboard')
})在这个例子中，我们等待请求完成之后，再次验证当前的 URL 是否包含了 dashboard 关键字。
XHR requests
如果我们遇到 XHR 请求，可以使用 Cypress 中的 cy.route() 命令来处理它们。这个命令允许我们模拟服务器响应，可以让我们验证客户端应用程序的正确性。下面是一个例子：
-- -------------------- ---- -------
--------- -- --- --------- -- -- -
-----------
---------------------- -
--- --
------ ---- ------
------- ----- -----
---- ------------------------
----------------
-------------
-------------------
----------------- ---- ------
--在这个例子中，我们使用 cy.route() 命令模拟了一个 /api/blogs 请求并返回了其响应。得到了该响应后，我们等待验证标题是否为 new blog。
确认模态框
如果我们需要模拟用户操作从而出现确认模态框，那么可以使用 Cypress 中的 cy.on() 命令来处理。下面是一个例子：
-- -------------------- ---- -------
--------- - ------- -------- -- -- -
----------------------- --------- -- -
----------------------------- --- -------
------ ----
--
-------------
--------------------- ------- -----------------
--在这个例子中，我们使用 cy.on() 命令来处理确认模态框。当弹出确认模态框时，我们将检查弹出的信息是否为 Are you sure?，然后返回真值以结束处理程序。
结论
在 Cypress 中处理异步请求时，我们应该使用链式命令，并考虑各种可能的错误情况。我们可以使用 Cypress 提供的多个 API 处理异步请求，分别是 cy.wait()，cy.get()，cy.request() 和 cy.contains()。当出现一些错误时，我们可以使用 cy.route() 命令模拟服务器响应并且验证客户端应用程序的正确性。最后，我们还讲解了如何使用 cy.on() 命令用于确认模态框。
Cypress 提供了丰富的 API 用于处理异步操作和错误处理 - 这些方法和命令可以大大简化我们在完成端到端测试时的工作。结合本文，您应该能够掌握 Cypress 中异步操作的技术，将其应用到您的测试中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b4dac9babaf620faaa284