Unable to locate SVG elements through xpath on Kendo UI chart

Question

I did try some of xpaths but seems no luck.

I want to click on country and then graph , Given below screenshot :

Website URL is : https://demos.telerik.com/kendo-ui/bar-charts/column

I tried xpaths :

//text(text()='India')


 //g//text(text()='India')

Josh Adams · Answer 1 · 2019-01-17T13:29:32.690

2

Hi you can click India with the following Xpath //*[text()='India']

This is a really helpful resource

I usually open chrome inspector and then hit cntrl+F to open up an interactive way to test my xpaths:

You can target the svgs by using their strokes, but note these may change often. example: //*[@d='M54.5 164.5 L 70.5 164.5 70.5 236.5 54.5 236.5Z' and @stroke='#03a9f4']

edited Jan 17 '19 at 13:29

answered Jan 17 '19 at 13:13

Josh Adams

2,113
2
13
25

Thanks a lot, It works, Can you please help in xpath to click on graph after click on india? – Helping Hands Jan 17 '19 at 13:20
yes, what on the graph do you want to click? @HelpingHands – Josh Adams Jan 17 '19 at 13:22
on any one bar like here I marked where I want to click : http://prntscr.com/m8fek0 – Helping Hands Jan 17 '19 at 13:24
1

added more for you @HelpingHands hope this helps! best of luck – Josh Adams Jan 17 '19 at 13:29

Andersson · Answer 2 · 2019-01-17T14:08:11.220

2

The elements on chart are from SVG-namespace, so you cannot use common syntax to select those elements (you wouldn't be able to select element by its tag name, e.g. //svg or //path, etc)

You can try below to select text node with text "India":

//*[name()="text" and text()="India"]

edited Jan 17 '19 at 14:08

answered Jan 17 '19 at 13:32

Andersson

51,635
17
77
129

score 1 · Accepted Answer · answered Jan 17 '19 at 13:53

As the desired elements are SVG Elements you need to consider the namespace and induce WebDriverWait for the desired element to be clickable and to click on the first bar within the graph you can use the following solution:

Code Block:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

options = webdriver.ChromeOptions()
options.add_argument("start-maximized")
options.add_argument("disable-infobars")
options.add_argument("--disable-extensions")
driver = webdriver.Chrome(chrome_options=options, executable_path=r'C:\Utility\BrowserDrivers\chromedriver.exe')
driver.get("https://demos.telerik.com/kendo-ui/bar-charts/column")
WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='chart']//*[name()='svg']//*[name()='g']//*[text()='India']//following::*[name()='path']"))).click()
WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='chart']//*[name()='svg']//*[name()='g'][contains(@clip-path, 'url')]//*[name()='path']"))).click()

Browser Snapshot:

Unable to locate SVG elements through xpath on Kendo UI chart

3 Answers3

Linked

Related