Playwright如何稳定识别并填充AI生成文章的富文本编辑器？

Question

常见问题：AI生成文章常通过动态渲染（如React/Vue富文本组件）、Shadow DOM封装、内容editable区域无稳定ID/Class，或依赖异步加载的编辑器实例（如Tiptap、Quill、CKEditor 5），导致Playwright常规`fill()`或`type()`失效。此外，AI内容可能含大量HTML标签、零宽字符、嵌套iframe或实时拼写检查高亮层，干扰元素定位与光标注入。若直接操作`contenteditable`元素，易因框架劫持输入事件而丢字、重复输入或触发异常状态。更棘手的是，部分编辑器在首次聚焦后才初始化内部state，而Playwright默认不模拟真实用户聚焦链路。这些问题共同导致填充成功率波动大、重试逻辑复杂、CI环境偶现失败——尤其在多语言、带格式（加粗/列表/图片占位符）的AI长文场景下尤为突出。

Answer 1

```html

一、现象层：Playwright 填充失败的典型表征

• 调用 page.fill('#editor', 'Hello') 后 DOM 无变化，控制台无报错
• type() 输入出现字符丢失、光标跳转异常、重复触发 input 事件
• 元素定位成功（await page.locator('[contenteditable]').isVisible() 返回 true），但输入后编辑器内部 state 未更新
• CI 环境中偶现“element not focusable”或“timeout waiting for element to be visible”
• 多语言内容（如含阿拉伯文 RTL、中文零宽空格 ​、越南音标组合）导致光标偏移或渲染截断

二、结构层：富文本编辑器的四大技术异构性

维度	传统表单	现代富文本编辑器（Tiptap/CKEditor 5/Quill）
输入通道	原生 <input>/<textarea>	劫持 keydown/input，代理至虚拟 document fragment
DOM 封装	扁平、可直选	Shadow DOM / React Portal / iframe 嵌套 / 动态 diff 渲染树
状态初始化	加载即就绪	需显式 focus() → 触发 onMount → 初始化 editor instance

三、机理层：为何 fill() 和 type() 在富文本中普遍失效

根本原因在于 Playwright 的底层语义与编辑器运行时模型错配：

1. 事件模拟失真：Playwright 的 type() 发送合成 KeyboardEvent，但 Tiptap 等监听的是 CompositionEvent + input 组合流；AI 文本含零宽字符（​, ）会中断 composition session
2. 状态隔离：CKEditor 5 使用 Model ↔ View 双向绑定，直接操作 DOM 不触发 model update，且其 setData() API 需通过 editor 实例调用
3. 聚焦链路缺失：React/Vue 编辑器常在 useEffect(() => { editor.focus() }, []) 中延迟聚焦，Playwright 默认不等待该副作用完成

四、实践层：高鲁棒性 AI 内容注入方案矩阵

graph TD
  A[识别编辑器类型] --> B{是否暴露全局 editor 实例？}
  B -->|是| C[调用 setData()/commands.insertContent()]
  B -->|否| D[穿透 Shadow DOM / iframe]
  D --> E[注入自定义 focus+paste 脚本]
  E --> F[用 Clipboard API 模拟粘贴 HTML]
  F --> G[验证 contenteditable innerHTML 匹配]

五、工程层：生产级封装示例（TypeScript + Playwright）

export async function injectAIContent(
  page: Page,
  selector: string,
  html: string,
  timeout = 15_000
) {
  const editor = await page.locator(selector).first();
  
  // Step 1: 强制聚焦并等待编辑器 ready
  await editor.focus({ timeout });
  await page.waitForFunction(
    (sel) => document.querySelector(sel)?.getAttribute('data-editor-ready') === 'true',
    selector,
    { timeout }
  );

  // Step 2: 穿透 Shadow DOM 或 iframe（自动检测）
  const frame = await getEditorFrame(page, selector);
  if (frame) {
    await frame.evaluate((htmlStr) => {
      const el = document.querySelector('[contenteditable]');
      if (el) {
        el.innerHTML = '';
        el.focus();
        document.execCommand('insertHTML', false, htmlStr);
      }
    }, html);
  } else {
    await page.evaluate(
      ([sel, htmlStr]) => {
        const el = document.querySelector(sel);
        if (el && 'setData' in el) {
          (el as any).setData(htmlStr); // CKEditor 5 兼容
        } else {
          el.innerHTML = htmlStr;
        }
      },
      [selector, html]
    );
  }
}

六、防御层：CI 稳定性增强策略

• 禁用浏览器拼写检查：chromium.launch({ args: ['--disable-spell-checking'] })
• 预置零宽字符清洗函数：cleanAIContent(text: string): string 移除 \u200B-\u200F, \uFEFF, \u202E
• 引入视觉验证钩子：await expect(editor).toHaveText(expect.stringContaining('预期片段'))
• 对 iframe 编辑器启用 page.route('**/ckeditor5/**', ...) 拦截资源确保加载完整性

```