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.

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