Не найден узел для селектора, но селектор есть на странице HTML

Question

У меня возникли проблемы при попытке ввода текста в поле ввода с помощью Puppeteer. Вот HTML-код для веб-сайта, который я использую, и он показывает, что id поля равно creditCardNumber:

Когда я пытаюсь использовать page.focus и page.type, он говорит, что для селектора нет узла. Этот код неправильный, или я могу сделать что-то лучше?

await page.waitFor(1500);
await page.focus('#creditCardNumber');
await page.focus('#creditCardNumber', '1234', {delay: 5});

Это ошибка, которую я получаю:

UnhandledPromiseRejectionWarning: Ошибка: не найден узел для селектора: # creditCardNumber

Answer 1

Необходимо дождаться добавления элемента #creditCardNumber в DOM, используя page.waitForSelector().

Поскольку вы получаете a TimeoutError, вы можете продлить (или даже отключить) максимальное время навигации, используя параметр timeout:

await page.waitForSelector('#creditCardNumber', {timeout: 60000});

Кроме того, похоже, что вы пытаетесь ввести в поле ввода, используя page.focus(), но вместо этого следует использовать page.type().

await page.type('#creditCardNumber', '1234', {delay: 5});

В результате ваш новый код должен выглядеть примерно так:

await page.waitForSelector('#creditCardNumber', {timeout: 60000});
await page.type('#creditCardNumber', '1234', {delay: 5});

Кроме того, вы также можете использовать elementHandle.type(), чтобы еще больше упростить ваш код:

const credit_card_number = await page.waitForSelector('#creditCardNumber', {timeout: 60000});
await credit_card_number.type('1234', {delay: 5});

Примечание: Если вы все еще получаете TimeoutError после вышеуказанных изменений, вы можете проверить page.content() или сделать снимок экрана страницы с page.screenshot(), чтобы проверить, что страница возвращает ожидаемые результаты.

Answer 2

Элемент DOM может не отображаться в тот момент, когда вы пытаетесь сфокусироваться на нем.

Попробуйте использовать page.waitForSelector до page.focus вызова:

await page.waitFor(1500);
await page.waitForSelector('#creditCardNumber');
await page.focus('#creditCardNumber');
await page.focus('#creditCardNumber', '1234', {delay: 5});