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

We can use xpath to grab SVG elements with Selenium Webdriver. A SVG element is identified with tagname svg. The svg image has the attributes like width and height attributes.

Let us investigate the html code of a svg element.

To create a xpath for a svg element, we have the syntax as //*[local-name()='svg'].

The local-name function is mandatory for creating a xpath of a svg element. So for the xpath expression for the image highlighted in the above image should be −

//*[local-name()='svg' and @data-icon='home']/*[local-name()='path']

Here, data-icon is an attribute of the svg tag element which is added accompanied with @ symbol. The [local-name()='path'] is included since it is the child of the svg tagname.

Let us validate the xpath we have created, within the Console tab.

The image which is a SVG element before the Home menu gets highlighted with our XPath.

Example

Code Implementation.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
public class SVGElement{
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver", "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      // wait of 5 seconds
      driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
      driver.get("https://www.tutorialspoint.com/index.htm");
      // identify element
      WebElement m= driver.findElement(By.xpath("//*[local-name()='svg' and @dataicon='home']/*[local-name()='path']"));
      // Action class to move and click element
      Actions act = new Actions(driver);
      act.moveToElement(m).
      click().build().perform();
      driver.quit();
   }
}