java - locator - Selenium WebDriver: haciendo clic en elementos dentro de un SVG usando XPath

xpath locator

Question

Tengo un objeto SVG con algunos elementos de círculo y rectángulo. Usando webdriver, puedo hacer clic en el objeto svg principal, pero no en ninguno de los elementos que contiene. El problema parece ser solo al hacer clic (o cualquier interacción con el mouse), ya que puedo usar getAttribute () para devolver los valores de ancho, ID, x / y, texto, etc., para cualquier cosa debajo de él.

Aquí hay un ejemplo del 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>

Y un ejemplo de WebDriver tratando de hacer clic con el botón derecho en un elemento rectangular (y en su defecto):

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

Pero esto funciona y devuelve un valor:

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

Cuando WebDriver comete errores, generalmente es este:

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

He pasado un tiempo investigando esto y parece ser un problema bastante común con Selenium y SVG, sin embargo, me pregunto si hay una solución. Las únicas soluciones que he encontrado están interactuando con el SVG en sí, lo que ya puedo hacer.

Estoy usando Selenium 2.28 (y probé 2.29) con Java + Firefox 17.

Cualquier idea muy apreciada.

Answer 1

Aqui tienes:

driver.findElement(By.cssSelector("#canvas > svg > rect")).getAttribute("x")
driver.findElement(By.cssSelector("#canvas > svg > rect")).getAttribute("y")

De esta manera puedes hacerlo.

Answer 2

Para cualquier persona interesada, resolví esto de las siguientes maneras:

1) Originalmente estaba probando esto en OSX con Firefox 17 y Selenium 2.28 / 29, pero descubrí que solo funciona (al menos para mí) en Windows con Firefox 18 y Selenium 2.29

2) interactuando con SVG con el estándar:

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

no funciona Necesitas usar Acciones.

3) para interactuar con objetos SVG, los siguientes trabajos de XPath:

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

El objeto SVG está debajo del elemento SVG (por ejemplo, círculo, rect, texto, etc.).

Un ejemplo de hacer clic en un objeto SVG:

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

Nota: debe llamar a la ruta dentro de la función de clic (); utilizando:

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

no funciona

Answer 3

Para una solución JS:

var selector = "//*[name()=''svg'']/*[name()=''rect'']";
browser.moveToObject(selector, 5, 5);//Move to selector object with offsets.
browser.buttonPress(null);//Left-click

Answer 4

Pruebe esta solución alternativa:

WebElement mapObject = driver.findElement(By.xpath("//*[name()=''svg'']/*[name()=''rect'']"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", mapObject);

Cada vez que tengo demasiados problemas con algunos elementos al intentar hacer clic en ellos, uso esta solución.

Answer 5

Pudimos evitar la selección de xpath impar haciendo estas dos cosas

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);

Esto funcionó en osx y phantomjs, pero creo que debería estar bien en cualquier navegador moderno.

(Utilizamos el controlador js así que no dude en corregir los errores de compilación)

Answer 6

Tengo diferentes gráficos altos en mi proyecto y mi objetivo era hacer doble clic en una sección de un gráfico para obtener más información y logré hacerlo usando las siguientes líneas de código. XPath no funcionó, pero CssSelector funcionó bien.

var elementToClick= Browser.Driver.FindElementEx(By.CssSelector("#highcharts-0 > svg > g.highcharts-series-group > g.highcharts-series.highcharts-tracker > path:nth-child(1)"), 10);
Actions action = new Actions(Browser.Driver);
action.Click(elementToClick).Build().Perform();
action.DoubleClick(elementToClick).Build().Perform();