Selenium WebDriver:使用 XPath 单击 SVG 中的元素 [英] Selenium WebDriver: clicking on elements within an SVG using XPath

问题描述

我有一个带有一些圆形和矩形元素的 SVG 对象.使用 webdriver，我可以点击主 svg 对象，但不能点击其中的任何元素.问题似乎只与点击(或任何鼠标交互)有关，因为我可以使用 getAttribute() 返回宽度、ID、x/y、文本等的值，用于其下的任何内容.

以下是 HTML 的示例:

 
<svg height="840" version="1.1" width="757" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><image x="0" y="0" width="757" height="840" preserveAspectRatio="none"><circle cx="272.34" cy="132.14"><rect x="241.47" y="139.23"><text style="text-anchor: middle; x="272.47" y="144.11"></svg>

还有一个 WebDriver 尝试右键单击矩形元素(失败)的示例:

 WebElement mapObject = driver.findElement(By.xpath("///*[name()='svg']/*[name()='rect']"));动作生成器 = 新动作(驱动程序)；builder.contextClick(mapObject).perform();

但这有效并返回一个值:

 driver.findElement(By.xpath("///*[name()='svg']/*[name()='rect']")).getAttribute("x");

当 WebDriver 出错时，通常是这样的:

 org.openqa.selenium.WebDriverException: '[JavaScript 错误: "a.scrollIntoView 不是函数" {file: "file:///var/folders/sm/jngvd6s97ldb916b7h25d57r0000gn/T/anonymousdriver48539667webdriver18553077/extensions/[e-mail]/components/synthetic_mouse.js" line: 8544}]' 调用方法时:[wdIMouse::move]

我花了一些时间研究这个问题，这似乎是 Selenium 和 SVG 的一个常见问题，但是我想知道是否有解决方法.我找到的唯一解决方案是与 SVG 本身进行交互，我已经可以做到了.

我正在使用带有 Java + Firefox 17 的 Selenium 2.28(并尝试过 2.29).

非常感谢任何想法.

解决方案

对于任何有兴趣的人，我通过以下方式解决了这个问题:

1) 我最初是在 OSX 上使用 Firefox 17 和 Selenium 2.28/29 进行测试，但发现它只适用于(至少对我而言)使用 Firefox 18 和 Selenium 2.29 的 Windows

2) 与标准的 SVG 交互:

driver.findElement(By.xpath(YOUR XPATH)).click();

不起作用.您需要使用操作.

3) 为了与 SVG 对象交互，以下 XPath 有效:

"/*[name()='svg']/*[name()='SVG OBJECT']";

SVG 对象是 SVG 元素下的任何内容(例如圆、矩形、文本等).

单击 SVG 对象的示例:

WebElement svgObject = driver.findElement(By.xpath(YOUR XPATH));动作生成器 = 新动作(驱动程序)；builder.click(svgObject).build().perform();

注意:需要调用click()函数内部的路径；使用:

moveToElement(YOUR XPATH).click().build().perform();

不起作用.

I have an SVG object with a few circle and rectangle elements. Using webdriver, I can click on the main svg object, but not any of the elements within it. The problem only seems to be with clicking (or any mouse interaction), as I can use getAttribute() to return the value(s) of width, ID, x/y, text, etc, for anything under it.

Here is an example of the HTML:

    <div id="canvas">
        <svg height="840" version="1.1" width="757" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
            <image x="0" y="0" width="757" height="840" preserveAspectRatio="none">
            <circle cx="272.34" cy="132.14">
            <rect x="241.47" y="139.23">
            <text style="text-anchor: middle; x="272.47" y="144.11">
        </svg>
    </div>

And an example of WebDriver trying to right click a rectangle element (and failing):

    WebElement mapObject = driver.findElement(By.xpath("//*[name()='svg']/*[name()='rect']"));
    Actions builder = new Actions(driver);
    builder.contextClick(mapObject).perform();

But this works and returns a value:

    driver.findElement(By.xpath("//*[name()='svg']/*[name()='rect']")).getAttribute("x");    

When WebDriver errors, it's usually this:

    org.openqa.selenium.WebDriverException: '[JavaScript Error: "a.scrollIntoView is not a function" {file: "file:///var/folders/sm/jngvd6s97ldb916b7h25d57r0000gn/T/anonymous490577185394048506webdriver-profile/extensions/[e-mail]/components/synthetic_mouse.js" line: 8544}]' when calling method: [wdIMouse::move]

I've spent some time researching this and it seems to be a somewhat common issue with Selenium and SVGs, however I'm wondering if there is a workaround. The only solutions I've found are interacting with the SVG itself, which I can already do.

I'm using Selenium 2.28 (and tried 2.29) w/ Java + Firefox 17.

Any ideas greatly appreciated.

解决方案

For anyone interested, I solved this in the following ways:

1) I was originally testing this on OSX with Firefox 17 and Selenium 2.28/29, but figured out it only works (at least for me) on Windows with Firefox 18 and Selenium 2.29

2) interacting with SVGs with the standard:

driver.findElement(By.xpath(YOUR XPATH)).click();

doesn't work. You need to use Actions.

3) to interact with SVG objects, the following XPath works:

"/*[name()='svg']/*[name()='SVG OBJECT']";

The SVG object being anything under the SVG element (e.g. circle, rect, text, etc).

An example of clicking an SVG object:

WebElement svgObject = driver.findElement(By.xpath(YOUR XPATH));
Actions builder = new Actions(driver);
builder.click(svgObject).build().perform();

Note: you need to call the path inside the click() function; using:

moveToElement(YOUR XPATH).click().build().perform();

doesn't work.

这篇关于Selenium WebDriver:使用 XPath 单击 SVG 中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！