Cypress 是一个现代化的前端自动化测试工具，它使用 JavaScript 进行编写测试用例，提供了 API 简洁、易读的优点。本文主要介绍 Cypress 中如何使用 cy.wrap() 对多个元素进行操作。
cy.wrap() 简介
cy.wrap() 是 Cypress 的一个常用方法，它可以将一个 JavaScript 变量包装成可被 Cypress 命令行调用的对象，例如：
const button = cy.get('.button')
cy.wrap(button).click()这个例子中，button 是一个 Cypress 的命令，它返回的是一个 jQuery 对象，cy.wrap() 然后将这个对象包装成了一个可被 Cypress 调用的对象，并且调用了 click() 方法。
cy.wrap() 处理多个元素
实际上，cy.wrap() 还可以用来处理多个元素。通常我们可能需要对一组元素进行相同的操作，例如：
cy.get('.item').each((item) => {
cy.wrap(item).click()
})这个例子中，cy.get() 返回的是一个 jQuery 对象，其中有多个 .item 元素。我们使用了 each() 方法循环每个元素，并使用 cy.wrap() 包装这个元素。
cy.wrap() 使用示例
下面我将通过一个使用示例来详细介绍如何使用 cy.wrap() 对多个元素进行操作。
页面中有一个列表，我们需要对每个列表项进行点击，并验证打开的模态框是否正确。
首先，我们可以找到所有的列表项，然后使用 each() 方法进行循环：
cy.get('.list-item').each((item) => {
// ...
})在循环中，我们需要对每个列表项进行点击。这里我们使用 cy.wrap() 将列表项包装成一个可 Cypress 调用的对象，并调用 click() 方法：
cy.wrap(item).click()
为了验证打开的模态框是否正确，我们需要定义一个函数来等待模态框的出现。这里我们将等待的代码封装成 waitForModal() 函数：
function waitForModal() {
cy.get('.modal').should('be.visible')
cy.get('.modal-body').should('contain', 'Content')
}在循环中，我们可以使用 then() 方法调用 waitForModal() 函数进行等待：
cy.wrap(item).click().then(() => {
waitForModal()
})至此，完整的代码如下：
-- -------------------- ---- -------
--------- ---- ---- --- ------ ------- -- -- -
-------------------------------- -- -
----------------------------- -- -
--------------
--
--
--
-------- -------------- -
-------------------------------------
--------------------------------------- ----------
-指导意义
本文通过一个示例介绍了 Cypress 如何使用 cy.wrap() 对多个元素进行操作，可以更好的应对一些批量操作场景。同时，本文还提供了一个等待模态框的函数示例作为参考，可以更好的理解 Cypress 的使用方法。
对于前端自动化测试工具 Cypress 的学习，需要不断的进行实践和总结，积累自己的经验。希望本文的介绍能够帮助你更好的使用 Cypress 进行前端自动化测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5a137d20074f47a47995c