Cypress如何查询网页元素值并配对获取商品新旧价格

你这段代码拿不到配对返回值的核心原因是Cypress的命令全是异步排队执行的，内层then里return的[$el1, $el2]只会停在内层的Cypress调用链里，不会穿透两层嵌套传到外层，你在嵌套外面写分析逻辑的时候，根本拿不到这两个元素的值。
而且如果你的商品列表里有多组原价、折扣价，直接全局选.el1和.el2很容易出现价格错配——比如第一个商品的原价配了第二个商品的折后价，算出来的折扣全是错的。

• 单组价格场景（页面只有1个原价、1个折后价）
  用Cypress.Promise.all把两个取元素的逻辑包一层，就能直接拿到配对好的结果，建议取元素的时候直接把文本取出来转成数字，省得后续再处理：

cy.then(() => {
  return Cypress.Promise.all([
    cy.get('.el1').invoke('text').then(text => Number(text.trim().replace(/[^\d.]/g, ''))),
    cy.get('.el2').invoke('text').then(text => Number(text.trim().replace(/[^\d.]/g, '')))
  ])
}).then(([originalPrice, discountPrice]) => {
  // 所有价格对比、折扣计算逻辑全写在这里
  const discount = (discountPrice / originalPrice * 10).toFixed(1)
  // 举个断言例子：折扣不低于3折
  cy.wrap(Number(discount)).should('be.gte', 3)
})

• 多商品列表场景（多组价格配对）
  别全局搜两类价格标签，直接遍历每个商品的父容器，在单个商品容器范围内找对应的原价、折后价，从根源上避免配错对：

// 把.product-item替换成你页面里单个商品卡片的选择器
cy.get('.product-item').each($productCard => {
  const originalPrice = Number($productCard.find('.el1').text().trim().replace(/[^\d.]/g, ''))
  const discountPrice = Number($productCard.find('.el2').text().trim().replace(/[^\d.]/g, ''))
  // 单商品的价格校验、折扣计算直接在这里写
  expect(discountPrice).to.be.lessThan(originalPrice)
})

踩坑提醒：别在Cypress命令链外面写同步的价格分析代码，所有依赖页面元素值的逻辑，必须放到对应取值命令的回调里跑，否则大概率拿到undefined，因为代码执行的时候页面元素还没取到。

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