Построим что-нибудь в кукловоде

Заинтересованы в просмотре видео? Я снял на YouTube видео на эту тему https://youtu.be/KowSdMQTJeo

Puppeteer - это библиотека nodeJS, которая предоставляет API для автоматизации запущенного экземпляра браузеров Chrome и Chrome. Он предоставляет API-интерфейсы для всего, что можно сделать вручную в браузере. Некоторые приложения для кукловода автоматизируют повторяющуюся задачу, выполняемую на веб-сайте, или сквозное тестирование вашего приложения.

Сегодня мы напишем сценарий кукольника с очень конкретной задачей. Задача состоит в том, чтобы

  • Перейти на google.com
  • Искать заданную строку
  • Открыть первую ссылку
  • Создайте полноэкранный снимок экрана только что открытого веб-сайта и сохраните его в нашей системе.

Итак, приступим.

Мы начнем с создания папки и инициализации в ней проекта узла.

mkdir puppeter-getting-started
cd puppeter-getting-started
npm init

Просто нажмите клавишу ВВОД, чтобы ответить на все вопросы, заданные npm init.

После того, как мы инициализировали проект узла, мы можем пойти и установить кукольник

yarn add puppeteer

Давайте создадим наш сценарий

touch google.js

Начнем с импорта puppeter и определения нашей основной функции

Теперь запустим браузер.

puppeteer.launch возвращает обещание, которое после успешного разрешения дает нам запущенный экземпляр браузера. Мы предоставили headless значение false, поскольку мы хотим видеть окно браузера, по умолчанию headless имеет значение true, что означает, что все происходит в фоновом режиме, поэтому пользовательский интерфейс отображаться не будет.

Теперь перейдем к google.com

После запуска браузера мы создаем новую вкладку с помощью browser.newPage(), затем настраиваем viewPort на width 1920 и height 1080 и, наконец, переходим к https://www.google.com

Пришло время ввести несколько поисковых запросов.

После перехода к google.com мы находим уникальный селектор css для идентификации ввода поиска на странице и передаем его page.type вместе с нашим запросом steve jobs

page.type принимает наш запрос, находит элемент, используя селектор CSS, и вводит его в наш запрос.

Одно важное замечание: всегда старайтесь найти уникальный селектор CSS для выбора элементов, потому что на веб-странице может быть много элементов, и мы должны всегда выбирать правильный.

После того, как наш запрос находится на месте, мы получаем экземпляр ввода для поиска и нажимаем на нем ввод, используя element.press

Ладно, пока все хорошо. Мы уже выполнили поиск, давайте кликнем по первой найденной ссылке.

Мы используем page.waitForNavigation, потому что не хотим выполнять клик до загрузки страницы результатов поиска. Если мы это сделаем, метод page.click никогда не найдет ссылку, поскольку она еще не загружена.

В строке номер 24 мы вызываем page.click и предоставляем селектор css элемента, на который нужно щелкнуть, а затем снова ждем загрузки следующей страницы. Мы ждем, потому что в следующие несколько шагов мы сделаем снимок экрана всей веб-страницы, что будет невозможно, пока страница не загрузится.

Сделаем снимок экрана.

В конце концов, как только веб-страница загружена, мы делаем снимок экрана всей страницы, используя page.screenshot

Мы указываем path, в котором хотим сохранить файл. Мы также передаем fullPage, чтобы оно было истинным, поскольку мы хотим сделать снимок экрана всей страницы, а не то, что только что показано при первом рендеринге, без прокрутки.

Наконец закрываем браузер с помощью browser.close()

Это простой пример, который я могу придумать, но у кукловода есть много методов и функций, которые я не рассмотрел в этом посте, и посмотрите их здесь https://pptr.dev/

Вот полное репо для этого примера https://github.com/manojsinghnegiwd/puppeteer-getting-started