How to click on svg button

Hello,

I am trying to click on a svg button and as I understand there is a bit of specificity to do that. My code is as follow but I get an error saying the element is not visible after 5sec:
Click Button When Visible xpath=//[name()=“svg”]//[name()=“use”]

=> Is it like iframe where we need to select something before being able to interact with the svg button?
Note: I have tried also with click link or click element, but I get the same result

This is the svg button details

Thank you

HI,

That’s a very odd xpath for selecting that element a more typical xpath would be something like //svg//use (i’ve never seen the use of the name() function in an xpath before.

Having said that, I think your “not visible” problem is because that svg image is a part of the button parent and the button is taking the visibility and is what you need to click. Also I notice you are using a “Click Button When Visible” keyword but the element you’ve selected is not a button, so that might be the problem too.

I’d suggest you try something like this:

    Click Button When Visible    xpath=//button[@title="close"]

Dave.

1 Like

Hello Dave,

That would be too easy >D.
Click Button When Visible xpath= //svg//use => Element ‘xpath=//svg//use’ not visible after 5 seconds
Click Button When Visible xpath= //button//svg//use => Element ‘xpath=//button//svg//use’ not visible after 5 seconds.
Click Button When Visible xpath= //button [@title,“close”] => Element ‘xpath=//button[@title=“close”]’ not visible after 5 seconds.
Click Button when visible xpath=//button//[name()=‘svg’]//[name()=‘use’] => Button with locator ‘xpath=//button//[name()=‘svg’]//[name()=‘use’]’ not found

Note: only the last attempt return an error message starting with “Button”

If I “inspect” the “X” button to find the selector, it is the <use…> line that’s highlighted.


I have tried to use the copy xpath selector functionality but as you can see it gives an exception if I check it with document.queryselector

This is why I have started to search for answers about selectors for svg button and I have found this kind of information several times:

Here is another discussion with info to a very similar case to mine:

Then I have used the extension “selectors hub” (tutorial video : Learn to write selectors for svg elements : SelectorsHub - YouTube) that supposed to easily generate the correct xpath for svg element and came up with that solution
=> Click Button when visible xpath=//[name()=‘svg’]//[name()=‘use’] (Warning: “stars” do not show up)
that also does not work >D

I have also look for information on how to find a selector using xlink:href, but it does not work either.

Did you try to use local-name() instead of name()? In past when I was dealing with svg elements I was always using local-name() and it worked.

1 Like

Yes, I did and it did not work either

Note: I have tried click element when visible as well but no change

Note: I have tried to use automation studio and the pick element functionality but it does not work. The close button is highlited but when I click on it, it does not pick anything

Could it be due to a DOM exception?

Locating SVG’s with XPath is pain in the a**, indeed :face_with_head_bandage:

Compared to other DOM elements, SVG and its sub-elements need another adressing.

  • instead of using //svg, use //*
  • The SVG itself gets adressed with //*[name()='svg']
  • Any other tag below an SVG gets adressed with “local-name”, example: //*[name()='svg']//*[local-name()='footag']//*[local-name()='bartag']

Tip: Instead of running the Robot code again and again, debugging XPath is easier in the Devtools console with $x("//yourxpath"). Just define a breakpoint in your Robot code to bring the application into the desired state and try different expressions. You will get the result in real time.
This is a complete example how do it with an SVG:

Anyway, I wondered why not simply click the //button …? Your code btw contains a typo - if you really tried this one:

Click Button When Visible xpath=//button[@title,“close”] 

I guess it can’t work. This one is correct (like @damies13 suggested) - just double-check this:

Click Button When Visible xpath=//button[@title="close”] 

Btw, it is cmpletely OK to write the selector without the strategy:

Click Button When Visible //button[@title="close”]
1 Like

Afaik, local-name should only be used for tags inside of the SVG (see my post below).

Hello Simon,

Thank you for your input.
I am afraid nothing what you’ve proposed is working but I have had another go with new variants and I found 2 ways that works.
But honestly I don’t understand why your proposals are not working.

Now, I have tried with a different identification for the button and it did work… very strange to me. I don’t understand why:
“Click Button When Visible //button[@class=“js-modal-close sg-modal__close”]” works


and not your suggestion "Click button when visible xpath =//button[@title=“close”]”

Same thing for the following expression with the svg that works:
Click element when visible xpath=//button//[name()=‘svg’]//[local-name()=‘use’]

Again I don’t understand why your proposal for the svg didn’t work. To me, what you have proposed make sense.

So, I am happy I have something that works but I have no clue about the logic

Ups. What about

Click button when visible //button[@title="Close"]

(Capital “C”)

Neither, very strange

There is still hope: the quotes aren’t correct :slight_smile: (this is why the expression is no a valid XPath)
image

1 Like

:+1:, yes that’s it

To recap the different solutions for my svg case:

Click element when visible    //button//*[name()='svg']//*[local-name()='use']

Note:
1- Click button does not work and Click element has to be used with this locator type.
2- using only //*[name()='svg']//*[local-name()='use'] did not work in my case

`Click button when visible    //button[@title="Close"]`


`Click Button When Visible    //button[@class="js-modal-close sg-modal__close"]`