Angular项目中用Protractor更新Quill编辑器DIV的innerHTML问题求助

遇到Quill编辑器这种非标准表单控件时，直接用sendKeys确实经常不生效——毕竟Quill有自己的内部状态管理和事件系统，普通的输入模拟没法完全适配。下面给你几个靠谱的实现方案，包括直接操作原生DOM的方法：

方案1：直接操作原生DOM并触发变化事件 #

这是最直接有效的方法，通过executeScript访问浏览器原生DOM，设置innerHTML后手动触发输入事件，确保Angular能感知到内容变化：

const editorElement = element(by.className('ql-editor'));
browser.executeScript((el, newContent) => {
  // 设置编辑器内容
  el.innerHTML = newContent;
  // 触发input事件，让Quill和Angular更新状态
  const inputEvent = new Event('input', { bubbles: true, cancelable: true });
  el.dispatchEvent(inputEvent);
}, editorElement.getWebElement(), '你的新内容');

这种方法不需要依赖Quill的内部API，兼容性强，适合大多数测试场景。

方案2：模拟真实用户的输入流程 #

如果你想更贴近用户的真实操作，可以先聚焦编辑器、全选原有内容再输入新内容：

const editor = element(by.className('ql-editor'));

// 先点击聚焦编辑器
editor.click();
// 全选现有内容（Ctrl+A）
browser.actions().sendKeys(protractor.Key.chord(protractor.Key.CONTROL, 'a')).perform();
// 输入新内容
browser.actions().sendKeys('你的新内容').perform();

不过这个方法可能受编辑器当前格式、选区状态影响，稳定性不如方案1。

方案3：调用Quill实例的官方API #

如果你的项目中Quill实例是全局可访问的（比如挂载在window上），可以直接调用Quill的setContents方法来设置内容，这是最符合Quill设计的方式：

browser.executeScript((newContent) => {
  // 这里假设Quill实例可以通过Quill.find获取，或者你知道实例的存储位置
  const quillInstance = Quill.find('.ql-editor');
  // 用Quill的API设置纯文本内容
  quillInstance.setContents([{ insert: newContent }]);
}, '你的新内容');

注意：不同项目中Quill实例的获取方式可能不同，比如有的项目会把实例存在组件类里，这时候需要调整获取逻辑。

为什么sendKeys不生效？ #

Quill的ql-editor虽然是contenteditable的DIV，但它内部维护了自己的文档模型和选区状态，直接调用sendKeys可能没有正确触发Quill的内部事件，导致内容没有被编辑器正确识别，自然也不会同步到Angular的绑定数据中。

当然可以操作原生DOM！Protractor的browser.executeScript方法就是专门用来执行浏览器端原生JS代码的，这在处理富文本编辑器、第三方UI组件这类复杂控件时是非常常用的技巧。

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