如何在Cypress中统计类名匹配指定模式的标签数量？

方法1：使用CSS属性选择器进行前缀+后缀匹配 #

针对类名以walkme-开头、以-tab-name结尾的元素，可以直接组合CSS属性选择器定位，再获取元素集合的长度：

// 验证数量是否为预期值
cy.get('[class^="walkme-"][class$="-tab-name"]').its('length').should('eq', 2)

// 若需要获取数值并做后续处理
cy.get('[class^="walkme-"][class$="-tab-name"]').its('length').then(count => {
  console.log(`符合条件的标签数量：${count}`)
  // 这里可添加断言、变量赋值等自定义逻辑
})

• [class^="walkme-"]：匹配类名以walkme-开头的元素
• [class$="-tab-name"]：匹配类名以-tab-name结尾的元素
• 两者组合后，可精准选中所有符合walkme-*-tab-name模式的标签

方法2：使用.filter()结合正则实现灵活匹配 #

如果需要更严格的规则（比如确保类名中间是数字），可以用正则表达式配合.filter()筛选元素：

cy.get('[class*="walkme-"]').filter((index, element) => {
  // 正则匹配格式：walkme-数字-tab-name
  return /walkme-\d+-tab-name/.test(element.className)
}).its('length').should('eq', 2)

• 先通过[class*="walkme-"]选中所有包含walkme-类名的元素
• 再用.filter()遍历元素，通过正则验证类名是否符合要求
• 最后获取筛选后元素集合的长度

注意事项 #

如果元素的class属性包含多个类值（比如<div class="foo walkme-1-tab-name bar">），上述两种方法都能正常匹配，因为CSS选择器和正则表达式都会识别到目标类名。

内容的提问来源于stack exchange，提问作者Madhur Navandar