无法找到动态生成元素：如何用ChromeDriver抓取Facebook动态邮箱？

问题根源 #

你遇到的问题核心有两点：

• Facebook通过React生成的元素ID（比如mount_0_0_D8）是动态随机变化的，每次页面加载都会更新，固定XPATH完全失效
• 邮箱内容存储在CSS伪元素::before和::after中，这类内容不属于DOM节点，直接用find_element无法读取

稳定提取的具体方法 #

1. 通过JavaScript读取伪元素内容

伪元素的内容需要借助window.getComputedStyle获取，结合Selenium的execute_script执行JS代码：

# 定位包含伪元素的父元素（用相对CSS选择器，避开动态ID）
target_element = driver.find_element(By.CSS_SELECTOR, "div[data-pagelet='ProfileAppSection_0'] ul div:nth-child(2) div:nth-child(2) div div span")

# 提取::before和::after的内容
before_content = driver.execute_script('return window.getComputedStyle(arguments[0], ":before").content;', target_element)
after_content = driver.execute_script('return window.getComputedStyle(arguments[0], ":after").content;', target_element)

# 拼接并清理邮箱（去除可能的引号包裹）
email = before_content.strip('"') + after_content.strip('"')
print(email)

2. 用显式等待替代time.sleep

显式等待会主动监听目标元素的加载状态，比固定时长的time.sleep更稳定可靠：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 等待目标元素出现（最长等待20秒）
wait = WebDriverWait(driver, 20)
target_element = wait.until(
    EC.presence_of_element_located((By.CSS_SELECTOR, "div[data-pagelet='ProfileAppSection_0'] ul div:nth-child(2) div:nth-child(2) div div span"))
)

# 后续提取伪元素内容的代码同上
before_content = driver.execute_script('return window.getComputedStyle(arguments[0], ":before").content;', target_element)
after_content = driver.execute_script('return window.getComputedStyle(arguments[0], ":after").content;', target_element)
email = before_content.strip('"') + after_content.strip('"')

关键注意事项 #

• 绝对不要用动态生成的ID编写定位器，优先用相对路径、固定元素属性（如data-pagelet）、层级关系定位
• Facebook存在反爬机制，操作间隔不要过短，避免账号被限制
• 如果页面需要登录才能查看联系方式，确保ChromeDriver已完成登录流程（可提前保存cookie或使用持久化配置）

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