Selenium：XPath 可以找到元素但不能找到 CSS，为什么？答案

【问题标题】：Selenium: XPath can find element but not CSS why?Selenium：XPath 可以找到元素但不能找到 CSS，为什么？
【发布时间】：2014-12-16 14:46:25
【问题描述】：

我有一小段 HTML 代码，当我在其中使用 CSS 识别元素时，它会失败，而 XPath 可以正常工作。

我使用 CSS 标识符作为“div#chart_1 div svg g.highcharts-button:nth-child(1)”，当 XPath 正常工作时它不起作用。

HTML

<!DOCTYPE html>
<html>
  <body>
    <div id="overview-layout">
      <div id="overview-body">
        <div class="" id="overview-tabcontent-container">
          <div data-highcharts-chart="7" class="chart" id="chart_1">
            <div id="highcharts-26" class="highcharts-container">
              <svg height="304" width="1154" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <rect zIndex="1"></rect>
                <path zIndex="2"></path>

                <g transform="translate(73,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
                  <rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
                  <text zIndex="1" y="14" x="7.483333110809326">
                    <tspan x="7.483333110809326">1h</tspan>
                  </text>
                </g>

                <g transform="translate(103,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
                  <rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
                  <text zIndex="1" y="14" x="7.483333110809326">
                    <tspan x="7.483333110809326">4h</tspan>
                  </text>
                </g>

                <g transform="translate(133,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
                  <rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
                  <text zIndex="1" y="14" x="7.483333110809326">
                    <tspan x="7.483333110809326">8h</tspan>
                  </text>
                </g>

                <g transform="translate(163,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
                  <rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
                  <text zIndex="1" y="14" x="7.391666889190674">
                    <tspan x="7.391666889190674">All</tspan>
                  </text>
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

你试过div#chart_1 div svg g.highcharts-button:nth-child(3)吗？

标签： css selenium xpath selenium-webdriver css-selectors

【解决方案1】：

:nth-child 的 definition 是：

:nth-child(an+b) CSS 伪类匹配文档树中在它之前有 an+b-1 个兄弟的元素，对于给定的 n 的正值或零值，并且具有父元素.

您有g.highcharts-button:nth-child(1)，它将选择一个g.highcharts-button，它是其父元素的第一个子元素，但您的HTML 中没有这样的元素。 svg 元素的第一个子元素是 rect。

我建议尝试:nth-of-type。定义为：

:nth-of-type CSS 伪类匹配一个元素，该元素在文档树中具有一个+b-1 个同级元素，在它之前具有相同的元素名称，对于给定的 n 的正值或零值，并且具有父元素。

所以你可以这样做：

div#chart_1 div svg g.highcharts-button:nth-of-type(1)

请注意，这不是一个完美的解决方案，因为nth-of-type 只考虑元素类型，而不考虑classes。如果您的 .highcharts-button 元素不是其父元素下的第一个 g，则上述选择器最终仍可能什么都不选择。

【讨论】：

【解决方案2】：

您的 css 错误，您的元素是父 svg 的第三个子元素，所以如果您想检查以下元素。

g transform="translate(73,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button"

你需要将你的css修改为：

div#chart_1 div svg g.highcharts-button:nth-child(3)

【讨论】：