杨豪
cae37465d2
- method_l_shape: OK 候选尺度 ±0.0375 精修（步长 0.0125 + ±6px 窗口）， GT live_165204 Δ 179→176（真人 177），离线 9/10 保持 - 插桩 JSON.stringify 捕获 SDK 日志明文；指针 probe 排除 coalesced/pressure - 拖动不跟手指标作废：post_pos 晚于 SDK 重置滑块，鼠标事件流始终完整 - 剩余 VerifyErr = 候选整体选错（视觉确证），方向：多候选质量评估 - docs: experiments/solution/retrospective 同步收尾
47 lines
1.9 KiB
Markdown
47 lines
1.9 KiB
Markdown
# 经验：抖音视频页评论框输入（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 消失）。
|
||
|
||
## 注意
|
||
|
||
发评论是**真实写操作**（会真的发出去），触发验证码失败时评论会直接发布成功——
|
||
操作前确认账号允许发测试评论，或事后手动删除。
|