无法通过 Kendo UI 图表上的 xpath 定位 SVG 元素

Question

我确实尝试了一些 xpaths，但似乎运气不好。

我想点击国家然后点击图表，如下截图：

网站 URL 是：https://demos.telerik.com/kendo-ui/bar-charts/column

我试过 xpaths :

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


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

Answer 1

您好，您可以使用以下 Xpath 单击印度 //*[text()='India']

这真的很有帮助resource

我通常打开 chrome 检查器，然后按 cntrl+F 打开交互式方式来测试我的 xpaths:

您可以使用笔触来定位 svg，但请注意这些可能会经常更改。示例：//*[@d='M54.5 164.5 L 70.5 164.5 70.5 236.5 54.5 236.5Z' and @stroke='#03a9f4']

Answer 2

图表上的元素来自 SVG-namespace，因此您不能对 select 这些元素使用通用语法（您无法通过标签名称 select 元素，例如 //svg 或 //path，等等）

您可以在下方尝试 select text 节点文本 "India":

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

Answer 3

由于所需的元素是 SVG Elements，您需要考虑命名空间并引入 WebDriverWait 以使所需的 元素可点击 并单击 first bar 在 graph 中，您可以使用以下解决方案：

代码块：

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()

浏览器快照：

无法通过 Kendo UI 图表上的 xpath 定位 SVG 元素

Unable to locate SVG elements through xpath on Kendo UI chart

xpath

svg

kendo-ui

selenium-webdriver

webdriverwait