如何在Puppeteer中正确模拟按下向下箭头键？

我完全懂你这种卡壳的感觉——试了整数40和字符串Down都没搞定，甚至翻了Puppeteer的Input.js源码还是没找到门路，别慌，咱们来捋清楚问题所在，给你几个靠谱的解决方案。

问题根源 #

你之前踩的坑主要有两个：

• Puppeteer的keyboard.press()方法遵循W3C规范的按键名称，向下箭头的正确标识是'ArrowDown'，而不是你用的'Down'；
• 如果目标元素没有获得焦点，按键事件会被发送到页面全局，而不是你操作的元素上，自然不会生效。

正确实现方式 #

方案1：确保元素聚焦 + 使用标准按键名称

这是最常用的正确姿势，先让目标元素获得焦点，再用规范的按键名模拟按下：

const elementHandle = await page.$('selector');
// 先让元素获得焦点，这一步很关键！
await elementHandle.focus();
// 输入内容
await elementHandle.type('something');
// 模拟按下向下箭头键，用正确的名称 ArrowDown
await page.keyboard.press('ArrowDown');

方案2：分步模拟按下和释放（适合对事件时序敏感的场景）

有些页面或元素可能需要更明确的按键事件时序，你可以拆分down和up操作，甚至加个短暂延迟确保事件被捕获：

const elementHandle = await page.$('selector');
await elementHandle.focus();
await elementHandle.type('something');

// 按下向下箭头
await page.keyboard.down('ArrowDown');
// 可选：延迟100ms，确保元素有足够时间响应事件
await page.waitForTimeout(100);
// 释放向下箭头
await page.keyboard.up('ArrowDown');

方案3：直接在元素句柄上调用press方法

如果你想让按键事件直接绑定到目标元素，也可以用elementHandle.press()方法，它会自动确保元素聚焦：

const elementHandle = await page.$('selector');
await elementHandle.type('something');
// 直接在元素上模拟按键
await elementHandle.press('ArrowDown');

额外提示 #

如果你还是不确定按键的正确名称，可以在浏览器控制台里按下目标键，查看event.code的值——这就是Puppeteer需要的按键名称。

内容的提问来源于stack exchange，提问作者Gilles Quénot