代码之家 › 专栏 › 技术社区 › Ixi11

XPath的FindElement:嵌套的div/class

selenium-chromedriver selenium-webdriver selenium c#

Ixi11 · 技术社区 · 7 年前

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

为了正确地测试它,我需要掌握的是正负两个方面。我已经通过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

首先,我需要找到合适的行- 产品成分行 (具体产品有多行),按it名称区分- 产品成分名称 (名称是唯一的),最后选择带加号或减号的div。有人能告诉我应该怎么做吗,因为不幸的是,我不知道。。。

此外,最好使用XPath或CSSSelector?是否有可能使用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>

1 回复 | 直到 7 年前

Anand 7 年前

因此,首先,您需要按名称获取行。要通过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中,您正在查找具有text+或-。由于只有1个div和+或1个div和-,因此您将始终得到您要查找的元素。