Puppeteer下拉弹窗中page.type()键盘文本输入失效问题

问题表现 #

使用Puppeteer搭配Mocha编写E2E UI测试用例时，重命名功能出现输入异常：

• 点击重命名下拉选项后，视觉上能看到键盘焦点自动落在文本输入域上
• 调用page.type()无法写入文本，调用page.keyboard.press("Enter")无法触发回车提交
• 同流程下手动操作键盘输入、按回车均可正常生效
• 异常触发位置对应原有测试代码如下：

it(`UT - ${++i} : LNB - Rename Folder`, async function () {    
    await util.click(DP.LNB_newFolder_svg_xp);  // opens up the rename text popup
    await this.timeout(5000);
    // await LP.setId(DP.LNB_newFolder_palceholder_xp, "Created New Folder");
    // await util.click(XP.LNB_newFolder_palceholder_xp);  // not neccessary to click placeholder
    await page.type("test comment");  // where it won't type
    await page.keyboard.press("Enter");  // neither does it press Enter
 });

根因分析 #

• API调用错误：page.type()的第一个必填参数为目标元素选择器/元素句柄，第二个参数才是待输入文本。原有代码直接传入字符串作为第一个参数，方法根本没有定位到目标输入元素，自然无法完成输入。
• 等待逻辑无效：this.timeout(5000)是Mocha测试用例的超时时间配置，作用是设置用例最长执行时长，不是等待页面元素渲染、事件绑定完成的等待逻辑。点击触发下拉后，输入框的渲染、焦点绑定、输入/回车事件监听挂载都是异步过程，操作执行时机早于组件就绪时间，就会出现事件不响应的问题。所谓“焦点自动落到输入区域”只是视觉层面的表现，实际JS层面的事件监听可能还未挂载完成。
• 全局输入不可靠：直接调用page.type()、page.keyboard.press()是全局触发键盘事件，一旦焦点因为弹窗动画、组件重绘发生偏移，事件就会发送到错误的元素上，不会被输入框接收。

修复方案 #

1. 修正API调用方式，先通过选择器拿到输入框的元素句柄，再针对元素执行输入操作，不要依赖不确定的自动焦点
2. 替换无效的超时配置，使用Puppeteer内置的元素等待方法，等输入框可见、可交互后再执行后续操作
3. 主动触发输入框点击聚焦，抵消组件挂载的时间差，避免焦点未实际绑定的问题

修复后可直接运行的参考代码：

it(`UT - ${++i} : LNB - Rename Folder`, async function () {  
    // 测试用例超时配置统一放在用例开头，不要插在操作流程中
    this.timeout(5000);
    // 点击触发重命名弹窗
    await util.click(DP.LNB_newFolder_svg_xp);
    // 等待重命名输入框渲染完成、处于可见可交互状态
    const renameInput = await page.waitForSelector(DP.LNB_newFolder_palceholder_xp, {
        visible: true,
        timeout: 3000
    });
    // 主动点击输入框确保焦点落在元素上
    await renameInput.click();
    // 针对输入框元素执行文本输入
    await renameInput.type("test comment");
    // 等待100ms确保输入事件触发完成，再按回车
    await page.waitForTimeout(100);
    await page.keyboard.press("Enter");
});

补充排查点 #

如果上述修改后仍存在异常，可按以下方向排查：

• 检查输入框上方是否存在透明遮罩层：Puppeteer触发的事件如果命中遮罩层，不会传递到下层输入框，手动操作时因为鼠标移动轨迹、点击精度的差异可能不会触发该问题
• 检查组件是否存在非人工事件拦截：部分前端组件会校验事件的isTrusted属性，拦截自动化脚本触发的事件，可在点击输入框前增加鼠标移动到输入框位置的模拟逻辑，还原更真实的用户操作路径
• 避免在弹窗动画未完成时执行操作：如果下拉弹窗存在淡入、滑入动画，可适当延长等待时间，等动画结束后再执行输入操作

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