Playwright - восходящая звезда в области парсинга и автоматизации веба. Если вы думали, что Puppeteer мощный, то Playwright взорвет ваш разум.

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

С помощью Playwright вы можете запускать Firefox и Safari (WebKit), а не только браузеры на основе Chromium. Он также сэкономит вам время, потому что автоматизирует повторяющийся код, такой как ожидание появления кнопок на странице.

Вам не обязательно быть знакомым с Playwright, Puppeteer или парсингом веба, чтобы воспользоваться этим руководством, но ожидается знание HTML, CSS и JavaScript.

В этом руководстве вы узнаете, как:

Проект

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

Мы будем использовать Playwright для запуска браузера, открытия страницы темы GitHub, нажатия кнопки "Загрузить еще", чтобы отобразить больше репозиториев, а затем извлечения следующей информации:

• Владелец
• Название
• URL
• Количество звезд
• Описание
• Список тем репозитория

Установка

Для использования Playwright вам понадобится версия Node.js, выше 10, и менеджер пакетов. Мы будем использовать npm, который поставляется вместе с Node.js. Вы можете подтвердить их наличие на вашей машине, запустив:

node -v && npm -v

Если у вас отсутствует Node.js или NPM, посетите руководство по установке, чтобы начать.

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

mkdir playwright-scraper && cd playwright-scraper
npm init -y
npm i playwright

При первой установке Playwright загрузит бинарные файлы браузера, поэтому установка может занять некоторое время.

Создание парсера

Создание парсера с использованием Playwright оказывается удивительно простым, даже если у вас нет опыта в парсинге. Если вы знакомы с JavaScript и CSS, это будет проще простого.

В папке вашего проекта создайте файл с именем scraper.js (или выберите любое другое имя) и откройте его в вашем любимом редакторе кода. Сначала мы убедимся, что Playwright правильно установлен и работает, запустив простой скрипт.

Теперь запустите его с помощью вашего редактора кода или выполните следующую команду в папке вашего проекта.

node scraper.js

Если вы увидели открывшееся окно Chromium и успешно загруженную страницу GitHub Topics, поздравляю, вы только что автоматизировали свой веб-браузер с помощью Playwright!

Загрузка дополнительных репозиториев

Когда вы открываете страницу темы, количество отображаемых репозиториев ограничено 30. Вы можете загрузить больше, нажав кнопку Загрузить больше... внизу страницы.

Есть две вещи, которые нам нужно указать Playwright, чтобы загрузить больше репозиториев:

Нажатие кнопок очень просто с помощью Playwright. Добавив префикс text= к строке, которую вы ищете, Playwright найдет элемент, который содержит эту строку, и нажмет на него. Он также будет ждать, пока элемент не появится, если он еще не отображается на странице.

Это огромное улучшение по сравнению с Puppeteer, и с ним приятно работать.

После нажатия нам нужно подождать, пока репозитории загрузятся. Если мы этого не сделаем, скрапер может завершиться до того, как новые репозитории появятся на странице, и мы упустим эти данные. [page.waitForFunction()](https://playwright.dev/#version=v1.2.1&path=docs%2Fapi.md&q=pagewaitforfunctionpagefunction-arg-options) позволяет выполнить функцию внутри браузера и ждать, пока функция не вернет true.

Чтобы найти селектор article.border, мы использовали инструменты разработчика браузера, которые можно открыть в большинстве браузеров, щелкнув правой кнопкой мыши в любом месте на странице и выбрав Инспектировать. Это означает: выбрать тег <article> с классом border.

Давайте вставим это в наш код и запустим тестовый запуск.

Если вы следите за запуском, вы увидите, что браузер сначала прокручивает вниз и нажимает кнопку Загрузить больше..., что изменяет текст на Загрузка.... Через секунду или две вы увидите следующую партию из 30 репозиториев. Отличная работа!

Извлечение данных

Теперь, когда мы знаем, как загружать больше репозиториев, мы извлечем нужные нам данные. Для этого мы будем использовать функцию [page.$$eval](https://playwright.dev/#version=v1.2.1&path=docs%2Fapi.md&q=pageevalselector-pagefunction-arg-1). Она указывает браузеру найти определенные элементы и затем выполнить JavaScript-функцию с этими элементами.

Это работает следующим образом: page.$$eval находит наши репозитории и выполняет предоставленную функцию в браузере. Мы получаем repoCards, который представляет собой массив всех элементов репозиториев. Возвращаемое значение функции становится возвращаемым значением вызова page.$$eval. Благодаря Playwright, вы можете извлекать данные из браузера и сохранять их в переменную в Node.js. Волшебство!

Если вам сложно понять сам код извлечения, обязательно ознакомьтесь с этим руководством по работе с CSS-селекторами и этим учебником по использованию этих селекторов для поиска HTML-элементов.

И вот код с извлечением. При его выполнении вы увидите 60 репозиториев с их информацией, выведенной в консоль.

Заключение

В этом руководстве мы узнали, как запустить браузер с помощью Playwright и управлять его действиями с помощью некоторых наиболее полезных функций Playwright: page.click() для эмуляции кликов мышью, page.waitForFunction() для ожидания событий и page.$$eval() для извлечения данных со страницы браузера.

Но мы только коснулись поверхности того, что можно сделать с помощью Playwright. Вы можете входить на веб-сайты, заполнять формы, перехватывать сетевое взаимодействие и, самое главное, использовать практически любой существующий браузер. Куда вы планируете взять этот проект дальше? А что насчет превращения его в инструмент командной строки (CLI), который принимает тему и количество репозиториев на входе и выводит файл с репозиториями? Вы можете сделать это прямо сейчас. Удачного парсинга!