Selenium 选择有几个孩子都命名相同的孩子

Question

一般来说，Selenium 和 Web 的新手，我在尝试使用 XPath 查找和元素时遇到了一个未找到元素的问题。

selenium.common.exceptions.NoSuchElementException

我一直在试图弄清楚它，但我似乎无法解开它。如果我错过了明显的事情，请提前道歉。但如果是简单的google一下，我还没有遇到过这个词。

当我查看检查元素时，我得到以下两个 XPath 选项

//*[@id='fundamental-analysis-summary-container']/ul/li[1]/div[2]/div[1]/div/div[1]/div

/html/body/div[3]/div[2]/div[1]/div[10]/div/div/div[2]/div/div/ul/li[1]/div[2]/div[1]/div/div[1]/div

我要抓取四个不同的孩子，它们都是这些值的变体，包括 li[1]、li[2]、li[3] 和 li[4]

我要特别提取的 html 行是来自以下内容的 componentValue。

<div class="rating-text" ng-bind="data.componentValue">84</div>

周围的html看起来像

<div id="foo-analysis-summary-container" class="foo-analysis-summary" data="fooAnalysis">
    <!----><ul class="analysis-items" ng-if="hasData == true">
        <li class="foo-analysis-item summary" title="Valuation" scs-url="fooData.scsUrl" category="Valuation" low-label="Overvalued" high-label="Undervalued" data="fooData.valuation">
    <!----><div class="fas-title" ng-if="mode == 'summary'">
        <div class="tooltip-overlay-container" label="Valuation" container-id="foo-analysis-summary-container" content="How much item is worth">
  <!---->
  <!----><a class="tooltip-label" ng-if="title == undefined &amp;&amp; label != undefined" title="Valuation" ng-click="onClick()" ng-bind="label">Valuation</a><!---->

  <div class="overlay-container" ng-class="{'isVisible': isVisible}" ng-style="{'top': overlayTop, 'left': overlayLeft, 'width': width }" style="width: 270px;">
    <div class="tooltip-pointer down-pointer ng-hide" ng-show="isUp == false" ng-style="{'left': arrowLeft}" aria-hidden="true"><div class="rsh_snapshot_sprite_img rsh_snapshot_sprite_pointer_up"></div></div>
    <div class="tooltip-overlay-content">
      <div class="rsh_snapshot_sprite_img rsh_snapshot_sprite_close_gray close-icon" ng-click="onClose()" role="button" tabindex="0"></div>
        <!----><div ng-if="label != undefined" class="tooltip-title" ng-bind="label">Valuation</div><!---->
        <!---->
        <!----><div ng-if="!hasTransclusion &amp;&amp; !contentHtml" class="tooltip-text">N/A</div><!---->

        <!---->
    </div>
    <div class="tooltip-pointer up-pointer ng-hide" ng-show="isUp == true" ng-style="{'left': arrowLeft}" aria-hidden="true"><div class="rsh_snapshot_sprite_img rsh_snapshot_sprite_pointer_up"></div></div>
  </div>
</div>
    </div><!---->
    <!---->
    <!----><div class="scale" ng-if="hasData == true">
        <div class="rating-cursor">
            <div class="rating-label" ng-style="{'left': 'calc(' + data.componentValue + '% - 10px)'}" style="left: calc(84% - 10px);">
                <div aria-atomic="true"><span class="screen-reader-only">current = </span><div class="rating-text" ng-bind="data.componentValue">84</div></div>
                <div class="triangle-cursor"></div>
            </div>
        </div>
        <div class="ruler">
            <div class="separator s1"></div>
            <div class="separator s2"></div>
            <div class="separator s3"></div>
            <div class="separator s4"></div>
            <div class="current-value" ng-style="{'width': data.componentValue + '%'}" style="width: 84%;"></div>
        </div>
        <div class="fas-labels">
            <div aria-atomic="true"><div class="start-value-label" ng-bind="lowLabel">Overvalued</div><span class="screen-reader-only"> = 0</span></div>
            <div aria-atomic="true"><div class="end-value-label" ng-bind="highLabel">Undervalued</div><span class="screen-reader-only"> = 100</span></div>
        </div>
    </div><!---->

    <!-- Detail Metrics -->
    <!---->

    <!---->
</li>
    ... repeated three times with different values ...
</div>

我尝试执行的代码如下。

browser.find_element_by_xpath("//*[@id='fundamental-analysis-summary-container']/ul/li[1]/div[2]/div[1]/div/div[1]/div")

我已经让它与 find_element_by_css_selector 一起工作，但从我对谷歌搜索的有限掌握的情况来看，由于 li 在这种情况下它不起作用，我必须使用 xpath。如果有帮助，css 选择器是

li.foo-analysis-item:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)

或者这个

#foo-analysis-summary-container > ul > li:nth-child(1) > div.scale > div.rating-cursor > div > div:nth-child(1) > div

Answer 1

要让您的元素文本考虑到li，您可以使用以下 css 选择器：

el_text = driver.find_element_by_css_selector(".foo-analysis-item.summary:nth-of-type(1) .rating-text").text

或以下 xpath 之一：

el_text = driver.find_element_by_xpath("//li[1]//div[@class='rating-text']").text

el_text = driver.find_element_by_xpath("//li[1]//div[@ng-bind='data.componentValue']").text