无法从DOM代码图片获取XPath，需实现指定商品加入购物车点击操作

由于所有商品的DOM结构完全一致，仅商品名称文本不同，核心思路是通过目标商品的唯一名称作为锚点，关联到对应的加入购物车按钮，以下是几种实用的实现方式：

• XPath 定位（最直接高效）
  假设商品名称在class="product-name"的元素中，加入购物车按钮在同一个商品容器内，class="add-to-cart-btn"，可以用以下表达式精准定位：

  //div[text()="你的目标商品名称"]/../button[contains(@class,"add-to-cart-btn")]
  

  若要更严谨（避免同名元素干扰），可先锁定包含目标名称的商品容器，再找内部按钮：

  //div[contains(@class,"product-item") and .//div[text()="你的目标商品名称"]]//button[contains(@class,"add-to-cart-btn")]
  

• 原生JS结合CSS选择器定位
  先筛选出包含目标名称的商品容器，再获取容器内的按钮：

  // 遍历所有商品卡片，找到匹配名称的那一个
  const allProductCards = Array.from(document.querySelectorAll('.product-card'));
  const targetCard = allProductCards.find(card => {
    const nameEl = card.querySelector('.product-name');
    return nameEl && nameEl.textContent.trim() === "你的目标商品名称";
  });
  // 找到后点击按钮
  if (targetCard) {
    targetCard.querySelector('.add-to-cart-btn').click();
  }
  

• DOM遍历定位
  先定位到目标商品名称元素，再通过父子/兄弟关系找到对应按钮：

  const targetNameEl = document.querySelector('.product-name');
  if (targetNameEl.textContent.trim() === "你的目标商品名称") {
    // 示例：按钮是名称元素的父容器下的子元素
    targetNameEl.parentElement.querySelector('.add-to-cart-btn').click();
  }
  

核心逻辑都是利用唯一的商品名称锁定对应商品容器，再在容器内操作按钮，避免误触其他商品的按钮。

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