Cypress 中如何获取多个元素的属性
Cypress 是一个现代的前端测试框架。它提供了丰富的 API 来帮助你测试你的 Web 应用，包括了对 DOM 元素的交互和操作。在测试过程中，我们经常需要获取多个元素的属性，本文将介绍使用 Cypress 获取多个元素属性的方法。
获取单个元素属性
在 Cypress 中，获取单个元素的属性非常简单，可以使用 cy.get 和 invoke 方法来获取元素的属性。例如，以下是获取元素的 id 属性的示例代码：
cy.get('#my-element').invoke('attr', 'id').then((id) => { expect(id).to.equal('my-element'); });
在这个例子中，cy.get('#my-element') 获取到一个元素后，使用 invoke 方法来获取这个元素的 attr 属性，attr 是 jQuery 的一个方法，第一个参数是属性名，第二个参数是属性值。在这个例子中，属性名是 id，所以它返回了该元素的 id 属性。
获取多个元素属性
如果需要获取多个元素的属性，我们可以先使用 cy.get 方法来获取一个元素列表，然后使用 each 方法遍历每个元素并获取属性。例如，以下是获取多个元素 class 属性的示例代码：
cy.get('.my-elements').each(($el, index, $list) => { const className = $el.attr('class'); expect(className).to.contain('my-class'); });
在这个例子中，cy.get('.my-elements') 获取到一组元素后，使用 each 方法遍历每个元素。在 each 中，第一个参数 $el 表示当前元素的 jQuery 对象，我们可以通过 $el.attr 方法获取元素的 class 属性。each 的第二个参数 index 表示当前元素在元素列表中的位置，第三个参数 $list 表示整个元素列表。
如果想要获取多个元素的不同属性，可以使用 each 方法和一个对象来存储每个元素的属性。以下是获取多个元素的 id 和 class 属性的示例代码：
-- -------------------- ---- ------- ----- -------- - --- --------------------------------- ------ ------ -- - ----- -- - --------------- ----- --------- - ------------------ --------------- - - --- --------- -- ---------- -- - --------------------------------------------- ----------------------------------------------------- --------------------------------------------- ----------------------------------------------------- ---展开代码
在这个例子中，我们定义了一个空的对象 elements，然后在 each 中，我们遍历每个元素并获取它们的 id 和 class 属性，然后把这些属性存储在 elements 对象中，并以元素在元素列表中的位置作为索引。在 then 回调函数中，我们可以使用 expect 断言来比较 elements 对象中的属性值。
总结
在 Cypress 中，获取多个元素属性与获取单个元素属性的方法并没有太大的差别。我们可以先使用 cy.get 方法获取元素列表，然后使用 each 方法遍历每个元素并获取属性，最后使用对象来存储每个元素的属性。希望这篇文章能够帮助你更好地使用 Cypress 进行前端测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ec50f48841e9894d2c6de
