Selenium WebDriver: clicking on elements within an SVG using XPath
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/fxdriver@googlecode.com/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 (eg 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.
Try this workaround :
WebElement mapObject = driver.findElement(By.xpath("//*[name()='svg']/*[name()='rect']"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", mapObject);
Whenever I have too many problems with some elements while trying to click them, I use this workaround.
We were able to avoid the odd xpath select by doing these two things
WebElement mapObject = (WebElement) driver.executeScript('return document.querySelector(arguments[0])', "svg rect")
((JavascriptExecutor) driver).executeScript("arguments[0].dispatchEvent(new MouseEvent('click', {view: window, bubbles:true, cancelable: true}))", mapObject);
This worked on osx and phantomjs but I think it should be ok in any modern browser.
(We used the js driver so feel free to fix any compile errors)
链接地址: http://www.djcxy.com/p/88724.html