Sample.html

Question

我有一个像这样的HTML段

<div id="imageholder>
<object data="1.svg" width="100%" height="100%" type="image/svg+xml">
</object>
</div>.

当我在Firefox / firebug中看到inspect元素时，我看不到SVG文件结构，但在Chrome中，我能够看到如下的svg文件结构：

<div id="imageholder>
<object data="1.svg" width="100%" height="100%" type="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-dasharray="none"
shape-rendering="auto" font-family="'Dialog'" width="4800">
<desc>widthmm=90.48768097536195 heightmm=49.38127063754128</desc>
<g>
<g>....</g>
</g>

但是，我无法通过X路径找到svg标签或任何g元素。我试过

//div[contains(@id='imageholder')]

然后我正确地得到了元素。

//div[contains(@id='imageholder')/object]

也正确返回元素。但是

//div[contains(@id='imageholder')/object/svg]

失败。

我的要求是：我需要点击SVG图像的几个g元素，但我无法达到它。我们将不胜感激。感谢

更多细节补充：[2011年12月8日]

driver.findElement(By.xpath("//div[@id='imageholder']/object"));//This worked correctly 
driver.findElement(By.xpath("//div[@id='imageholder']/object/*[local-name()='svg' and  namespace-uri()='http://www.w3.org/2000/svg']"));//did not work

我也尝试了此链接上提供的所有可能组合XPath - Find elements by attribute namespace，但无法成功。感谢

有关详细信息，请参阅示例代码。

Sample.html

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9;chrome=IE8">
<body>
<div id="imageholder"><object data="1.svg" width="100%" height="100%" type="image/svg+xml"></object></div>
</body>
</html>

1.svg

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
    'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg stroke-dasharray="none" shape-rendering="auto" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;"
 width="4800" text-rendering="auto" fill-opacity="1" contentScriptType="text/ecmascript" color-interpolation="auto"
 color-rendering="auto" preserveAspectRatio="xMidYMid meet" font-size="12" viewBox="0 0 4800 2619" fill="black"
 xmlns:xlink="http://www.w3.org/1999/xlink" stroke="black" image-rendering="auto" stroke-miterlimit="10"
 zoomAndPan="magnify" version="1.0" stroke-linecap="square" stroke-linejoin="miter" contentStyleType="text/css"
 font-style="normal" height="2619" stroke-width="1" stroke-dashoffset="0" font-weight="normal" stroke-opacity="1"
    >
<g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
    <circle cx="6cm" cy="2cm" r="100" style="fill:red;"
            transform="translate(0,50)"/>
    <circle cx="6cm" cy="2cm" r="100" style="fill:blue;"
            transform="translate(70,150)"/>
    <circle cx="6cm" cy="2cm" r="100" style="fill:green;"
            transform="translate(-70,150)"/>
</g>
</svg>

保存文件后请点击sample.html。

Answer 1

//div[contains(@id='imageholder')/object/svg失败，因为您没有告诉处理器svg元素的名称空间与另一个元素的名称空间不同。请参阅xmlns="http://www.w3.org/2000/svg"。

你可以写：//div[contains(@id,'imageholder')]/object/*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']。

编辑（阅读更新后）：

问题可能是：在您的原始html文件中，您有object元素中svg文件的链接。

即使您的浏览器将svg文件合并到dom中，XPath表达式似乎也会对原始文件本身（使用href）起作用。抱歉，但我不知道XPath的那种用例，并且不能告诉你更多。

Answer 2

有一些工作来获取SVG嵌入式文档。它似乎不可能通过WebElement实现。但是通过JavaScriptExecutor，我们可以获得完整的DOM引用，并且可以通过标准DOM模式。喜欢：我们可以做 - ＆gt; docuemnt.getElementsByTagName（＆＃39; OBJECT＆＃39;）。contentDocument。这将提供完整的SVG DOM参考。

以下链接似乎不是它的直接答案，但可以通过此看到Sel2.0的可能性。 Selenium: Can I set any of the attribute value of a WebElement in Selenium?

可能对所有人有所帮助:-) 感谢

Answer 3

在尝试访问SVG标签之前切换到默认帧，即frame（0）。尝试了许多XPath解决方案，但无济于事，但切换到框架却是一种魅力，此处将SVG视为框架。

System.setProperty("webdriver.gecko.driver", "C:\\Users\\Administrator\\Downloads\\geckodriver-v0.18.0-win64\\geckodriver.exe");
    WebDriver d = new FirefoxDriver();
    d.navigate().to("file:///C:/Users/Administrator/Desktop/sample/svg.html");
    Thread.sleep(2000);
    d.switchTo().frame(0);
    Actions builder = new Actions(d);
    WebElement svgObject = d.findElement(By.xpath("(//*[name()='svg']/*[name()='g']/*[name()='circle'])[2]"));
    //"style" here prints the colour of the second circle in the svg tag.  ie( blue circle)
    System.out.println(svgObject.getAttribute("style"));
    System.out.println(svgObject.getAttribute("transform"));
    System.out.println(svgObject.getAttribute("cx"));
    System.out.println(svgObject.getAttribute("cy"));
    System.out.println(svgObject.getAttribute("r"));
    builder.moveToElement(svgObject).click();

Selenium：嵌入到Object标记中的SVG元素尚未被Selenium IDE或xPath识别？

Sample.html

1.svg

3 个答案: