Java selenium not click to SVG

Question

Code :

<button aria-label="Add Friend" class="tw-button-icon tw-button-icon--primary tw-button-icon--small" data-a-target="search-result-add-button">
<span class="tw-button-icon__icon">
<figure class="tw-svg">
<svg class="tw-svg__asset tw-svg__asset--addfriend tw-svg__asset--inherit" width="12px" height="12px" version="1.1" viewBox="0 0 16 16" x="0px" y="0px">
<path d="M3,6 L1,6 L1,7 L3,7 L3,9 L4,9 L4,7 L6,7 L6,6 L4,6 L4,4 L3,4 L3,6 Z M9.57142857,3 L12.4285714,3 L13.8571429,4.42857143 L13.8571429,8 L11.7142857,9.42857143 L11.7142857,10.1428571 L14.5714286,10.1428571 L16,11.5714286 L16,13 L6,13 L6,11.5714286 L7.42857143,10.1428571 L10.2857143,10.1428571 L10.2857143,9.42857143 L8.14285714,8 L8.14285714,4.42857143 L9.57142857,3 Z">
</path>
</svg>
</figure>
</span>
</button>

I searched stackoverflow and tried so much but I can't click this button.

I am new on selenium.

I tried,

"/*[name()='svg']/*[name()='path']"

//div[@data-a-target="side-nav-card-hover"]//*[name()="svg"]


"//*[name()='svg']/*[name()='path']"

"//button[@class='tw-button-icon tw-button-icon--primary tw-button-icon--small']/span/figure/svg/path"

//*[@class='tw-button-icon tw-button-icon--primary tw-button-icon--small']

Try using driver.findElement(By.className("tw-button-icon tw-button-icon--primary tw-button-icon--small")).click(); — camel-man, Jan 16 '18 at 21:19
Possible duplicate of [Selenium WebDriver \[Java\]: How to Click on elements within an SVG using XPath](https://stackoverflow.com/questions/41829000/selenium-webdriver-java-how-to-click-on-elements-within-an-svg-using-xpath) — undetected Selenium, Jan 17 '18 at 01:37
@camel-man That won't work because you are using className which doesn't accept compound classes. You would need to use CSS selector for something like that. — JeffC, Jan 17 '18 at 18:22
@DebanjanB She's trying to click on the `BUTTON` and it's not inside the `SVG` tag so it's not a dup of your link. — JeffC, Jan 17 '18 at 18:27
@JeffC I think OP refers to clicking of `svg` element through: 1) Question heading is `Java selenium not click to SVG` 2) First `xpath` trial as `"/*[name()='svg']/*[name()='path']"`, 2) Second `xpath` trial as `//div[@data-a-target="side-nav-card-hover"]//*[name()="svg"]` 3) Third `xpath` trial as `"//*[name()='svg']/*[name()='path']"` 4) Forth `xpath` trial as `"//button[@class='tw-button-icon tw-button-icon--primary tw-button-icon--small']/span/figure/svg/path"` 5) Once you work with ` — undetected Selenium, Jan 17 '18 at 18:40
You keep referring to my English understanding. I'm a native speaker where you are not. You should consider that before you state that yet again when it makes no sense. OP states, `I searched stackoverflow and tried so much but I can't click this button.` The `BUTTON` tag envelopes all the other tags shown in the HTML so it's not unreasonable to try to click the SVG, etc. tags and clearly she's still in the learning stage with some of her locators. Your link is talking about clicking elements INSIDE the `SVG` tag. The `BUTTON` tag is still outside of it so my point still stands. — JeffC, Jan 17 '18 at 18:45

score 0 · Answer 1 · answered Jan 17 '18 at 11:43

There are few issues I can see:

Your selectors are incorrect

"/*[name()='svg']/*[name()='path']"

//div[@data-a-target="side-nav-card-hover"]//*[name()="svg"]

"//*[name()='svg']/*[name()='path']"

svg is not a name. It's tag

You can look for tags using findElement(By.tagName("svg"));

Clicking the button itself.

"//button[@class='tw-button-icon tw-button-icon--primary tw-button-icon--small']/span/figure/svg/path"

The above selector does not indicate svg or button. It looks for path element.

Possible solutions: click svg element by findElement(By.tagName("svg")).click(); or click the button itself //button[@classtw-button-icon tw-button-icon--primary tw-button-icon--small']`

score 0 · Answer 2 · answered Jan 17 '18 at 11:55

To click button you can use CssSelector :

driver.findElement(By.cssSelector(".tw-button-icon.tw-button-icon--primary.tw-button-icon--small")).click();

or by using xpath :

driver.findElement(By.xpath("//button[contains(@data-a-target,'search-result-add-button')]")).click();

Try and let me know status.

score 0 · Answer 3 · answered Jan 17 '18 at 18:26

0

If you are just trying to click on the BUTTON, the simple way to do this is just

driver.findElement(By.cssSelector("button[aria-label='Add Friend']"));

As others have said, it's kinda hard to tell what you were trying to click on given your different locator attempts but since you specifically mentioned "button", I'm assuming this is what you were trying to do.

answered Jan 17 '18 at 18:26

JeffC

22,180
5
32
55

This won't work. OP have tried this option at the 4th trial and this strategy targets the outer-most layer. Clearly there is a `` within. If not the `` tag. – undetected Selenium Jan 17 '18 at 18:48
This is not the same as the 4th trial because it isn't even close to the same locator. You really need to stop looking for ridiculous reasons to downvote my answers. The 4th trial is clicking on the `PATH` tag and not the `BUTTON` and the `BUTTON` portion of the locator is completely different. It's entirely possible that there are multiple `BUTTON`s on the page that match those CSS classes but much less likely that they match the `aria-label` that I've used. If it doesn't work, OP can tell us but given the information we have, you can't state definitively that it won't. – JeffC Jan 17 '18 at 18:54

Java selenium not click to SVG

3 Answers3