【问题标题】：Selenium: SVG element embedded into Object tag is not been identified by Selenium IDE or xPath?Selenium：嵌入到 Object 标签中的 SVG 元素未被 Selenium IDE 或 xPath 识别？
【发布时间】：2012-01-13 22:51:25
【问题描述】：

我有一个这样的 html 段

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

当我在 Firefox/firebug 中看到检查元素时，我看不到 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-path 找到 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，但未能成功。谢谢

更多详情，请查看示例代码。

示例.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。

【问题讨论】：

标签： html xpath selenium

【解决方案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 的这些用例，也不能告诉你更多。

【讨论】：

，感谢您的回复。我尝试了上述情况，但它仍然给我 noSuchElement 异常。正如我之前提到的，我只能在 Chrome 浏览器中看到 svg 文件的详细信息，而不是在 FF（检查元素）中。是否有可能通过 X-path 找不到 SVG 元素，因为它嵌入在 obejct 标记中..？:-(
关于您的XPath 表达式，您在使用contains 函数时是否注意到问题？这不是=，而是,。
，Vincent，我在“问题”部分 [on Dec 8,2011] 部分添加了更多详细信息。我无法在此处正确添加代码。请查看并告诉我是否可以提供帮助。我如何在此处插入图像以向您展示 chrome 的检查元素。在检查元素上的 svg 文件之前，我看到一个灰色文本（同 svg 标签）-->ttp://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd%22>...Do" rel="nofollow" target="_blank">w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">...Do 你觉得它无论如何都会产生影响。
它应该可以工作，我不知道您的 XPath 实现，也许其中的命名空间处理存在问题。你能提供你完整的 XML 文件吗？你可以试试下面的 XPath 表达式：//div[@id='imageholder']/object/* 和 //div[@id='imageholder']/object/*[local-name()='svg']
请在附件中找到示例代码。在 FF 和 Chrome 中打开 sample.html。

【解决方案2】：

解决了一些问题以获取 SVG 嵌入文档。通过 WebElement 似乎不可能。但是通过 JavaScriptExecutor，我们可以获得完整的 DOM 引用，并且通过标准的 DOM 模式是可能的。比如：我们可以做->docuemnt.getElementsByTagName('OBJECT').contentDocument。这将提供完整的 SVG DOM 参考。

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

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

【讨论】：

【解决方案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();

【讨论】：