Unable to click on SVG element using Selenium

Question

I am trying to automate the Edit portion of LinkedIn Profile. I see that the pen icon for editing my profile is an SVG element and I am unable to locate it using XPATH. Can some one help transforming the XPATH to SVG format so that I can use that ?

Also would appreciate if any proper documentation of the same can be provided. Thanks in advance.

I am using the general XPATH for clicking the icon:

driver.findElement(By.xpath("//svg[@class='artdeco-icon']")).click;

Screenshot URL : https://www.screencast.com/t/d21Ap1XsMVt

Error Log link : https://drive.google.com/open?id=0B-gsMUPbAIhxQTJiSXViZTZlelU

You can check out this link (http://stackoverflow.com/questions/41829000/selenium-webdriver-java-how-to-click-on-elements-within-an-svg-using-xpath) which might help you. Else let me know we will help you out. Thanks — undetected Selenium, May 12 '17 at 06:37
@Dev : Following your link, but wasn't able to understand how to frame the path. Could you please help ? So the idea is to click the SVG Element [Pen Icon per the screenshot] : driver.findElement(By.xpath("//svg[@class='artdeco-icon']")).click; is what I find as the xpath. Thanks — Dannie, May 12 '17 at 07:54
duplicate of http://stackoverflow.com/questions/30940736/protractor-click-on-svg-element-not-work. there are other threads also where this question is already answer. please search them. — Gaurang Shah, May 12 '17 at 08:00
Can be specific please about the binding you are using Java/Python/C#/Ruby/JS ? — undetected Selenium, May 12 '17 at 09:18
Can you update me the manual steps you want to perform once you login to the site? — undetected Selenium, May 12 '17 at 09:27
Steps : 1. Login to LinkedIn. 2. Go to Your Profile 3. Click on the pen icon as shown in the screenshot : https://www.screencast.com/t/d21Ap1XsMVt Here is where the issue is. I am unable to click on the icon. I am using Java. — Dannie, May 12 '17 at 09:32
Possible duplicate of [Protractor: Click on SVG element not work](http://stackoverflow.com/questions/30940736/protractor-click-on-svg-element-not-work) — Adrien Blanquer, May 12 '17 at 12:35

score 2 · Accepted Answer · answered May 12 '17 at 08:03

2

You can try below XPath expression to match required icon:

//span[text()="Edit Profile"]/following::*[local-name()="svg"]

answered May 12 '17 at 08:03

Andersson

51,635
17
77
129

@Anderson : Please check the xpath I have shared. I don't see a span anywhere. – Dannie May 12 '17 at 09:42
But it there:) On LinkedIn page. Did you try my `XPath`? – Andersson May 12 '17 at 09:44
Yeah found it, Anderson! Thanks a lot. Solved my problem. – Dannie May 12 '17 at 10:07
@Andersson I think if you take a closer look you don't even need to access the SVG elements as well :) my solution is much simpler – undetected Selenium May 12 '17 at 12:17
@Dev, Using direct link could also be acceptable, but it's not *much simpler* :) Using indexes for several elements in `XPath` is bad practice – Andersson May 12 '17 at 12:25
Well but your xpath fetches me 17 results :) – undetected Selenium May 12 '17 at 12:29
But only first one (the required one) will be chosen :) – Andersson May 12 '17 at 12:31
@Andersson Remember how you helped me out of the woods with unique xpath of svg elements :) that too contained indexes – undetected Selenium May 12 '17 at 12:32
That was exceptional case :) I had limited amount of options – Andersson May 12 '17 at 12:35

score 0 · Answer 2 · answered May 12 '17 at 12:12

Here is the solution of your Question-

If your testing step is to click the pencil icon to edit your profile, you need to have a closer look into the HTML DOM. The pencil icon is not within any SVG element.

You can click on the pencil icon through:

driver.findElement(By.xpath("//div[@class='core-rail']/section[1]/a[1]")).click();

Let me know if this Answers your Question.

Unable to click on SVG element using Selenium

2 Answers2