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.
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.
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.
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 
Compared to other DOM elements, SVG and its sub-elements need another adressing.
//svg, use //*
//*[name()='svg']
//*[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”]
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
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”)
There is still hope: the quotes aren’t correct 
(this is why the expression is no a valid XPath)
, 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"]`