как обрабатывать элементы, которые загружаются после ajax-запроса в кукловоде

Question

Я пытаюсь сделать соскоб с помощью кукловода. Элемент, который мне нужен для обработки грузов в последнее время Когда я нажимаю кнопку поиска, результат загружается в AJAX, и мне нужно выбрать элемент, который я пытаюсь выбрать, в результатах поиска, но не в начальной загрузке страницы. Скриншот страницы, который он создает, также содержит результаты поиска, и если он выводит исходный HTML-код, я тоже вижу элемент там. но не уверен, почему я не могу выбрать его.

Answer 1

Вы можете использовать await page.waitForSelector(cssSelector);, чтобы попросить Puppeteer дождаться отображения любого элемента в пользовательском интерфейсе, прежде чем переходить к дальнейшим шагам в вашем скрипте. По умолчанию время ожидания составляет 30 секунд, но вы можете установить любое время ожидания.

Так что в вашем случае я бы:

• Введите текст для поиска в строке поиска.
• Нажмите на кнопку поиска (это выполнит ваш AJAX-вызов для загрузки результатов).
• Используйте await page.waitForSelector(cssSelector);, чтобы попросить Puppeteer подождать, пока какой-то элемент, который, как вы уверены, будет отображаться в пользовательском интерфейсе , после того, как при выполнении поиска станет видимым.
• Теперь, когда Puppeteer зарегистрировал элемент как видимый, вы знаете, что любые действия, которые вы хотите выполнить над ним, также будут выполняться правильно.

То, что вы можете обнаружить, происходит, если вы не используете этот вызов waitForSelector(), это то, что элемент отображается, но Puppeteer истечет время ожидания, например, если вы хотите выполнить команду click для элемента. Это связано с тем, что таймауты для событий click (и других событий Puppeteer, которые взаимодействуют с элементами) очень коротки, и иногда сценарий (особенно в безголовом режиме) может переходить к следующей инструкции слишком быстро, чтобы позволить пользовательскому интерфейсу обновляться достаточно быстро чтобы не отставать.

Таким образом, добавляя дополнительные вызовы waitForSelector, вы также делаете свои сценарии намного более надежными. Особенно, когда данные генерируются динамически, как в вашем случае.