Кукольник не может писать в определенном поле ввода

#javascript #node.js #puppeteer

Вопрос:

Я попытался написать в поле поиска (ввод) с помощью 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();
 

Я также пробовал использовать прокомментированный код, но он все равно не работает.
Тай за помощью.

Комментарии:

1. Как вы думаете, почему он «ничего не пишет в этой области» ?

2. Я создал отладочный экземпляр chronium с помощью puppeeter, и я наблюдаю за процессом, и это результат

Ответ №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');
 

Комментарии:

1. Как вы узнаете, когда они спрятаны?

2. @nikxtr Это можно увидеть в дереве элементов DevTools, на вкладке CSS выбранного элемента.