如何使用Selenium按原始顺序获取WhatsApp消息元素？

我来帮你搞定这个提取顺序错乱的问题～你的核心痛点在于没有按消息内容的原始节点顺序遍历元素，而是分开处理文本和Emoji，导致顺序颠倒，还因为重复查找Emoji元素出现了重复打印的情况。

看看WhatsApp的HTML结构，你会发现消息里的文本和Emoji是作为兄弟节点存在的（<span>下同时包含文本节点和<img>类型的Emoji节点），所以必须按节点的自然顺序逐个处理才能保留原始消息的结构。

修正后的代码 #

chats = driver.find_elements_by_class_name("message-in")
for chat in chats:
    # 定位到直接包含文本和Emoji的最内层容器
    content_wrapper = chat.find_element_by_css_selector("span.i0jNr.selectable-text.copyable-text > span")
    # 获取容器内所有子节点：包括文本节点和Emoji的img节点，保持原始顺序
    all_nodes = content_wrapper.find_elements_by_xpath("./* | ./text()")
    
    full_message = ""
    for node in all_nodes:
        if node.tag_name == "img":
            # 处理Emoji：提取img的alt属性（就是Emoji的符号）
            full_message += node.get_attribute("alt")
        else:
            # 处理文本节点：去除多余的引号和空格，只保留有效文本
            raw_text = node.get_attribute("textContent").strip()
            if raw_text:
                full_message += f" {raw_text} "
    
    # 清理首尾多余空格后输出
    print(full_message.strip())

代码说明 #

1. 精准定位内容容器：用CSS选择器直接定位到包含所有内容的内层<span>，避免遍历无关节点。
2. 按顺序遍历所有子节点：通过XPath表达式./* | ./text()，同时获取容器内的元素节点（Emoji的img）和文本节点，完美保留原始顺序。
3. 区分处理节点类型：
   • 遇到<img>节点（Emoji），直接提取alt属性值（这就是Emoji对应的符号）。
   • 遇到文本节点，提取textContent并清理多余空格和引号，只保留有效文本内容。
4. 拼接并优化输出：把所有内容拼接后，清理首尾的多余空格，得到和原始消息完全一致的输出。

用这段代码处理你例子中的消息，就能得到期望的 you ，既不会颠倒顺序，也不会重复打印Emoji啦。

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