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

问题描述

我有一个有几个圆形和矩形元素的SVG对象。使用webdriver，我可以点击主要的svg对象，但不是其中的任何元素。这个问题似乎只是点击（或任何鼠标交互），因为我可以使用getAttribute（）来返回宽度，ID，x / y，文本等的值。 >

以下是一个HTML示例：

 < div id =画布> 
< svg height =840version =1.1width =757xmlns =http://www.w3.org/2000/svgstyle =overflow：hidden; position：relative; > 
< image x =0y =0width =757height =840preserveAspectRatio =none> 
< circle cx =272.34cy =132.14> 
< rect x =241.47y =139.23> 
 < / svg> 
< / div> 
  

以及WebDriver尝试右键单击矩形元素（以及失败）的示例：

  WebElement mapObject = driver.findElement（By.xpath（// * [name（）='svg'] / * [name（）='rect' ]））; 
动作builder = new动作（驱动程序）; 
 builder.contextClick（mapObject）.perform（）; 
  

但是，这个工作，并返回一个值：

pre $ driver_findElement（By。 xpath（// * [name（）='svg'] / * [name（）='rect']））。getAttribute（x）;

当WebDriver错误时，通常是这样的：

  org。 openqa.selenium.WebDriverException：'[JavaScript Error：a.scrollIntoView is a function{file：file：/// var / folders / sm / jngvd6s97ldb916b7h25d57r0000gn / T / anonymous490577185394048506webdriver-profile / extensi ons / [e-mail]/components/synthetic_mouse.jsline：8544}]'when calling method：[wdIMouse :: move] 
  

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

我使用Selenium 2.28（并尝试2.29）w / Java + Firefox 17。

任何想法都不胜感激。

解决方案

有兴趣的我用下面的方法解决了这个问题：
$ b $ 1）我最初是在OSX上用Firefox 17和Selenium 2.28 / 29测试的，但是发现它只起作用至少对我来说）在Windows 18上使用Firefox 18和Selenium 2.29

$ b 2）与标准SVG进行交互：

  driver.findElement（By.xpath（YOUR XPATH））。click（）; 
  

不起作用。您需要使用Actions。

3）与SVG对象进行交互，以下XPath工作：

<$ p $ / * [name（）='svg'] / * [name（）='SVG OBJECT'];

SVG对象是SVG元素（例如circle，rect，text等） / p>

点击一个SVG对象的示例：

  WebElement svgObject = driver .findElement（By.xpath（你的XPATH））; 
操作构建器=新操作（驱动程序）; 
 builder.click（svgObject）.build（）。perform（）; 
  

注意：您需要调用click（）函数内的路径;使用：

  moveToElement（您的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屋！