Cypress脚本问题：无法通过.find定位商品并添加至购物车

问题描述 #

• 学习JavaScript和Cypress，需实现无需知晓商品索引的通用定位商品并添加至购物车功能
• 当前使用.find方法后无任何响应：Cypress无报错、cy.log无输出、商品未加入购物车
• 已知商品索引时可成功添加，说明核心点击逻辑正常，但通用定位逻辑存在问题

原测试代码 #

/// <reference types="Cypress"/>

it ('ContarElementos', () => {
  cy.visit ('https://www.saucedemo.com/v1/inventory.html')

  cy.get('.inventory_list >')
  cy.get('.inventory_list >').as ('ProductosPopulares')
  cy.get('@ProductosPopulares').should('have.length', 6)
})

it ('Agregar elemento "top" al carrito de compra desde la pagina principal', function (){
  cy.visit ('https://www.saucedemo.com/v1/inventory.html')

  cy.get('.inventory_list >').as ('ProductosPopulares')

  cy.get('@ProductosPopulares')
  .find ('.inventory_item_name')
  .each(($el,index,$list) => {
      if($el.attr('.inventory_item_name') == 'Sauce Labs Onesie'){
          cy.log ('Se encontró lo buscado')
          cy.get ('@ProductosPopulares').eq(index).contains('ADD TO CART').click()
      } 
  })
})

已知索引时的可行代码（对比参考） #

it ('Agregar elemento "top" al carrito de compra desde la pagina principal', function (){
  cy.visit ('https://www.saucedemo.com/v1/inventory.html')

  cy.get('.inventory_list >').as ('ProductosPopulares')

  cy.get('@ProductosPopulares')
  .find ('.inventory_item_name')
  .each(($el,index,$list) => {
      if($el.attr('.inventory_item_name') == 'Sauce Labs Onesie'){
          cy.log ('Se encontró lo buscado')
      } 
  })
  cy.get ('@ProductosPopulares').eq(5).contains('ADD TO CART').click()
})

问题分析与解决方案 #

核心问题点 #

1. 属性获取逻辑错误：$el.attr('.inventory_item_name')是错误用法，.inventory_item_name是元素的类名，而非属性名。要获取商品名称，应该读取元素的文本内容而非属性。
2. 选择器不完整：cy.get('.inventory_list >')未指定子元素类型，可能匹配到非商品项的元素，导致后续遍历逻辑异常。
3. 索引调用冗余：在.each中通过cy.get('@ProductosPopulares').eq(index)定位按钮，不如直接从当前商品名称元素向上遍历父元素，更高效且避免索引偏移问题。

修正后的完整代码 #

/// <reference types="Cypress"/>

it ('ContarElementos', () => {
  cy.visit ('https://www.saucedemo.com/v1/inventory.html')
  // 明确选择每个商品项元素
  cy.get('.inventory_list > .inventory_item').as('ProductosPopulares')
  cy.get('@ProductosPopulares').should('have.length', 6)
})

it ('Agregar elemento "top" al carrito de compra desde la pagina principal', function (){
  cy.visit ('https://www.saucedemo.com/v1/inventory.html')
  // 明确选择每个商品项元素
  cy.get('.inventory_list > .inventory_item').as('ProductosPopulares')

  cy.get('@ProductosPopulares')
    .find('.inventory_item_name')
    .each(($el) => {
      // 读取元素文本并去除首尾空格，精准匹配目标商品名
      if($el.text().trim() === 'Sauce Labs Onesie'){
        cy.log('Se encontró lo buscado')
        // 从当前商品名称元素向上找到父商品容器，直接定位添加按钮
        $el.closest('.inventory_item').find('button').click()
      } 
    })
})

关键优化说明 #

• 选择器精准化：将cy.get('.inventory_list >')改为cy.get('.inventory_list > .inventory_item')，确保只匹配商品项元素，避免无效遍历。
• 文本匹配逻辑：用$el.text().trim()替代错误的attr调用，准确获取商品名称并避免空格干扰匹配结果。
• 通用定位实现：使用$el.closest('.inventory_item')找到当前商品的父容器，再通过.find('button')定位添加按钮，完全无需依赖商品索引，实现通用化的商品定位逻辑。

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