如何使用 Selenium 和 Python 单击画布内的元素？

Question

在这种特殊情况下，如何使用 Selenium 和 Python 单击画布内的元素？

检查元素会显示此 CSS 选择器：

#highcharts-hz2pb6j-471 > svg > g.highcharts-series-group > g.highcharts-series.highcharts-series-1.highcharts-column-series.highcharts-color-1.highcharts-tracker > path.highcharts-point.highcharts-point-select.highcharts-color-1

然而，当尝试点击它时

browser.find_element_by_css_selector("[id^='highcharts-'] > svg > g.highcharts-series-group > g.highcharts-series.highcharts-series-1.highcharts-column-series.highcharts-color-1.highcharts-tracker > path.highcharts-point.highcharts-point-select.highcharts-color-1").click()

我收到此错误：

element click intercepted: Element <path fill="#385723" d="M 1217.5 200.5 L 1259.5 200.5 A 3 3 0 0 1 1262.3284271247462 202.5 L 1262.3284271247462 202.5 A 0 0 0 0 1 1262.3284271247462 202.5 L 1262.3284271247462 202.5 A 0 0 0 0 1 1214.6715728752538 202.5 L 1214.6715728752538 202.5 A 3 3 0 0 1 1217.5 200.5 Z" stroke="#000000" stroke-width="3" opacity="1" filter="none" class="highcharts-point highcharts-point-select highcharts-color-0"></path> is not clickable at point (1652, 810). Other element would receive the click: <path fill="#92AA7A" d="M 1214.6715728752538 202.5 L 1262.3284271247462 202.5 A 3 3 0 0 1 1262.5 203.5 L 1262.5 207.5 A 0 0 0 0 1 1262.5 207.5 L 1214.5 207.5 A 0 0 0 0 1 1214.5 207.5 L 1214.5 203.5 A 3 3 0 0 1 1214.6715728752538 202.5 Z" stroke="#000000" stroke-width="3" opacity="1" filter="none" class="highcharts-point highcharts-point-select highcharts-color-1"></path>

Answer 1

要使用 Selenium 和 Python 单击画布元素中的特定点，您可以使用 ActionChains 类移动到画布元素，然后在要单击的位置偏移所需的 x 和 y 坐标，最后执行单击操作。这是一般方法：

Import necessary modules: You need webdriver from selenium and ActionChains for simulating the mouse actions.

Set up your driver: Make sure you have the appropriate driver for the browser you are using (ChromeDriver for Google Chrome, geckodriver for Firefox, etc.).

Locate the canvas element: Use Selenium's methods like find_element_by_id, find_element_by_xpath, etc., to locate the canvas element.

Use ActionChains to perform the click: With ActionChains, you can move to the canvas element, then offset to the specific coordinates, and perform a click.

这是一个示例脚本：

python

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

# Set up the driver (assuming you are using Chrome)
driver = webdriver.Chrome('/path/to/chromedriver')

# Open the webpage containing the canvas
driver.get('http://yourwebsite.com/page_with_canvas')

# Locate the canvas element
canvas = driver.find_element_by_id('canvas_id')  # Adjust the locator method and value

# Define x and y coordinates where you want to click on the canvas
x_offset = 100
y_offset = 50

# Perform the click operation
ActionChains(driver) \
    .move_to_element_with_offset(canvas, x_offset, y_offset) \
    .click() \
    .perform()

# Remember to close the driver after your automation task is done
driver.quit()

确保将“/path/to/chromedriver”、“http://yourwebsite.com/page_with_canvas”和“canvas_id”替换为与您的场景相关的实际路径和标识符。根据您要在画布上单击的位置调整 x_offset 和 y_offset 值。

注意：此脚本假设画布的左上角是原点（0,0）。根据画布在应用程序中的使用方式，您可能需要相应地调整偏移以单击正确的位置。