Cypress 如何获取特定属性值的数组

在使用 Cypress 进行自动化测试时，如果我们需要获取页面上特定属性的数组，可以借助 Cypress 的 .each() 函数来迭代处理每个元素，并利用 .invoke() 函数来获取属性值。下面是一个具体的例子说明如何实现这一功能。

假设我们有一个页面上有多个 <input> 元素，每个元素都有一个 data-id 属性，我们想要获取所有这些 data-id 的值，并将它们存储在一个数组中。

示例代码

javascript
// 定义一个空数组来存储 data-id 属性值
let dataIds = [];

// 使用 Cypress 的 `cy.get()` 函数获取所有 input 元素
// 然后使用 `.each()` 函数迭代每个元素
cy.get('input').each(($el) => {
  // 使用 `.invoke()` 函数获取每个元素的 `data-id` 属性值
  cy.wrap($el).invoke('attr', 'data-id')
    .then(dataId => {
      // 将获取到的属性值添加到数组中
      dataIds.push(dataId);
    });
}).then(() => {
  // 在完成所有迭代后，我们可以在这里使用 dataIds 数组
  // 例如，输出数组或对数组进行断言等操作
  console.log(dataIds); // 输出所有 data-id 值
  expect(dataIds).to.have.length.above(0); // 断言数组不为空
});

解释

1. 定义数组: 首先定义一个空数组 dataIds，用于存储每个元素的 data-id 属性值。

2. 获取元素: 使用 cy.get('input') 来选取页面上所有的 <input> 元素。

3. 迭代元素: 使用 .each() 方法来迭代这些元素。对于每个元素，我们使用 cy.wrap($el) 来将 jQuery 元素包装为 Cypress 对象，这样就可以在它上面使用 Cypress 的命令。

4. 获取属性值: 使用 .invoke('attr', 'data-id') 来获取当前元素的 data-id 属性值。

5. 存储属性值: 在 .then() 函数中，我们获取到属性值后，将其添加到 dataIds 数组中。

6. 使用数组: 在所有元素迭代完成后，可以使用 .then() 来处理 dataIds 数组，比如进行输出、断言等操作。

这种方法不仅适用于 data-id 属性，也可以用于获取任何属性的集合，只需将获取属性的部分调整为相应的属性名即可。