如何使用 Selenium 在条形图中单击矩形标签

Question

我的网站上有条形图，需要点击它。使用开发人员工具，我低于 xpath：

/html/body/root/main/portal/div[2]/div/div/div/my-portal/div[3]/td-tyr/td-tyr/div[1]/filter-bar/div/div[3]/div[1]/div[1]/bar-chart/div/div[1]/div/svg/g[4]/g[1]/rect[1]

当在 xpath 中使用上述内容时，它给出了无效的表达式。任何帮助将不胜感激。

Answer 1

要单击 条形图，因为元素有一个父 <svg> 元素，您可以使用以下任一 Locator Strategies：

• 使用css_selector：

  driver.find_element(By.CSS_SELECTOR, "bar-chart svg g rect.highcharts-point.highcharts-color-0.highcharts-point-hover[x='31.5'][y='40.5']").click()
  

• 使用xpath：

  driver.find_element(By.XPATH, "//bar-chart//*[name()='svg']//*[name()='g']//*[name()='rect'][@x='31.5' and @y='40.5']").click()
  

---

理想情况下，要点击 可点击 元素，您需要为WebDriverWait 诱导element_to_be_clickable()，您可以使用以下Locator Strategies 之一：

• 使用CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "bar-chart svg g rect.highcharts-point.highcharts-color-0.highcharts-point-hover[x='31.5'][y='40.5']"))).click()
  

• 使用XPATH：

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//bar-chart//*[name()='svg']//*[name()='g']//*[name()='rect'][@x='31.5' and @y='40.5']"))).click()
  

• 注意：您必须添加以下导入：

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

---

参考文献

您可以在interacting with SVG element 上找到一些相关讨论：

• How to access to 'rect' type element through Selenium-Python
• Clicking on svg using selenium python

Answer 2

在 Selenium 中基本上有 4 种点击方式。

我将使用这个 xpath

//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']

代码试用 1：

time.sleep(5)
driver.find_element_by_xpath("//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']").click()

代码试用 2：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']"))).click()

代码试用 3：

time.sleep(5)
button = driver.find_element_by_xpath("//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']")
driver.execute_script("arguments[0].click();", button)

代码试用 4：

time.sleep(5)
button = driver.find_element_by_xpath("//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']")
ActionChains(driver).move_to_element(button).click().perform()

进口：

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

PS：如果我们在HTML DOM 中有唯一条目，请检查dev tools（谷歌浏览器）。

检查步骤：

Press F12 in Chrome -> 转到element 部分 -> 做一个CTRL + F -> 然后粘贴xpath 看看，如果你想要的element 用@ 得到高亮 987654334@匹配节点。