search

SeleniumHQ / selenium-google-code-issue-archive

Archive, please see main selenium repo
https://github.com/seleniumhq/selenium
346 stars 194 forks source link

Cannot access SVG elements if they are in an <object> tag, enhancement to consider opening up support #4647

Open lukeis opened 8 years ago

lukeis commented 8 years ago

Originally reported on Google Code with ID 4647

Before filing an issue, please read the page at
http://code.google.com/p/selenium/wiki/SeleniumHelp This contains lot of
information about how best to get help, and tells you what we need to know.

Still here? We know that bugs are frustrating and annoying things. We also
know that you've probably spent ages trying to figure out what's wrong. The
more information you give us now, the more likely it is that we'll be able
to help.

What steps will reproduce the problem?
1. Run the html test listed below and the associated Java test
2. Most of this has been copied over from the forum post https://groups.google.com/forum/?fromgroups=#!topic/webdriver/52MayIBPFps

What is the expected output? What do you see instead?

Cannot access elements of SVG that are inside the object tag. If Svg is inline, no
problems.

Selenium version: 2.25.0
OS: All
Browser: Chrome
Browser version: 21,22

Please provide any additional information below. A sample reduced test
case, or a public URL that demonstrates the problem will intrigue our merry
band of Open Source developers far more than nothing at all: they'll be far
more likely to look at your problem if you make it easy for them!

Here is an example html page, made it as simple as it could get

<html>
<body>

    <object data="circle.svg" type="image/svg+xml"></object>

</body>
</html>

Here is the circle.svg file

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

I would like to be able to access the <circle> element. If I place the svg text as
inline int he HTML, I can get to the circle element with code that looks like this:

WebElement circle = driver.findElement(By.cssSelector("body svg circle"));

        System.out.println("Circle property cx is : "
                + circle.getAttribute("cx"));

However, if there is that object tag, I could not find a way to access the circle element,

I tried both of these:
WebElement circle = driver.findElement(By.cssSelector("body svg circle"));

WebElement circle = driver.findElement(By.cssSelector("body object svg circle"));

This returns a null. Chrome developer tools shows a "#document" element under the object,
meaning it is probably rendering it in a different document object that I will need
access to. Firefox too shows a frame element, and fails to get it too.

looks like i will need access to taht 'frame' or 'document' object under which I will
have to issue the body svg circle query. Any clues how to do this?

Ideally I would like to be able to switchto().object('idofObjectTag') or something
like that to be able to access the elements inside that embedded document.

I have already tried sending javascript that tries to access that contentDocument but
Selenium throws an exception saying it cannot access documents outside of the main
frame.

Reported by binod80 on 2012-10-08 14:35:43

lukeis commented 8 years ago

Reported by barancev on 2012-10-09 08:21:00

lukeis commented 8 years ago 
I've been thinking about this. The problem is that there's an expectation that because
we can handle the HTML DOM, we can also handle the SVG DOM. This isn't the case right
now, so speaking from a technical point of view, this is an enhancement request.

Reported by simon.m.stewart on 2012-10-15 21:10:01

lukeis commented 8 years ago 
Is it possible to use an alternative in the absence of this feature? Any tips? Or is
the Webdriver team available to add support for this case? 

We are pondering whether we should make attempts to build in this feature, without
knowing how much work it might entail. Before doing anything, we want to check with
the Webdriver team on the progress on this. Given it is tagged as low priority I was
not sure it was going to get done in the near future.

Reported by binod80 on 2012-12-17 14:47:37

lukeis commented 8 years ago 
Hi,
I was writing a test for crossfilter elements and that is using svg too. After fiddling
around I managed to select some svg sub-elements using a combination of class, tag
and xpath selectors. However I cannot send click events there when I try to call getLocation()
on these elements I get:

java.lang.NullPointerException
    at org.openqa.selenium.remote.RemoteWebElement.getLocation(RemoteWebElement.java:308)

Is this normal behavior? I would expect that either I get an error from the selector
or I can get the element and its location.

Reported by renauditab on 2013-02-12 10:26:20

lukeis commented 8 years ago 
Not sure if SVG is being used widely. But this is really a roadblock

Reported by ilynaf on 2014-01-08 10:11:36

lukeis commented 8 years ago 
After a long time, pinging, any updates on this?

Reported by binod80 on 2015-04-22 13:13:32

lukeis commented 8 years ago 
I'm facing this issue, DOM structure as attached.

List<WebElement> wes = webDriver.findElements(By.xpath("//*[name()='svg' and @preserveAspectRatio='xMidYMid']"));
        System.out.println(wes.size());// wes.size() return 0, that means WebDriver
cannot find the specified SVG element, but the xpath is valid in chrome console.

HTML source as following.

<div id="__chart0" data-sap-ui="__chart0"><svg preserveAspectRatio="xMidYMid" viewBox="0
0 120 120" width="120" height="120"><g transform="translate(60,60)"><text text-anchor="middle"
class="sapExtentUilibArcChartText" dy="19" style="font-size: 51px;">83<tspan style="font-size:
25.5px;">%</tspan></text><path d="M0,57A57,57 0 1,1 0,-57A57,57 0 1,1 0,57M0,53A53,53
0 1,0 0,-53A53,53 0 1,0 0,53Z" class="sapExtentUilibArcChartBackground" style="fill:
rgb(255, 255, 255);"></path><path d="M3.4902433775699565e-15,-57A57,57 0 1,1 -49.94948076250023,-27.459959423797756L-46.44425404232478,-25.532944727390895A53,53
0 1,0 3.245314017740486e-15,-53Z" class="sapExtentUilibArcChartForeground globalDiagramColor1"
style="fill: rgb(255, 255, 255);"></path></g></svg></div>

Reported by hujun.me on 2015-07-30 08:39:02

lukeis commented 8 years ago

Reported by luke.semerau on 2015-09-17 17:45:10