Puppeteer в настоящее время может быть самой известной библиотекой автоматизации безголового браузера. Он предоставляет высокоуровневый API Node.js, который позволяет запускать и отправлять команды экземпляру браузера Chromium или Chrome. Он зарекомендовал себя как простой в установке, простой в использовании и производительный по своей природе.

Немного предыстории 📖

Принцип работы Puppeteer заключается в том, что он обеспечивает тонкий слой над DevTools Protocol.

Протокол DevTools - это то, что дает вам возможность делать все классные вещи на фактической панели инструментов «Проверить элемент» в вашем браузере. На самом деле этот протокол тот же, что используется в большинстве браузеров на основе Blink (Chrome, Chromium и т. Д.), предоставляя инструменты для проверки DOM, профилирования сети, отладки и всех других интересных возможностей, к которым у нас есть доступ.
В Puppeteer вы можете делать практически все, что можете делать в реальном браузере, без каких-либо хаков.

Puppeteer входит в состав Google Chrome и, в частности, поддерживается командой Chrome DevTools. Уже сам по себе этот факт должен вселить в вас уверенность в долгосрочной устойчивости проекта. Кроме того, гарантируется наличие новейших функций, поставляемых в браузеры Chromium / Chrome. Обычно вам не нужно ждать, пока функция перенесена в библиотеку.

Итак, приступим! 👷

Получить библиотеку

Изначально убедитесь, что вы находитесь на машине с установленным Node.js ›= v10.18.1, чтобы мы могли использовать последнюю версию Puppeteer.

Создайте новую папку проекта под названием puppeteer-example, чтобы мы могли приступить к процессу.

mkdir puppeteer-example
  cd puppeteer-example

Теперь мы можем продолжить и запустить требуемую установку Node.js.

npm init -y

Теперь вы готовы к установке ваших любимых библиотек, таких как left-pad или browser-redirect, но пока можете пропустить это 😂. Вернемся к нашей цели:

npm install puppeteer@3

При установке библиотеки вы, вероятно, столкнулись с сообщением на консоли Загрузка Chromium xxx. Это сообщение предназначено для того, чтобы вы знали, что с библиотекой Puppeteer также загружается определенная версия Chromium для вашей операционной системы (внутри node_modules), которая будет использоваться вашей установкой Puppeteer. Причина в том, что каждая версия Puppeteer гарантированно работает только с определенной версией Chromium, с которой она поставляется.
Специальный совет: если у вас немного ограниченного дискового пространства, после завершения удалите каталог node_modules из тестовых или неиспользуемых проектов Puppeteer.

Первая встреча🤞

Мы завершили установку и теперь можем приступить к написанию кода. Вы, вероятно, будете удивлены, как много можно сделать с помощью нескольких строк кода.

Для нашей первой задачи мы попробуем изучить официальный сайт Puppeteer https://pptr.dev/.
Создайте тестовый файл index.js со следующим содержимым:

const puppeteer = require("puppeteer");
(async function () {
  const browser = await puppeteer.launch({ headless: false }); // We use this option to go into non-headless mode
  const page = await browser.newPage(); // Create a new page instance
  await page.goto("https://pptr.dev"); // Navigate to the pptr.dev website
  await page.waitFor(5000); // Wait for 5 seconds to see the beautiful site
  await browser.close(); // Close the browser
})();

Теперь, запустив этот код с помощью node test.js, вы увидите запуск экземпляра Chromium и переход на веб-сайт pptr.dev в течение 5 секунд перед закрытием.

Я уверен, что теперь это удобное место для энтузиастов веб-автоматизации. Единственный отсутствующий компонент - это сценарии, которые вам нужно запустить, и почувствовать интуитивно понятный и простой API, который рекламирует Puppeteer.

Почему бы не взглянуть?

Изучение простого сценария 🕵

Пропуская шутки, наша цель - изучить для нашего удобства функцию автозаполнения поиска, которая есть на веб-сайте pptr.dev.

Мысли вслух

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

Мы ожидаем, что пользователь:
1. откроет страницу
2. Попытайтесь найти поиск с автозаполнением
3. Введите его запрос для метода API, который он ищет
4. Щелкните наиболее релевантный результат в списке
5. Ожидайте увидеть раздел с элементом он выбрал

Чтобы проверить, настолько ли интуитивно понятен API Puppeteer, как он утверждает, мы можем продолжить и перевести это мышление в команды Puppeteer.

/* Somewhere else... */
const Homepage = {
  autocompleteSearchInput: "input[type='search']",
};
const apiSearchTerm = "metrics"; // The API method we are looking for
/* ... */
await page.goto("https://pptr.dev");
await page.waitForSelector(Homepage.autocompleteSearchInput);
await page.type(Homepage.autocompleteSearchInput, apiSearchTerm);
await page.click("search-item");
// Find the API name using XPath
const $apiMethod = await page.$x(
  "//api-method-name[text()='" + apiSearchTerm + "']"
)[0];
// Check if this method name section is actually visible on the viewport
const isApiMethodVisible = await $apiMethod.isIntersectingViewport();
assert.equal(isApiMethodVisible, true);

Ну вот и все! 🎉
Приведенный выше код, содержащий также некоторую уборку, на мой взгляд, кажется довольно простым, исходя из изложенного нами процесса мышления, я не думаю, что мне даже нужно объяснять чему способствует большинство команд. API успешно переводит на понятный язык, не полагаясь на другие внешние абстракции.

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

Отличительным фактором здесь является то, что команда, которую мы получаем напрямую от Puppeteer, может считаться самой надежной, просто потому, что она предоставляется самой платформой.

Не хватает одной или двух вещей 🙈

После того, как мы все согласимся с тем, что API довольно интуитивно понятен и прост в использовании, мы можем перейти и упомянуть пару вещей, которые могут показаться «отсутствующими» для улучшения нашего опыта разработки.

1) Заполните код ключевым словом async

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

Чтобы сделать обработку этих асинхронных операций немного менее болезненной, JavaScript добавил несколько новых ключевых слов в синтаксис языка. Эти ключевые слова представляют собой async & await, которые вы видите в нашем коде. Поскольку API Puppeteer должен использовать промисы, лучший способ написать наш код - использовать этот синтаксис async / await для большинства команд.

2) Цепочка пока недоступна

Из-за некоторых дизайнерских решений и характера библиотеки, как мы уже упоминали выше, в настоящее время нет поддержки того, что мы можем назвать цепочкой методов. Благодаря этой возможности наш код может стать намного более плавным для чтения и выполнения. Представьте себе что-то вроде:

await page.$("input[type='search']").click().type("metrics").submit();

Я не могу поручиться, но думаю, что есть некоторые сторонние библиотечные решения, которые вы можете попробовать. Если вы хотите немного углубиться в состояние и возможные внешние решения, вы начнете с рассмотрения одной соответствующей проблемы GitHub.

Закрытие

Вы только что прошли сверхбыстрый вводный курс по настройке Puppeteer и написали простой сценарий для автозаполнения поиска. С этого момента вы сами по себе, за исключением всех рецептов, которые появятся в The Home of Web Automation.

Я предлагаю начать экспериментировать с вашим собственным вариантом использования и в качестве сказки на ночь просмотреть подробную документацию по API на GitHub. Почти наверняка вы обнаружите пару удивительных вещей, которых не ожидали сделать, используя собственные команды.

Перекрестная публикация из Дома веб-автоматизации

Фотография Кевин Ку в Pexels