使用Node.js Puppeteer操作YouTube搜索框时遇'Cannot focus non-HTMLElement'错误

问题描述 #

尝试用Puppeteer在YouTube搜索框输入内容，代码如下：

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://youtube.com');
    await page.type('#search','a');
...

出现错误：

throw new Error('Evaluation failed: ' + (0, util_js_1.getExceptionMessage)(exceptionDetails));
          ^

Error: Evaluation failed: Error: Cannot focus non-HTMLElement
    at pptr://__puppeteer_evaluation_script__:3:23
    at ExecutionContext._ExecutionContext_evaluate (/Users/benjaminrubin/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:286:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async ExecutionContext.evaluate (/Users/benjaminrubin/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:117:16)
    at async ElementHandle.evaluate (/Users/benjaminrubin/node_modules/puppeteer/lib/cjs/puppeteer/common/JSHandle.js:105:16)
    at async ElementHandle.focus (/Users/benjaminrubin/node_modules/puppeteer/lib/cjs/puppeteer/common/ElementHandle.js:486:9)
    at async ElementHandle.type (/Users/benjaminrubin/node_modules/puppeteer/lib/cjs/puppeteer/common/ElementHandle.js:516:9)
    at async DOMWorld.type (/Users/benjaminrubin/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:449:9)
    at async /Users/benjaminrubin/Documents/Software Dev Education/Scraping with Node JS/youtubeScrape.js:60:9

错误解析 #

Cannot focus non-HTMLElement 意思是：你通过选择器选中的不是可聚焦的HTML元素，或者元素还未完成渲染。

Puppeteer的page.type()方法需要先将焦点定位到目标元素上才能模拟输入，如果选中的是SVG节点、文本节点，或者只是一个容器元素（而非真正的<input>/<textarea>输入框），就会抛出这个错误。

你用#search选择器定位的元素，大概率是YouTube搜索框的外层容器，而非真正接收输入的<input>标签——YouTube的页面结构可能更新了，旧示例里的选择器已经失效。

解决方案 #

1. 定位真正的输入框元素 #

打开YouTube页面，通过浏览器开发者工具查看搜索框的真实结构，你会发现真正的输入框是<input id="search-input">（或类似属性），替换选择器即可。

2. 等待元素加载完成 #

YouTube是动态渲染页面，直接调用page.type()可能会在元素未完全渲染时执行，导致选中无效元素。需要通过waitForSelector等待元素可见且可交互。

修正后的代码：

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    // 等待页面加载至网络空闲状态，确保动态元素渲染完成
    await page.goto('https://youtube.com', { waitUntil: 'networkidle2' });
    // 等待真正的输入框元素可见并可交互
    await page.waitForSelector('input#search-input', { visible: true });
    // 在输入框中输入内容
    await page.type('input#search-input', 'a');
    // 后续操作（比如点击搜索按钮）
    // await page.click('button#search-icon-legacy');
    // 关闭浏览器
    // await browser.close();
})();

备选方案：直接通过evaluate设置值 #

如果只需要填充内容而不需要模拟真实输入动作，可以用page.evaluate()直接修改输入框的value：

await page.evaluate(() => {
    document.querySelector('input#search-input').value = 'a';
});

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