Puppeteer无法向指定input输入框写入内容该如何解决

问题原因 #

你使用的类选择器.form-control.mb-2.mr-sm-2.mb-sm-0在目标页面存在多个匹配项，第一个被匹配到的元素是页面中不可见的非导航区搜索框，因此输入内容被写入了隐藏元素，页面上自然看不到输入结果。

解决方法 #

改用更精准的选择器定位到导航栏可见的搜索框后再执行输入操作，推荐用属性选择器直接匹配搜索框的placeholder属性，修改后的代码如下：

const browser = await puppeteer.launch({
    headless: false,
    slowMo: 100,
});
const page = await browser.newPage();
await page.goto('https://cb01.tattoo/');
// 改用精准的属性选择器定位可见的搜索框
await page.waitForSelector('input[placeholder="Search..."]');
console.log('passed');
// 可选：先点击激活输入框再输入，避免部分站点限制未聚焦输入
await page.click('input[placeholder="Search..."]');
await page.type('input[placeholder="Search..."]', 'hello');
// 也可以直接用$eval赋值，同样生效
// await page.$eval('input[placeholder="Search..."]', el => el.value = 'hello');
console.log('end');
// await browser.close();

如果还是出现输入失效的情况，可以在page.goto时添加等待配置，确保页面资源完全加载后再操作：

await page.goto('https://cb01.tattoo/', { waitUntil: 'networkidle2' });

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