Cypress中如何获取多个元素的属性值并以数组格式返回？

问题原因 #

你编写的代码仅返回单个style属性值，是因为Cypress的invoke('attr', 'style')作用于多元素组成的jQuery集合时，默认只会提取第一个匹配元素的属性值。同时你原有代码中的Array.from(text2)也不符合需求：text2是单个元素的style字符串，执行Array.from()只会把字符串拆分为单个字符组成的数组，无法拿到多个元素的style属性集合。

实现代码 #

cy.get('#cdk-accordion-child-0').find('.pro-color-active').then($elements => {
  // 遍历所有匹配元素提取style属性，生成目标数组
  const styleList = $elements.toArray().map(domEl => domEl.getAttribute('style'))
  cy.log('所有style属性值数组：', styleList)

  // 如果需要在后续Cypress命令中使用该数组，可通过别名存储
  cy.wrap(styleList).as('colorActiveStyles')
})

// 后续使用数组的示例
cy.get('@colorActiveStyles').then(styleList => {
  // 在这里编写你的业务逻辑
  console.log(styleList)
})

逻辑说明 #

• 先通过find('.pro-color-active')拿到所有匹配的元素组成的jQuery集合
• 调用toArray()把jQuery集合转换为原生DOM元素数组
• 遍历每个DOM元素，调用原生方法getAttribute('style')获取style属性值，最终得到你需要的字符串数组
• 配合cy.wrap()和as()存储别名，可以避免Cypress异步逻辑导致的变量取值问题

内容的提问来源于stack exchange，提问作者Krina Modi