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
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"]
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.
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.
- instead of using
- The SVG itself gets adressed with
- Any other tag below an SVG gets adressed with “local-name”, example:
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”]
local-name should only be used for tags inside of the SVG (see my post below).
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"]
There is still hope: the quotes aren’t correct (this is why the expression is no a valid XPath)
To recap the different solutions for my svg case:
Click element when visible //button//*[name()='svg']//*[local-name()='use']
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"]`