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

Posted 2023-05-07

【中文标题】无法在 Kendo UI 图表上通过 xpath 定位 SVG 元素

【英文标题】：Unable to locate SVG elements through xpath on Kendo UI chart

【发布时间】：2019-06-11 16:43:04

【问题描述】：

我确实尝试了一些 xpath，但似乎没有运气。

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

网址为：https://demos.telerik.com/kendo-ui/bar-charts/column

我试过 xpaths ：

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


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

【参考方案1】：

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

这是一个非常有用的resource

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

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

【讨论】：

非常感谢，它有效，请您在 xpath 中帮助点击印度后点击图形？

是的，您要点击图表上的什么？ @HelpingHands

在像这里这样的任何一个栏上，我标记了我想点击的位置：prntscr.com/m8fek0

为您添加了更多内容@HelpingHands 希望对您有所帮助！祝你好运

【参考方案2】：

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

您可以尝试在下面选择带有文本"India" 的text 节点：

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

【参考方案3】：

由于所需的元素是SVG Elements，您需要考虑命名空间并诱导 WebDriverWait 以使所需的元素可点击并首先点击 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()

浏览器快照：