我的Cypress商品加购代码为何输出异常？与讲师代码差异分析

我正在学习Cypress，目标是实现项目中自动将不同商品添加到购物车的功能，目前在Udemy平台学习相关课程。课程里讲师用了一种实现方式，我自己写了另一种，但代码没有得到预期输出，以下是两种实现方式，求分析我的代码为何输出异常。

我的代码 #

cy.get('h4[class="card-title"]')
  .should("have.length", 4)
  .each(($el, index, $list) => {
    cy.contains(product_name)
      .should("be.visible")
      .and("have.text", product_name);
    cy.get("button.btn.btn-info").eq(index).click();
    cy.wrap($el).should("have.text", items[index]);
  });

输出情况 #

测试失败，提示expected <h4.card-title> to have text 'Samsung Note 8', but the text was 'Nokia Edge'

讲师的代码 #

this.data.product.forEach((product_name) => {
  cy.selectProduct(product_name);
});

command.js中的自定义命令 #

Cypress.Commands.add("selectProduct", (productName) => {
  cy.get("h4.card-title").each(($el, index, $list) => {
    if ($el.text().includes(productName)) {
      cy.get("button.btn.btn-info").eq(index).click();
    }
  });
});

问题分析 #

1. 全局定位导致元素匹配错误
   你在.each循环里直接调用cy.contains(product_name)，这个命令会在整个页面范围内查找匹配文本的元素，而非当前循环的$el元素。如果页面存在多个相似文本元素，或者目标商品不在当前循环的标题元素中，就会定位到错误的元素，触发断言失败。

2. 无差别点击按钮
   你的代码会循环所有4个标题元素，不管当前标题是不是目标商品，都会点击对应索引的按钮。这会导致错误添加非目标商品，同时后续的文本断言也会因为操作了错误元素而失败。

3. 断言逻辑不匹配
   cy.wrap($el).should("have.text", items[index])中，若items数组的内容与页面标题的实际顺序不匹配，或者items未正确定义，也会直接导致断言失败。

修正建议 #

参考讲师的逻辑，修改你的代码，只对匹配目标商品的元素进行操作：

cy.get('h4[class="card-title"]')
  .should("have.length", 4)
  .each(($el, index, $list) => {
    if ($el.text().includes(product_name)) {
      cy.wrap($el).should("be.visible").and("have.text", product_name);
      cy.get("button.btn.btn-info").eq(index).click();
    }
  });

或者像讲师一样封装成自定义命令，提升代码的复用性和可读性。

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