如何在 Cypress 中比较 2 个元素（可变价格）？

Question

我正在测试电子商店。

我正在尝试验证如果您购买一种产品，价格将与最终购买价格相同。

• 第一个元素“最终价格”是根据产品（1 个特定产品）的价格及其数量计算得出的。所以它是可变的。
• 第二个元素“价格持有者”是通过所有购买产品相加计算得出的。它也是可变的。

如果我只购买 1 种特定产品（与数量无关），则最终价格 = 价格持有者。

如何验证价格是否相等？我不能使用 .should("have.text", 特定文本)，因为数字是动态的。

我找到这两个元素并记录它们的文本。我试图比较它们，但结果显示错误，FinalPrice 未定义。是因为const是之前在函数中定义的吗？

也许我必须采取另一种方式。您看到更好的解决方案吗？

 cy.log("Log Final Price") 
   cy.get(".final-price")
    .find("strong")
      .then(($strong) => {
        const FinalPrice = $strong.text()
        cy.log(FinalPrice);
      })

    cy.log("Log Price Holder") 
        cy.get(".price-holder")
          .then(($span) => {
            const PriceHolder = $span.text()
            cy.log(PriceHolder)
      })

    cy.log("Price Equality")
    cy.get(FinalPrice).should("be.equal", PriceHolder)

Answer 1

您可以将中间数据保存到别名中

// select an item
cy.get(".price-holder")
  .invoke('text')
  .as('priceHolder')

cy.get(".final-price")
  .find("strong")
  .invoke('text')
  .as('final')

cy.get('@final').then((final) => {
  cy.get('@priceHolder').then((priceHolder) => {
    expect(parseFloat(final)).to.eq(parseFloat(priceHolder))
  })
})

当然，如果没有中间步骤，你可以直接嵌套查询

cy.get(".final-price")
  .find("strong")
  .invoke('text')
  .then(text => parseFloat(text))
  .then((final) => {
    cy.get(".price-holder")
      .invoke('text')
      .then(text => parseFloat(text))
      .should('eq', final)
  })

但通常您会进行某种页面操作，例如为购物车选择商品，因此使用别名是进行此类测试的方法。