Cypress数值比较问题：添加购物车后断言失败（1等于NaN）

错误原因 #

1. NaN产生原因：页面中.cart-qty元素的文本格式是类似(0)的带括号形式，直接取innerText转Number会得到NaN，因为括号不属于数字字符，无法被正常转换。
2. 断言逻辑错误：原代码点击按钮后，断言的是按钮元素的length（固定为1），这和购物车数量没有关联，完全偏离了“对比加入购物车的商品数量与购物车中数量”的测试需求。

修复方案 #

步骤1：提取购物车纯数字 #

用正则表达式从.cart-qty的文本中提取纯数字部分，再转换为数值类型，规避非数字字符的干扰。

步骤2：修正断言逻辑 #

点击加入购物车后，重新获取购物车的最新数量，断言其等于初始数量 + 新增的4件商品，这才符合测试的核心逻辑。

修正后的代码 #

// 获取初始购物车数量
cy.get('.cart-qty').then($cartQty => {
  // 提取文本中的纯数字
  const initialQty = Number($cartQty.text().match(/\d+/)[0]);
  
  // 设置订购数量并加入购物车
  cy.get('#product_enteredQuantity_1').clear().type(4);
  cy.get('#add-to-cart-button-1').click();
  
  // 等待购物车更新后断言数量变化
  cy.get('.cart-qty').then($updatedCartQty => {
    const updatedQty = Number($updatedCartQty.text().match(/\d+/)[0]);
    expect(updatedQty).to.eq(initialQty + 4);
  });
});

额外说明 #

• 如果加入购物车后出现弹窗提示（比如“商品已加入购物车”的确认框），需要先处理弹窗（如点击“Continue shopping”按钮），再执行购物车数量的断言。
• Cypress会自动等待DOM更新，重新获取.cart-qty即可拿到最新的购物车数量，无需额外添加等待命令。

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