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?

Andersson · Accepted Answer · 2017-01-27 14:17:41Z

9

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

edited Jan 27, 2017 at 14:17

answered Jan 24, 2017 at 13:32

Andersson

52.8k18 gold badges83 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

JeffC Over a year ago

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

Andersson Over a year ago

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 Over a year ago

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

undetected Selenium Over a year ago

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

Andersson Over a year ago

@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

|

becixb · Accepted Answer · 2017-01-25 23:34:46Z

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

edited Jan 25, 2017 at 23:34

answered Jan 25, 2017 at 7:05

becixb

3831 silver badge10 bronze badges

5 Comments

undetected Selenium Over a year ago

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?

becixb Over a year ago

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 Over a year ago

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

undetected Selenium Over a year ago

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?

becixb Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

11 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related