Hey all,
I’ve been struggling quite a lot with this issue. I’m attempting to click a SVG inside a shadow root and have failed miserably to find the correct syntax for doing so. I’m trying to click the pencil icon in this screenshot and simply get the cannot locate element error on the “Click” keyword.
My latest attempt has been: Click css=svg-inline--fa fa-pencil
Any thoughts or insight would be appreciated!
Since this is a table am assuming edit button can be on multiple rows. so target your element with the index of rows.
//table[@id='clientList']/tbody/tr[1]/td[9]/svg
or if you need to target pencil icon specifically
//table[@id='clientList']/tbody/tr[1]/td[9]/svg[contains(@class, 'fa-pencil')]
Where 1 is the row index and 9 is the column index. You can loop and get your desired outcome. Hope this helps.
Josh, I coming back online after being off last week and just going through open/unanswered work from this past week … Have you tried interacting with a different element, other than the pencil svg? Here I don’t mean “try another element loactor to verify or work through the question/problem of locating elements within a shadowdom and or canvas/svg”. Here I am specifically asking the question is this the right element to trigger the action you want. Re-looking at the dom/html snapshot you posted within the forum you are focusing in on the svg element which, as far as I can see, just draws the pencil icon. I’m not sure this is the “right element to interact with” in that essentially the svg element is just drawing a picture “on the button/element” for which you want “to click”. From my experience of web test automation there is a skillset/knowledge/experience of discerning within a tree of elements which one triggers the “actions” when clicked. Sometimes it is fairly clear (the button element with an onclick attribute of “save”). But other times, like this one, it is not. Sorry if this concept is well understood by you in which case let this be an understanding for others. But as I look at the html its is not clear to me what to click to trigger the (assumed) edit functionality of the pencil. The svg appears to be just an icon on the … well … table cell. And that cell only contains the svg. And there are about eight cells shown for the first row which I am assuming is the “pencil button”. None of the other cells make any sense as to what they are there for. And this pencil icon button seems to be the first in a line of “Actions”. So first button but the pencil icon is the eighth cell on the first row …? To me it seems you might be targeting the wrong element for the click in order to trigger the action you want.