如何在Cypress中比较两个动态价格元素？

问题根源 #

你代码中报错「FinalPrice未定义」，是因为FinalPrice和PriceHolder是在各自.then()回调内定义的局部变量，外部无法访问；再加上Cypress的异步执行特性，直接在外部执行断言时，变量还未完成赋值。

方案一：嵌套.then()（推荐，符合Cypress异步逻辑） #

通过嵌套回调，确保第二个价格的获取在第一个价格拿到后执行，同时内部变量可互相访问：

cy.log("Log Final Price") 
cy.get(".final-price")
  .find("strong")
  .then(($strong) => {
    const finalPrice = $strong.text().trim(); // 去除文本前后空格，避免格式干扰
    cy.log(finalPrice);

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

        cy.log("Price Equality")
        // 使用Chai断言直接比较变量值
        expect(finalPrice).to.equal(priceHolder);
      })
  })

方案二：使用Cypress别名存储变量 #

通过as()给变量设置别名，后续在回调中取出比较：

cy.log("Log Final Price") 
cy.get(".final-price")
  .find("strong")
  .invoke('text') // 直接获取文本，替代.text()
  .trim()
  .as('finalPrice')
  .then((text) => cy.log(text));

cy.log("Log Price Holder") 
cy.get(".price-holder")
  .invoke('text')
  .trim()
  .as('priceHolder')
  .then((text) => cy.log(text));

// 等待两个别名赋值完成后执行断言
cy.get('@finalPrice').then((finalPrice) => {
  cy.get('@priceHolder').then((priceHolder) => {
    cy.log("Price Equality")
    expect(finalPrice).to.equal(priceHolder);
  })
})

额外注意事项 #

• 若价格包含货币符号（如$99.99），可提取纯数字后再比较，避免符号干扰：

  const finalPriceNum = parseFloat(finalPrice.replace(/[^0-9.]/g, ''));
  const priceHolderNum = parseFloat(priceHolder.replace(/[^0-9.]/g, ''));
  expect(finalPriceNum).to.equal(priceHolderNum);
  

• 优先使用expect断言普通变量，cy.get().should()更适合DOM元素状态断言。

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