5

I have an SVG object with a few rectangle elements. Using geckodriver, I am trying to click on one of the main SVG object. However with xpath-checker I am unable to detect the proper xpath for the same.

Till now, I am able to drilldown through xpath upto:

id('avg_score_chart')/div/div[1]/*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']

My HTML code is as follows:

<div id="avg_score_chart" class="chart" style="height: 250px; color: black ! important; overflow: hidden; text-align: left;">
<div class="amcharts-main-div" style="position: relative;">
<div class="amcharts-chart-div" style="overflow: hidden; position: relative; text-align: left; width: 525px; height: 212px; padding: 0px;">
<svg version="1.1" style="position: absolute; width: 525px; height: 212px; top: 0.450012px; left: -0.5px;">
<desc>JavaScript chart by amCharts 3.17.1</desc>
<g>
<g>
<g>
<g>
<g>
<g>
<g transform="translate(60,52)">
<g transform="translate(96,41)">
<g transform="translate(96,123)">
<g transform="translate(96,123)">
<path cs="100,100" d="M0.5,0.5 L0.5,-81.5 L30.5,-81.5 L30.5,0.5 L0.5,0.5 Z" fill="rgb(242,244,28)" stroke="rgb(242,244,28)" fill-opacity="0.8" stroke-width="1" stroke-opacity="0.8">
</g>
<g transform="translate(318,123)">
<g transform="translate(318,123)">
<g transform="translate(318,123)">
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<g>
</svg>

Can anyone help me out please?

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352

2 Answers2

8

Try following XPath and let me know if problem still persist:

//div[@id="avg_score_chart"]//*[name()="svg"]

For <g> elements:

//div[@id="avg_score_chart"]//*[name()="svg"]/*[name()="g"]

Update

Finally, this should be nearly the best option:

//div[@class="portlet light boxshadow"][contains(.,"Store Wise Performance")]/div//div[@class="amcharts-chart-div"]/*[name()="svg"]//*[name()="g"]/*[name()="path" and @fill="rgb(242,244,28)"]
Andersson
  • 51,635
  • 17
  • 77
  • 129
  • 1
    That's weird... I would have expected the SVG tag to work like any other tag, e.g. `//div[@id="avg_score_chart"]//svg`. Do you know why you have to use `name()`? – JeffC Jan 24 '17 at 14:00
  • 1
    For some tags (mostly from `XML` `DOM`) one need to use `/*[name()=tag_name]` syntax instead of common `/tag_name`... Sorry, have no idea why it so – Andersson Jan 24 '17 at 14:06
  • @Dev, please mark this answer as "Accepted" if it solved your problem. Thanks – Andersson Jan 24 '17 at 14:33
  • @Andersson, Thanks a ton for your valuable suggestion. 1. Using xpath as: /div[@id="avg_score_chart"]//*[name()="svg"] I can see (through xPathChecker) the Average Score Chart which have 2 elements and I want to click the first element. 2. Using xpath as: //div[@id="avg_score_chart"]//*[name()="svg"]/*[name()="g"] The XPathChecker finds 18 elements, which is the total number of SVG elements on the page. But I am still clueless how to get the xPath of the element for which I have pasted the code above. – undetected Selenium Jan 24 '17 at 14:41
  • @Dev, If there a few `svg` elements on page you can choose index to select second element: `(//div[@id="avg_score_chart"]//*[name()="svg"])[2]`. Tell me what is your target element as it's not quite clear from your question – Andersson Jan 24 '17 at 14:49
  • Tried with this xPath: //div[@id='avg_score_chart']//*[name()='svg']/*[name()='path'][starts-with(@d, 'M371.75,174.28l')] But it fails to detect & Click(As I am using Eclipse, I converted the double-quotes to single-quotes). So my click event was: driver.findElement(By.xpath("//div[@id='avg_score_chart']//*[name()='svg']/*[name()='path'][starts-with(@d, 'M371.75,174.28l')]")).click(); – undetected Selenium Jan 24 '17 at 14:54
  • As per my pasted code, my target was: Within SVG, the g[5] element (i.e. starting from 0), within that g[0] element, within that g[2] element – undetected Selenium Jan 24 '17 at 15:02
  • You mean that one ` ` ? – Andersson Jan 24 '17 at 15:08
  • Yes, I am looking for that and even //div[@id='avg_score_chart']//*[name()='svg']/*[name()='g'][5]/*[name()='g'][2] is not fetching me results through xChecker – undetected Selenium Jan 24 '17 at 15:11
  • And how about this one `(//div[@id="avg_score_chart"]//*[name()="svg"]//*[name()="g"])[10]`? – Andersson Jan 24 '17 at 15:12
  • @Andersson, thanks for your kind help. But this xPath //div[@id='avg_score_chart']//*[name()='svg']//*[name()='g'‌​])[10] showed error through xPathChecker & when executed through Eclipse gecko thrown an exception. Can you please guide me further ? – undetected Selenium Jan 25 '17 at 14:21
2

how about: //div[@id='avg_score_chart']//*[local-name()='svg']/*[*[local-name()='path']]

where you find any element with a 'path' element inside an 'svg' element inside a 'div' element with id 'avg_score_chart'.

Edit: placed the xpath in a code block

becixb
  • 365
  • 1
  • 9
  • Thanks for your kind help. I have tried out both the options but xPathChecker fails to detect element & Eclipse throws exception: //div[@id='avg_score_chart']//[local-name()='svg']/[*[local-name()='path']] and //div[@id='avg_score_chart']//[local-name()='svg']/[*[local-name()='path'][starts-with(@d, 'M371.75,174.28l')]] Can you please guide me further? – undetected Selenium Jan 25 '17 at 14:31
  • wait some of the characters are missing... got escaped probably. here's the correct one: `//div[@id='avg_score_chart']//*[local-name()='svg']/*[*[local-name()='path']]` – becixb Jan 25 '17 at 23:32
  • take note of the asterisk before local-name()='svg' and the two asterisks before local-name()='path' – becixb Jan 27 '17 at 00:18
  • Thanks a lot. I too have tried with //div[@id='avg_score_chart']//*[local-name()='svg']/*[*[loca‌​l-name()='path']] but xPathChecker returned error & Eclipse thrown an exception. I have updated the complete DOM. Would you please have a relook at that? – undetected Selenium Jan 27 '17 at 08:35
  • how about `//div[@id='avg_score_chart']//*[local-name()='svg']//*[*[loca‌​l-name()='path']]` – becixb Feb 01 '17 at 01:53