How to get the last element of an SVG on Selenium

Question

I'm having a problem getting the last element on a graphic inside a SVG:

Here's the code:

<div id="SitesVendorTech" class="mdl-card__title mdl-typography--text-center mdl-tabs__panel">
    <div id="vtKendoErrorsChart">
        <ul id="chartvtKendoErrorsChart" class="KendoChart undefined k-chart" data-role="chart" style="position: relative;">
          <svg style="width: 100%; height: 100%; overflow: hidden; left: -0.5px; top: 0px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
             <g> 
               <path d="M0 0 L 869 0 869 400 0 400Z" stroke="none" fill="none"></path>
               <path d="M33 14 L 854.711 14 854.711 276.582 33 276.582Z" stroke="none" fill="#fff" fill-opacity="0"></path>
               <g>
                 <g clip-path="url(#kdef24)">
                  <g>
                   <path d="M58.679 55.915 L 110.036 128.453 161.392 128.453 264.107 58.475 366.821 128.683 418.178 128.683 469.534 128.978 520.891 128.978 623.605 128.978 674.962 128.978 726.319 198.924 777.676 128.978 829.033 129.667" stroke="#D81B60" stroke-width="2" fill="none"></path>
                   <circle cx="58.679" cy="55.915" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="110.036" cy="128.453" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="161.392" cy="128.453" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="264.107" cy="58.475" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="366.821" cy="128.683" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="418.178" cy="128.683" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="469.534" cy="128.978" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="520.891" cy="128.978" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="623.605" cy="128.978" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="674.962" cy="128.978" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="726.319" cy="198.924" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="777.676" cy="128.978" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="829.033" cy="129.667" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>
                   <circle cx="58.679" cy="55.915" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="110.036" cy="128.453" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="161.392" cy="128.453" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="264.107" cy="58.475" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="366.821" cy="128.683" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="418.178" cy="128.683" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="469.534" cy="128.978" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="520.891" cy="128.978" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="623.605" cy="128.978" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="674.962" cy="128.978" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="726.319" cy="198.924" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="777.676" cy="128.978" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
                   <circle cx="829.033" cy="129.667" r="4" stroke="#000" stroke-width="0" stroke-opacity="1" fill="#D81B60" fill-opacity="1" style="display: none;"></circle>
               </g>
             </g>
          </svg>
        </ul>
    </div>
</div>

So I need to get the element circle at 13 position (<circle cx="829.033" cy="129.667" r="4" stroke="#D81B60" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle>)

But my problem is when I do something like this

ReadOnlyCollection<IWebElement> elementonG = _driver.FindElements(By.CssSelector("circle"));

it returns me 350 elements that are present on the page... since I only need the 13 position of the specific code... how can I get it?

Note: when I tried to get from the Xpath it won´t work (something like

Assert.isTRue(driver.FindElements(By.Xpath("//*[@id='chartvtKendoErrorsChart']/svg/g/g[1]/g[4]/g/circle[13]"));

Thanks

Answer 1

您将需要使用:last-child css选择器

Answer 2

尝试使用：

IWebElement acir= _driver.FindElement(By.CssSelector("circle:nth-of-type(13)"));