光标自动定位需确保编辑器可编辑、DOM已挂载、选区API可用;应等待初始化完成、DOM渲染完毕,并用Selection API精确验证位置,辅以E2E测试验证真实交互流程。

富文本编辑器中光标自动定位到指定位置,尤其在异步操作(如加载内容、插入节点、渲染完成)后执行,容易因 DOM 未就绪或编辑器状态未同步导致失败。测试这类行为的关键是:**等编辑器真正可编辑、DOM 已挂载、选区 API 可安全调用**。
确认编辑器已初始化并进入可编辑状态
很多富文本库(如 Quill、Tiptap、CKEditor、Slate 或原生 contenteditable)在初始化后存在“就绪延迟”。不能一拿到实例就立刻调用 setSelection 或 focus()。
- Quill:监听
editor.on('text-change')或检查editor.root.innerHTML是否非空且已挂载;更稳妥的是等待editor.hasFocus()为true或使用editor.focus()后加微任务延时 - Tiptap:监听
editor.isFocused变化,或使用editor.view.state.doc.nodeSize验证文档已构建 - 原生 contenteditable:确保元素已插入 DOM 且
el.contentEditable === 'true',再调用el.focus()
在真实 DOM 更新后触发光标定位
异步内容插入(如 innerHTML = html、editor.insertEmbed())后,浏览器需完成 layout/reflow 才能安全操作 Selection/Range。直接紧随其后调用 setSelectionRange 极易失败。
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 推荐用
await new Promise(r => requestAnimationFrame(() => setTimeout(r, 0)))确保 DOM 渲染完成 - Vue / React 测试中可用
await nextTick()(Vue)或await waitFor(() => expect(...).toBe(...))(RTL)配合act() - 避免只用
setTimeout(..., 0)—— 它不保证 DOM 已更新,仅进宏任务队列
用 Selection API 精确验证光标位置
测试是否“定位成功”,不能只看是否聚焦,而要检查 window.getSelection() 的 anchorNode 和 anchorOffset 是否符合预期。
- 插入一段带标识的文本(如
'[CURSOR]'),再查找该文本节点,计算其偏移量 - 对
contenteditable元素,可遍历子节点定位目标文本节点,再用range.selectNodeContents(node)+range.collapse(true)模拟定位 - Jest / Vitest 中断言示例:
const sel = window.getSelection();<br>expect(sel.anchorNode).toBe(textNode);<br>expect(sel.anchorOffset).toBe(5);
模拟用户交互路径进行端到端验证
单元测试易漏掉编辑器内部状态机(如 command 栈、transaction 队列)。建议补充轻量级 E2E 测试(如 Playwright 或 Cypress),模拟真实流程:
- 访问页面 → 等待编辑器容器
isVisible()→ 插入内容 → 等待textContent包含目标文字 → 调用定位方法 → 检查光标是否在预期位置(通过page.evaluate获取 Selection) - 特别注意焦点管理:某些编辑器会拦截
focusin,需主动element.focus()并 awaitelement.isFocused()
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










