Cypress如何选择所有text-decoration为line-through的页面元素

原生CSS没有提供匹配元素计算后CSS样式属性的选择器语法。CSS选择器仅支持匹配标签名、DOM属性、结构关系、内置伪类状态，无法识别元素渲染后生效的text-decoration这类样式规则，要筛选带删除线的价格元素，需要在Cypress中遍历元素集合做样式校验过滤。

具体实现方法 #

• 先选中页面所有的价格元素
• 用Cypress的.filter()方法遍历元素，逐个校验元素的计算样式是否包含line-through
• 过滤后得到的集合就是所有原价带删除线的促销商品价格元素，可基于此提取商品信息、做断言

可直接运行的代码示例 #

// 获取所有价格元素
cy.get('span.amount')
  .filter(($el) => {
    // 拿到元素最终生效的计算样式
    const computedStyle = window.getComputedStyle($el[0])
    // 兼容不同浏览器的属性返回，优先判断text-decoration-line，兜底判断简写属性
    const hasLineThrough = 
      computedStyle.textDecorationLine.includes('line-through') 
      || computedStyle.textDecoration.includes('line-through')
    return hasLineThrough
  })
  // 拿到过滤后的促销商品价格集合
  .then($discountPriceEls => {
    // 示例：提取所有促销商品的价格文本
    const discountPriceList = Cypress.$.map($discountPriceEls, el => el.textContent.trim())
    // 如果要获取对应的完整商品项，可向上查找商品容器
    const $discountProductItems = $discountPriceEls.closest('.product-item')
    // 后续可针对商品列表做断言、提取信息等操作
  })

避坑说明 #

• 部分浏览器会把text-decoration简写属性拆分为独立属性返回，直接判断简写的text-decoration可能漏判，加上text-decoration-line的判断可以兼容所有浏览器场景
• 不要直接复用单元素校验时的.invoke('css')写法做批量过滤：.invoke()属于Cypress异步命令链方法，无法直接传入.filter()的同步回调函数中使用，过滤回调里要用原生DOM API或者jQuery方法同步获取样式

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