FindElement by XPath：嵌套的 div/类

Question

我正面临抓取元素/元素的问题。我得到了具有“金额”值的产品列表，在该字段之间有两个按钮：“-”和“+”，这增加了该字段的总金额。

我需要抓住两者：加号或减号才能正确测试它。我已经通过 css 选择器完成了，但是现在需要通过 XPath 来完成。

var increaseIngredientButton = driver.FindElement(By.CssSelector(".product-ingredient-list > div:nth-child(2) > div:nth-child(3) > div:nth-child(3)"));

这里是 HTML sn-p：Here

首先，我需要找到合适的行 - product-ingredient-row（具体产品有很多行），通过它的名称区分它 - product ingredients-name （名称是唯一的），最后选择 div 加减号。有人可以告诉我应该怎么做，因为不幸的是不知道......

此外，使用 XPath 或 Cssselectors 更好吗？有没有可能用 XPath 稍微抓住一切？

<div class="product-details-container">
   <div class="product-details-header">
      <div class="product-details-name">Berlusconi</div>
      <div class="product-details-price">
      </div>
      <div class="product-details-total-price">
         <div>Total: </div>
         <div>
            <!-- react-text: 3872 -->11.90<!-- /react-text --><!-- react-text: 3873 --> €<!-- /react-text -->
         </div>
      </div>
      <div class="product-details-close"></span></div>
   </div>
   <div class="product-details-scrollable-area">
      <div class="product-details-allergenics">
         <div>Allergenics:</div>
         <div>None</div>
      </div>
      <div class="product-details-description-expander">
         <div>
            <div style="padding-bottom: 0px;">
               <div style="padding: 16px; font-weight: 500; box-sizing: border-box; position: relative; white-space: nowrap; cursor: pointer;">
                  <div style=><span style="></span></div>
                  <button tabindex="0" type="button" style=>
                     <div>
                        <svg viewBox="0 0 24 24" style=">
                           <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"></path>
                        </svg>
                     </div>
                  </button>
               </div>
            </div>
         </div>
      </div>
      <div class="product-ingredient-row header">
         <div class="product-ingredient-name">Ingredients:</div>
         <div class="product-ingredient-price">Unit price:</div>
         <div class="product-ingredient-quantity-container">Amount:</div>
      </div>
      <div class="product-ingredient-list">
         <div class="product-ingredient-row">
            <div class="product-ingredient-name">Kotipizza-juusto</div>
            <div class="product-ingredient-price">
               <!-- react-text: 3908 -->0.00<!-- /react-text --><!-- react-text: 3909 --> €<!-- /react-text -->
            </div>
            <div class="product-ingredient-quantity-container">
               <div>−</div>
               <div>1</div>
               <div>+</div>
            </div>
         </div>
         <div class="product-ingredient-row">
            <div class="product-ingredient-name">tomaattikastike</div>
            <div class="product-ingredient-price">
               <!-- react-text: 3926 -->0.00<!-- /react-text --><!-- react-text: 3927 --> €<!-- /react-text -->
            </div>
            <div class="product-ingredient-quantity-container">
               **<div>−</div>
               <div>1</div>
               <div>+</div>**
            </div>
         </div>
         <div class="product-ingredient-row">
            <div class="product-ingredient-name">kantarelli</div>
            <div class="product-ingredient-price">
               <!-- react-text: 3962 -->0.00<!-- /react-text --><!-- react-text: 3963 --> €<!-- /react-text -->
            </div>
            <div class="product-ingredient-quantity-container">
               <div>−</div>
               <div>1</div>
               <div>+</div>
            </div>
         </div>
         <div class="product-ingredient-row">
            <div class="product-ingredient-name">savuporo</div>
            <div class="product-ingredient-price">
               <!-- react-text: 3971 -->0.00<!-- /react-text --><!-- react-text: 3972 --> €<!-- /react-text -->
            </div>
            <div class="product-ingredient-quantity-container">
               <div>−</div>
               <div>1</div>
               <div>+</div>
            </div>
         </div>
         <div class="product-ingredient-row">
            <div class="product-ingredient-name">punasipuli</div>
            <div class="product-ingredient-price">
               <!-- react-text: 3980 -->0.00<!-- /react-text --><!-- react-text: 3981 --> €<!-- /react-text -->
            </div>
            <div class="product-ingredient-quantity-container">
               <div>−</div>
               <div>1</div>
               <div>+</div>
            </div>
         </div>
         <div class="product-ingredient-row">
            <div class="product-ingredient-name">pizzapohja, runsaskuituinen</div>
            <div class="product-ingredient-price">
               <!-- react-text: 3989 -->0.00<!-- /react-text --><!-- react-text: 3990 --> €<!-- /react-text -->
            </div>
            <div class="product-ingredient-quantity-container">
               <div>−</div>
               <div>1</div>
               <div>+</div>
            </div>
         </div>
      </div>
      <button class="add-ingredient-btn" tabindex="0" type="button" style=>
         <div><span style=>Add Ingredient</span></div>
      </button>
   </div>
   <div class="product-details-actions">
      <div style=>
         <button tabindex="0" type="button" style=>
            <div>
               <div style=>Add to cart</span></div>
            </div>
         </button>
      </div>
   </div>
</div>

Answer 1

首先，您需要按名称获取行。要通过 xpath 执行此操作，请使用以下 xpath：

IWebElement rowByName = driver.FindElement(By.XPath("//div[text()='punasipuli']"));

这将返回那个 div。

然后 + 和 - 嵌套在该元素的兄弟元素中。所以你现在可以做的是：

var plusDiv = rowByName.FindElement(By.XPath("..//div[text()='+']"));
var minusDiv = rowByName.FindElement(By.XPath("..//div[text()='-']"));

您在这里所做的是，使用..，您将转到父元素（即<div class="product-ingredient-row">），然后在该div 中查找带有文本+ 或- 的任何级别的div。由于只有 1 个带 + 的 div 或 1 个带 - 的 div，您总能得到您要查找的元素。