同一个”私信”按钮，换了账号就找不到了。这不是 bug，是抖音的灰度发布。我是如何用弹性选择器让自动化脚本在多个页面版本中都活下来的。

联系微信：llike620

引用原文：抖音私信自动化回复-多版本 DOM 适配

1. 当你以为定位对了，换个账号就崩了

事情的起点很简单——我写了一个浏览器扩展，用来监听抖音私信并自动回复。

最先定位到昵称的 XPath 是这样的：

let nickname = getTextNodeContent(document,
  '//div[@data-mask="conversaton-detail-content"]/div[1]//span'
);

在 A 账号上跑得稳稳当当。换了 B 账号，直接返回 null。

加调试日志一看，B 账号的私信页面 DOM 结构完全不一样——没有 data-mask 属性，用的是一个叫 RightPanelHeadertitle 的 class。

同一个网址，同一个功能，不同的 DOM。

2. 罪魁祸首：A/B 实验下的多版本页面

这不是 bug，是抖音在做 A/B 实验（也叫灰度发布）。

换句话说，你在浏览器里看到的抖音私信页面，和隔壁同事看到的可能源码都不相同。对于普通用户这是无感的，对于要做 DOM 自动化的我们来说，这就是噩梦。

这套私信页面的消息列表区域，我最终发现了 至少 4 种不同的 DOM 结构：

四种结构，指向同一个数据——最新的那条私信内容。

3. 解决方案：弹性选择器

我采用的核心策略叫 弹性选择器（Resilient Selectors），核心思想就一句话：

不指望一个选择器能通吃所有版本，用优先级降级的方式逐个尝试。

3.1 昵称提取：两级降级

let nickname = getTextNodeContent(document,
  '//div[@data-mask="conversaton-detail-content"]/div[1]//span'
);
if (!nickname) {
  nickname = getTextNodeContent(document,
    '//div[@class="RightPanelHeadertitle"]'
  );
}

先用最可靠的结构属性定位，失败后降级到 class 属性的备选。

3.2 消息内容提取：双级联降级

let content =
  getTextNodeContent(document,
    '//div[@class="messageMessageListlist"]//div[@data-index="0"]//div[@data-e2e="msg-item-content"]'
  )
  || getTextNodeContent(document,
    '//div[contains(@class,"conversationConversationItemcurConversation")]//pre'
  );

if (!content) {
  content =
    getTextNodeContent(document,
      '//div[@id="messageContent"]/div[1]/div[3]/div[contains(@style, "justify-content: space-between;")]//pre'
    )
    || getTextNodeContent(document,
      '//div[@data-e2e="conversation-item" and contains(@class, " ") and not(contains(substring-after(@class, " "), " "))]//pre'
    );
}

第一层用 || 短路尝试两个常用版本；第二层用 if (!content) 兜底两个历史版本。四个选择器覆盖了所有已知的页面变体。

3.3 输入框：两路径适配

let textarea = getNode(document, '//div[@contenteditable="true"]/div/div');
if (textarea) {
  simulateEditableInput('//div[@contenteditable="true"]/div/div', replyContent);
} else {
  simulateEditableInput('//div[@contenteditable="true"]/div/span', replyContent);
}

抖音的 contenteditable 输入框在不同版本下结尾元素分别是 <div> 和 <span>，按顺序先试一个。

3.4 发送按钮：两套 class 体系

let btn = getNode(document, '//span[contains(@class,"e2e-send-msg-btn")]');
if (!btn) {
  btn = getNode(document, '//div[contains(@class,"messageMsgInputinputAction")]/*[3]');
}

一个用 e2e- 前缀的测试定位属性，一个用业务 class 名——两种命名体系，只能同时兼容。

6. 完整架构图

┌─────────────────────────────────────────────────────────┐
│                   URL Gating Layer                       │
│         location.href.startsWith("douyin/user/self")     │
│                         ↓ true                           │
├─────────────────────────────────────────────────────────┤
│              Resilient Selector Layer                    │
│                                                         │
│  Nickname:   Selector A → Selector B (fallback)          │
│  Content:    Selector A || Selector B → C || D           │
│  Textarea:   Selector A → Selector B                     │
│  Send Btn:   Selector A → Selector B                     │
│                                                         │
│              ↑ 4 components × N versions                 │
├─────────────────────────────────────────────────────────┤
│                   DOM Access Layer                       │
│            document.evaluate (XPath, main doc)           │
│            shadowRoot.firstElementChild (wujie)          │
├─────────────────────────────────────────────────────────┤
│                   Action Layer                           │
│         simulateClick2 / simulateEditableInput           │
└─────────────────────────────────────────────────────────┘

7. 总结：几个值得带走的原则