How to use xPath in Selenium WebDriver to grab SVG elements? How to use xPath in Selenium WebDriver to grab SVG elements? selenium selenium

How to use xPath in Selenium WebDriver to grab SVG elements?


May be you need to use the Actions with name attribute in Xpath. In your XPath use it -

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

Then try the following code snippet -

WebElement svgObj = driver.findElement(By.xpath(XPATH));Actions actionBuilder = new Actions(driver);actionBuilder.click(svgObj).build().perform();


Try @fill instead of fill and OpenLayers_Geometry_Point instead of OpenLayers.Geometry.Point.


To locate the red points i.e. the elements with attribute fill="#990000" and id attribute containing OpenLayers_Geometry_Point you can use either of the following Locator Strategies:

  • Using :

    //*[name()='svg']/*[name()='g']/*[name()='g']//*[name()='circle' and contains(@fill, '990000')][starts-with(@id, 'OpenLayers_Geometry_Point')]
  • Using :

    svg > g > g circle[fill$='990000'][id^='OpenLayers_Geometry_Point']

Ideally, you need to induce WebDriverWait for the visibilityOfAllElementsLocatedBy() and you can use either of the following Locator Strategies:

  • Using cssSelector:

    List<WebElement> vertices = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.cssSelector("svg > g > g circle[fill$='990000'][id^='OpenLayers_Geometry_Point']")));
  • Using xpath:

    List<WebElement> vertices = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//*[name()='svg']/*[name()='g']/*[name()='g']//*[name()='circle' and contains(@fill, '990000')][starts-with(@id, 'OpenLayers_Geometry_Point')]")));

References

You can find a couple of relevant details discussions in: