如何使用 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

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 : 如果我们有 请检查 dev tools (Google chrome)是否在 HTML DOM 中唯一 个条目。

检查步骤：

Press F12 in Chrome -> 转到 element 部分 -> 执行 CTRL + F -> 然后粘贴 xpath 并查看是否需要 element正在 突出显示 与 1/1 匹配节点。

Answer 2

要单击 条形图 ，因为该元素具有父 <svg> 元素，您可以使用以下任一方法 :

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

理想情况下，要单击 clickable 元素，您需要为 WebDriverWait =53=]element_to_be_clickable() 并且您可以使用以下任一项 :

使用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

参考资料

您可以在中找到一些相关讨论：

如何使用 Selenium 单击条形图中的矩形标记

How to click on a rect tag in a bar graph using Selenium

selenium

svg

xpath

css-selectors

svg-rect

参考资料