# 经验：抖音视频页评论框输入（DraftEditor 的坑）

> 场景：通过 CDP 在抖音视频页评论框输入文字并提交。

## 坑

1. **容器里有假 INPUT**：`.comment-input-inner-container` 内有一个 `INPUT` 元素，
   focus 它无效（`document.activeElement` 仍是 BODY），insertText 也进不去。
   真正的编辑器是 Draft.js：`div[contenteditable="true"].notranslate.public-DraftEditor-content`。
2. **输入框可能在视口外**：直接取 rect 可能 y 为负或超视口，坐标点击会点空
   （activeElement 变 BODY）。
3. **没有可见的「发布」按钮**，提交用 Ctrl+Enter。

## 正确步骤

```python
# 1. 滚动到可见
js("document.querySelector('.comment-input-inner-container').scrollIntoView({block:'center'})")

# 2. 取新坐标并点击
box = js("""
(() => { const r = document.querySelector('.comment-input-inner-container').getBoundingClientRect();
  return JSON.stringify({x: Math.round(r.x+r.width/2), y: Math.round(r.y+r.height/2)}); })()
""")
pos = json.loads(box)
click_at_xy(pos["x"], pos["y"])

# 3. 确认焦点在 DraftEditor（div.notranslate.public-DraftEditor-content）后插入文字
cdp("Input.insertText", text="评论内容")

# 4. Ctrl+Enter 提交
cdp("Input.dispatchKeyEvent", type="keyDown", modifiers=2, key="Enter",
    code="Enter", windowsVirtualKeyCode=13, nativeVirtualKeyCode=13)
cdp("Input.dispatchKeyEvent", type="keyUp", modifiers=2, key="Enter",
    code="Enter", windowsVirtualKeyCode=13, nativeVirtualKeyCode=13)
```

## 验证

- 焦点成功：`document.activeElement.className` 含 `notranslate public-DraftEditor-content`。
- 输入成功：容器 `textContent` 变为输入内容（placeholder 消失）。

## 注意

发评论是**真实写操作**（会真的发出去），触发验证码失败时评论会直接发布成功——
操作前确认账号允许发测试评论，或事后手动删除。