如何使用Selenium Java点击SVG DOM树中的SVG节点？

嘿，我来帮你搞定这个SVG节点的自动化点击问题！从你给出的元素信息来看，这是一个带自定义__data__属性和特定样式的SVG text节点，下面给你几个实用的实现思路：

1. 利用元素属性精准定位（最推荐） #

你已经看到这个节点有独特的属性，比如font-family="mapicons"、fill="#fff"，可以用这些属性组合来定位，避免误点其他元素。

举几个不同工具的代码例子：

Selenium（Python） #

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

driver = webdriver.Firefox()
# 先等待元素加载完成
target_element = WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.CSS_SELECTOR, 'text[font-family="mapicons"][fill="#fff"]'))
)
target_element.click()

Cypress #

// 确保元素可见后再点击
cy.get('text[font-family="mapicons"][fill="#fff"]').should('be.visible').click()

2. 通过__data__自定义数据定位 #

如果这个节点是D3这类可视化库生成的，__data__里的depth:1、x:0这些参数可能是唯一标识，这时候可以用JS脚本直接筛选：

Selenium执行JS定位 #

target_element = driver.execute_script("""
// 遍历所有text节点，匹配__data__里的特征
return Array.from(document.querySelectorAll('text')).find(el => 
    el.__data__.depth === 1 && el.__data__.x === 0
);
""")
if target_element:
    target_element.click()

3. 坐标点击（兜底方案） #

如果前面的方法都不生效，还可以通过元素坐标来点击，适合一些特殊渲染的SVG节点：

from selenium.webdriver.common.action_chains import ActionChains

element = driver.find_element(By.CSS_SELECTOR, 'text[font-size="36px"]')
# 获取元素位置和尺寸
loc = element.location
size = element.size
# 计算元素中心坐标
center_x = loc['x'] + size['width'] / 2
center_y = loc['y'] + size['height'] / 2
# 滚动到元素位置，再点击
driver.execute_script(f"window.scrollTo({loc['x']}, {loc['y']});")
ActionChains(driver).move_by_offset(center_x, center_y).click().perform()

小提示 #

• 一定要加等待逻辑！SVG节点大多是动态生成的，直接定位可能会找不到元素，用工具自带的等待方法确保元素可见后再操作。
• 如果SVG嵌套在<svg>标签里，记得把选择器补全，比如svg > text[font-family="mapicons"]，缩小定位范围。

内容的提问来源于stack exchange，提问作者Steve Staple