Question

我正在抓住一个元素/元素面临问题。我得到了＆＃34; Amount＆＃34;值，在该字段之间有两个按钮：＆＃34; - ＆＃34;和＆＃34; +＆＃34;这增加了该领域的总量。

我需要抓取的是：加号或减号以便正确测试。我已经通过css选择器完成了它，但是现在需要通过XPath来实现它。

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

以下是HTML代码段：Here

首先，我需要找到合适的行 - product-ingredient-row （有许多特定产品行），按名称区分它 - 产品成分名称（名称是唯一的），最后用加号或减号选择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的div - 。因为只有一个div带有+或1个带有 - 的div，所以你总会得到你想要的元素。

XPath的FindElement：嵌套的div / classes

1 个答案: