Question

我有一小段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>

Answer 1

:nth-child的{{3}}是：

：nth-child（an + b）CSS伪类匹配在文档树中具有+ 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仅考虑元素类型，而不考虑class es。如果您的.highcharts-button元素不是其父级下的第一个g，则上述选择器仍然可以最终选择任何内容。

Answer 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)

Selenium：XPath可以找到元素而不是CSS为什么？

2 个答案: