Selenium cannot find SVG element in XPath

Question

I have the following HTML:

<div id="imageholder>
    <svg>
        <g> <image href='blah.gif'> </g>
    </svg>
</div>

And I cannot seem to locate the svg with selenium IDE on firefox at all. I have tried:

//svg
//svg:svg
//*[name()='svg']
//*[namespace-uri()='http://www.w3.org/2000/svg']

None of them can locate my svg element. Sometimes I get the error:

error = TypeError: e.scrollIntoView is not a function

I'm using this as a means to use the locator in JUnit 4 testing if that helps.

Solution 1

Try the following XPath expression:

//*[local-name() = 'svg']

(works at least from Chrome/FireBug console, haven't tried with Selenium yet)

Solution 2

The question is about xPath, but if you can use CSS Selectors, that would be more readable, like so (Java).

WebElement image = driver.findElement(By.cssSelector("#imageholder > svg > g > image"));

Comments

[Len]

Thanks, this solved a similar issue for me. Any idea why simply '//svg' would not work?

[Apollon]

Related to XML namespaces if I have understood correctly. (Haven't digged much into this)

[Mauricio Morales]

I do want to clarify that the error TypeError: e.scrollIntoView is not a function is merely an error because the SVG DOM element doesn't support scrolling into view thru that function (and thus, the error still happen with @Touko's fix). But that error should be dismissable as it's just Selenium-IDE's way of showing you that it found the element. A waitForElementPresent command would work just the same without the TypeError.

[dansalmo]

This worked to find the element, but failed to find child elements by extending the path. I had first find the svg, then do an addition svg.find_element

[John]

I would like to know why? CSS works in my Firefox where XPATH does not. But I only have XPATH in LXML for Python, so am doomed to give up.