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 xpath:
//*[name()='svg']/*[name()='g']/*[name()='g']//*[name()='circle' and contains(@fill, '990000')][starts-with(@id, 'OpenLayers_Geometry_Point')]
Using css-selectors:
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: