How to click on SVG elements using XPath and Selenium WebDriver through Java

Question

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?

Hollerman

Answer 1

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)"]

Ragg

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()? – Johnjohna

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 – Ragg

@Dev, please mark this answer as "Accepted" if it solved your problem. Thanks – Ragg

@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. – Hollerman

@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 – Ragg

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(); – Hollerman

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 – Hollerman

You mean that one <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> ? – Ragg

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 – Hollerman

And how about this one (//div[@id="avg_score_chart"]//*[name()="svg"]//*[name()="g"])[10]? – Ragg

@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 ? – Hollerman

Answer 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

Halfwit

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? – Hollerman

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']] – Halfwit

take note of the asterisk before local-name()='svg' and the two asterisks before local-name()='path' – Halfwit

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? – Hollerman

how about //div[@id='avg_score_chart']//*[local-name()='svg']//*[*[loca‌​l-name()='path']] – Halfwit