Puppeteer 无法在特定的输入字段中写入答案

【问题标题】：Puppeteer cannot write in a specific input fieldPuppeteer 无法在特定的输入字段中写入
【发布时间】：2021-09-18 13:51:59
【问题描述】：

我尝试使用 Puppeteer 在搜索字段（输入）中写入内容，但程序结束时没有在该字段中写入任何内容。代码如下：

const browser = await puppeteer.launch({
    headless: false,
    slowMo: 100, // slow down by 250ms
});
const page = await browser.newPage();
await page.goto('https://cb01.tattoo/');
await page.waitForSelector('.form-control.mb-2.mr-sm-2.mb-sm-0');
console.log('passed');
await page.type('.form-control.mb-2.mr-sm-2.mb-sm-0', 'hello');
//await page.$eval('.form-control.mb-2.mr-sm-2.mb-sm-0', el => el.value = 'hello');
console.log('end');
//await browser.close();

我也尝试过使用带注释的代码，但它仍然不起作用。求帮助。

【问题讨论】：

为什么你认为它没有“在那个领域写任何东西”？
我用 puppeeter 创建了一个 chronium 的调试实例，我已经了解了整个过程，这就是结果

标签： javascript node.js puppeteer

【解决方案1】：

输入元素在隐藏元素内。您需要先取消隐藏父元素：

const browser = await puppeteer.launch({
    headless: false,
    slowMo: 100, // slow down by 250ms
});
const page = await browser.newPage();
await page.goto('https://cb01.tattoo/');
await page.waitForSelector('.form-control.mb-2.mr-sm-2.mb-sm-0');
console.log('passed');

await page.$eval('.mobileShow', el => el.style.display = 'block'); // Unhide parent.

await page.type('.form-control.mb-2.mr-sm-2.mb-sm-0', 'hello');
console.log('end');

【讨论】：

你怎么知道它们什么时候被隐藏了？
@nikxtr 可以在 DevTools 元素树中，在所选元素的 CSS 选项卡中看到。