网页自动化填表踩坑实录：TinyMCE、DevUI勾选框与透明覆盖层的正确打开方式

做网页自动化（Playwright 驱动真实站点填表提交）时，最耗时的往往不是业务逻辑，而是组件库的"表里不一"。本文记录三个高频踩坑点与解法，均来自近期实战。

## 一、富文本编辑器在 iframe 里：主文档找不到 contenteditable

很多站点的富文本是 TinyMCE/UEditor，正文区是 <iframe id="editor_ifr">。此时在主文档查 [contenteditable="true"] 会一无所获，fill() 也无处下手。

正确做法：用 frameLocator 进入 iframe，先 click 让焦点进编辑器，再键盘输入：

const fr = page.frameLocator('#editor_ifr');

await fr.locator('body').click();

await page.keyboard.press('Meta+A');

await page.keyboard.insertText(content);

注意 insertText 要打到 page（顶层）的键盘上，焦点会跟着进入 iframe。另外 Meta+A 全选前必须先确保点击落在编辑器内，否则会选中整个页面。

## 二、勾选框是"自绘"的：input 隐藏，要点旁边的方框

DevUI/por-ui 等组件库的 checkbox 常见结构：真正的 input[type=checkbox] 是 0x0 或 display:none，视觉上的方框是 span 自绘元素（如 devui-checkbox__material）。对 input 调 check() 或 click() 往往无效或状态不回写框架。

正确做法：用真实鼠标点自绘方框的中心坐标：

const box = await page.evaluate(() => {

  const el = document.querySelector('.devui-checkbox__material');

  const r = el.getBoundingClientRect();

  return { x: r.x + r.width/2, y: r.y + r.height/2 };

});

await page.mouse.click(box.x, box.y);

验证状态时别只看 input.checked，要看外层 class 是否出现 checked/is-checked。

## 三、透明覆盖层吞掉所有点击

登录弹窗、新手引导层常留一个空的 .popup-container 盖在页面上，Playwright 的 click 看似成功但事件被覆盖层吃掉，页面毫无反应（force: true 也没用）。

正确做法：先摘掉指针事件再操作：

await page.addStyleTag({ content: '.popup-container,.popup-container *{pointer-events:none!important}' });

或者直接用 page.mouse.click(坐标) 绕开命中测试。

## 小结

自动化填表的稳定性，取决于对"真实 DOM 结构"的尊重：iframe 要切进去、自绘控件要点图形、覆盖层要先清场。把这三板斧做成工具函数后，提交成功率从反复重试降到一次通过。