CODEWITHSUNDEEP
cssseleniumxpathselenium-webdrivercss-selectors
Vikas Garg
Vikas Garg

Reputation: 26

Selenium: XPath can find element but not CSS why?

I have a small peice of HTML code in which when I use CSS for identifying elements, it fails while XPath is working fine on it.

I am using CSS identifier as "div#chart_1 div svg g.highcharts-button:nth-child(1)" which is not working while the XPath works correctly.

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>

Upvotes: 0

Views: 1071

Answers (2)

Paras
Paras

Reputation: 3235

Your css is wrong, your element is the third child of parent svg, so if you want to check for following element.

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

you need to modify your css to:

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

Upvotes: 1

JLRishe
JLRishe

Reputation: 101778

The definition for :nth-child is:

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

You have g.highcharts-button:nth-child(1), which would select a g.highcharts-button that is the 1st child of its parent element, but there is no such element in your HTML. The 1st child of the svg element is a rect.

I suggest trying :nth-of-type. It is defined as:

The :nth-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element.

So you can do:

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

Note that this is not a perfect solution, because nth-of-type only takes the element type into account, and not the classes. If your .highcharts-button element is not the first g under its parent, then the above selector can still end up selecting nothing.

Upvotes: 2

Related Questions