如何用Selenium定位SVG元素并获取Facebook已发布帖子的时间信息

Facebook近期采用SVG标签加载已发布帖子的时间信息，要获取特定帖子的时间值，需先将鼠标悬浮在目标元素上，等待时间内容显示后，再从SVG关联的DOM结构中提取该信息。

相关HTML代码 #

<span>
<span aria-labelledby=":rfq:" class="x1rg5ohu x6ikm8r x10wlt62 x16dsc37 xt0b8zv"><alfohmkfc-ngwhlbrgw><alfohmkfc-ngwhlbrgw><alfohmkfc-ngwhlbrgw><alfohmkfc-ngwhlbrgw><svg style="height: 16px; overflow: visible; width: 86.6855px;"><use xlink:href="#SvgT15" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></alfohmkfc-ngwhlbrgw></alfohmkfc-ngwhlbrgw></alfohmkfc-ngwhlbrgw></alfohmkfc-ngwhlbrgw></span></span>

相关截图 #

提取方法 #

1. 手动通过浏览器开发者工具提取 #

• 打开浏览器开发者工具（快捷键F12或Ctrl+Shift+I），定位到包含SVG的<span>元素（即带有x1rg5ohu x6ikm8r...类的节点）。
• 在Elements面板右键点击该元素，选择Force State > :hover，强制触发悬浮状态，此时时间内容会被渲染出来。
• 提取时间的核心路径：
  • 查看元素的aria-labelledby属性值（比如代码中的:rfq:），搜索页面中对应ID的元素，该元素内通常包含完整的时间文本。
  • 若时间以tooltip形式显示，可检查SVG或其父元素的aria-label、title属性，直接读取属性值。
  • 也可追溯<use>标签引用的#SvgT15定义，查看SVG内部是否包含渲染时间的文本节点。

2. 自动化批量提取（以Selenium为例） #

如果需要批量处理帖子，可通过Selenium模拟鼠标悬浮操作：

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
import time

# 初始化浏览器
driver = webdriver.Chrome()
driver.get("目标Facebook帖子页面URL")

# 定位到目标元素（根据实际页面调整选择器）
target_span = driver.find_element(By.CSS_SELECTOR, "span.x1rg5ohu.x6ikm8r.x10wlt62.x16dsc37.xt0b8zv")

# 模拟鼠标悬浮触发时间显示
ActionChains(driver).move_to_element(target_span).perform()
time.sleep(0.5)  # 等待数据渲染

# 方法1：通过aria-labelledby关联的节点提取时间
label_id = target_span.get_attribute("aria-labelledby")
time_node = driver.find_element(By.ID, label_id)
print(time_node.text)

# 方法2：直接读取元素的aria-label属性
svg_node = target_span.find_element(By.TAG_NAME, "svg")
print(svg_node.get_attribute("aria-label"))

driver.quit()

关键提示 #

• Facebook的DOM结构会频繁更新，需根据当前页面实际情况调整元素选择器。
• hover只是触发时间的显示逻辑，时间数据通常早已存在于DOM的辅助属性或关联节点中，无需从SVG图形本身提取。

内容的提问来源于stack exchange，提问作者masoume azizian