使用Puppeteer操作YouTube搜索栏报错：无法聚焦非HTMLElement

嘿，这个错误我之前折腾YouTube自动化的时候也碰到过！问题出在你找错了操作对象哦～

为啥会报错？ #

你代码里用的#search选择器，对应的其实是YouTube页面上搜索区域的外层容器div，根本不是真正能输入内容的<input>输入框。Puppeteer的page.type()方法执行时，会先尝试聚焦目标元素，但div默认是不可聚焦的非表单元素，自然就抛出这个"无法聚焦非HTML元素"的错误了。

怎么修复？ #

我们得定位到真正的搜索输入框，YouTube的搜索输入框有个非常稳定的标识：name="search_query"属性，用这个属性选择器来定位准没错。当然你也可以用#search-input这个id选择器，但属性选择器的兼容性更好，不容易因为页面小改动失效。

下面是修复后的完整代码，我还加了一些实用的调试和优化细节：

(async () => {
    // 开启headless:false可以看到浏览器实际操作，方便调试
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    
    // 等待页面完全加载（networkidle2表示网络请求基本停止）
    await page.goto('https://youtube.com', { waitUntil: 'networkidle2' });

    // 等待真正的搜索输入框渲染完成
    await page.waitForSelector('input[name="search_query"]');
    
    // 先点击输入框确保激活（有时候页面加载后输入框可能未处于可输入状态）
    await page.click('input[name="search_query"]');
    // 输入搜索关键词
    await page.type('input[name="search_query"]', 'cheese');
    
    // 可选：按回车键提交搜索，跳转到结果页
    await page.keyboard.press('Enter');
    // 等待搜索结果加载完成
    await page.waitForNavigation({ waitUntil: 'networkidle2' });
    
    await page.screenshot({ path: 'youtube-cheese-search.png' });
    console.log('done');
    // 记得关闭浏览器，避免资源占用
    await browser.close();
})();

额外调试小技巧 #

• 开启headless: false模式，能直观看到浏览器的操作过程，快速判断元素是否被正确选中
• 如果不确定选择器对不对，可以用page.$eval()验证：

  const tagName = await page.$eval('input[name="search_query"]', el => el.tagName);
  console.log(tagName); // 如果返回"INPUT"就说明选对了
  

• 要是遇到输入框被弹窗遮挡的情况，可以先处理弹窗（比如点击关闭按钮）再操作搜索框

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