在Kendo UI图表上无法通过xpath找到SVG元素

Question

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

我要单击国家，然后单击图形，如下屏幕截图所示：

网站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 inspector，然后按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']

Answer 2

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

您可以在下面尝试选择文本为//path的{​​{1}}节点：

text

Answer 3

由于所需元素为SVG Elements，因此您需要考虑名称空间并诱导 WebDriverWait 以使所需元素可点击，然后单击图形中的第一个 bar ，您可以使用以下解决方案：

• 代码块：

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

• 浏览器快照：