如何使用Cypress实现电商应用商品的动态点击操作？

方案1：基于文本匹配的自定义命令封装 #

你可以直接在Cypress的全局命令文件中封装动态点击逻辑，调用时仅需传入商品名称即可：

1. 将以下代码添加到cypress/support/commands.js文件中：

Cypress.Commands.add('clickProductByName', (productName) => {
  // 替换为你实际的商品卡片选择器
  cy.get('.product-item')
    // 匹配卡片内对应商品名称，{matchCase: false}可配置是否忽略大小写
    .contains(productName, { matchCase: false })
    // 向上查找父级商品卡片，层级根据实际DOM结构调整
    .closest('.product-item')
    // 可选：滚动到可见区域后再点击
    .scrollIntoView()
    .click()
})

2. 业务代码调用示例：

// 无需硬编码下标，直接传入商品名称即可触发点击
cy.clickProductByName('你要选择的商品名称')

// 也支持参数化批量测试
const testProducts = ['商品A', '商品B', '商品C']
testProducts.forEach(product => {
  cy.clickProductByName(product)
  // 补充商品详情页断言逻辑
  cy.go('back')
})

方案2：精准匹配优化（适配特殊文本场景） #

如果商品名称存在空格、特殊字符等容易模糊匹配错误的情况，可以用filter方法实现完全匹配：

Cypress.Commands.add('clickProductByName', (productName) => {
  cy.get('.product-item')
    .filter((_, el) => {
      // 替换为你实际的商品名称字段选择器
      const currentName = Cypress.$(el).find('.product-name').text().trim()
      // 完全匹配用===，部分匹配改用includes即可
      return currentName === productName
    })
    .click()
})

注意事项 #

• 代码中的.product-item、.product-name需要替换为你页面实际对应的元素选择器，可从元素详情面板复制对应的类名、属性选择器
• 如果商品列表是懒加载渲染的，可以在get商品卡片前添加等待接口返回的逻辑，避免元素未加载导致匹配失败
• 如有重名商品，可以扩展参数增加价格、分类等维度做联合筛选，避免误点击

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