Automation | Graph-Chart | Locating SVG Element

Assumption here - we have good understanding of following tool / terminologies.
* Selenium / Katalon Tool
* XPath

It is always been very difficult to automate Graphs / Charts / Map sort of elements while automation. Most of the time, it was due to locator issue (Since we can’t locate the element, we can’t perform any actions like mouse over, click, etc with automation tools like selenium / katalon)

Problem Statement:

I would like to locate the Graphs / Charts / Map sort of elements while automation which actually made from SVG.

What is SVG?

• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the Web. It is mainly used for vector type diagrams like bar charts, pie charts, scalable icons, scalable logos and other design diagrams. More info

Can’t we directly get XPath of SVG?

Most of the automation tool can’t locate SVG, Not because of the tool doesn’t have capability but it is difficult to get Xpath(Locator) directly. Even if we use ChroPath Or firepath plugins , It can’t locate xpath directly.

Let’s see example.

SVG Example (More Examples)

Then How to capture SVG elements?

SVG elements are captured using XPATHS created from html attributes.

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

The SVG object being anything under the SVG element (e.g. circle, rect, text, etc). So, If we need to locate “rect” then xpath would be,

Ex: "//*[name()='svg']//*[name()='rect' and @class='selection']"

Katalon Code:

WebUI.click(findTestObject('svgElement'))
Where,
svgElement is the xpath= "//*[name()='svg']//*[name()='rect' and @class='selection']"

Selenium Code:

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

Note:

driver.findElement(By.xpath(YOUR XPATH)).click();
---   Doesn’t work. We need to use Actions.-----