Как автоматизировать работу в браузере

JavaScript, Node, Puppeteer: автоматизация Chrome и веб-скрапинг

Библиотека puppeteer для Node.js позволяет автоматизировать работу с браузером Google Chrome. В частности, с помощью puppeteer можно создавать программы для автоматического сбора данных с веб-сайтов, так называемые веб-скраперы, имитирующие действия обычного пользователя. В подобных сценариях может применяться браузер без пользовательского интерфейса, так называемый «Headless Chrome». Используя puppeteer , можно управлять и браузером, который запущен в обычном режиме, что особенно полезно при отладке программ.

Предварительная подготовка

Перед началом работы вам понадобится Node 8+. Найти и загрузить его можно здесь, выбрав текущую (Current) версию. Если вы никогда раньше не работали с Node, взгляните на эти учебные курсы или поищите другие материалы, благо, их в Сети предостаточно.

После установки Node создайте папку для проекта и установите puppeteer . Вместе с ним будет установлена и актуальная версия Chromium, который гарантированно будет работать с интересующим нас API. Сделать это можно с помощью следующей команды:

Пример №1: создание копий экрана

После установки puppeteer разберём простой пример. Он, с небольшими изменениями, повторяет документацию к библиотеке. Код, который мы сейчас рассмотрим, делает скриншот заданной веб-страницы.

Для начала создадим файл test.js и поместим в него следующее:

Построчно разберём этот код. Сначала покажем общую картину.

В этой строке мы подключаем ранее установленную библиотеку puppeteer в качестве зависимости.

Тут представлена главная функция, getPic() . Эта функция содержит код, автоматизирующий работу с браузером.

В этой строке мы вызываем функцию getPic() , то есть, выполняем её.

Важно обратить внимание на то, что функция getPic() является асинхронной, она определена с ключевым словом async . В ней используется конструкция async / await из ES 2017. Так как getPic() — функция асинхронная, она, при вызове, возвращает объект Promise . Такие объекты обычно называют «промисами». Когда функция, определённая с ключевым словом async , завершает работу и возвращает некое значение, промис либо будет разрешён (в случае успешного завершения операции), либо отклонён (если произойдёт ошибка).

Благодаря использованию при определении функции ключевого слова async , мы можем выполнять в ней вызовы других функций с ключевым словом await . Оно приостанавливает выполнение функции и позволяет дождаться разрешения соответствующего промиса, после чего работа функции продолжится. Если это всё вам пока не понятно — просто читайте дальше и постепенно всё начнёт становиться на свои места.

Теперь разберём код функции getPic() .

Тут мы запускаем puppeteer . Фактически это означает, что мы запускаем экземпляр браузера Chrome и записываем ссылку на него в только что созданную константу browser . Так как в этой строке использовано ключевое слово await , выполнение основной функции будет приостановлено до разрешения соответствующего промиса. В данном случае это означает ожидание либо успешного запуска экземпляра Chrome, либо возникновения ошибки.

Здесь мы создаём в браузере, управляемом посредством программного кода, новую страницу. А именно, запрашиваем эту операцию, ожидаем её завершения и записываем ссылку на страницу в константу page .

Используя переменную page , созданную в предыдущей строке, мы можем дать странице команду по переходу на указанный URL. В данном примере мы переходим на https://google.com . Выполнение кода, как и в предыдущих строках, приостановится до завершения операции.

Здесь мы запрашиваем у puppeteer создание скриншота текущей страницы, представленной константой page . Метод screenshot() принимает, в виде параметра, объект. Тут можно указать путь, по которому нужно сохранить скриншот в формате .png . Опять же, здесь используется ключевое слово await , что приводит к приостановке выполнения функции до завершения операции.

Функция getPic() завершает работу и мы закрываем браузер.

Запуск примера

Вышеописанный код, сохранённый в файле test.js , можно запустить с помощью Node следующим образом:

Вот что получится после того, как он успешно отработает:

Замечательно! А теперь, чтобы было веселей (и чтобы облегчить отладку), мы можем выполнить те же действия, запустив Chrome в обычном режиме.

Что бы это значило? Попробуйте и увидите сами. Для этого нужно заменить эту строку кода:

Сохраним файл и снова его запустим с помощью Node:

Здорово, правда? Передавая объект в качестве параметра при запуске браузера мы можем наблюдать за тем, как код управляет работой Google Chrome.
Прежде чем идти дальше, сделаем ещё кое-что. Вы заметили, что скриншот, который делает программа, включает в себя лишь часть страницы? Так происходит из-за того, что окно браузера немного меньше размера веб-страницы. Исправить это можно с помощью следующей строчки, меняющей размер окна:

Её надо добавить в код сразу после команды перехода по URL. Это приведёт к тому, что программа сделает скриншот, который выглядит гораздо лучше:

Вот как будет выглядеть итоговый вариант кода:

Пример №2: веб-скрапинг

Теперь, когда вы освоили основы автоматизации Chrome с помощью puppeteer , разберём более сложный пример, в котором займёмся сбором данных с веб-страниц.

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

Мы будем собирать данные с сайта Books To Scrape. Это — имитация электронного книжного магазина, созданная для экспериментов по веб-скрапингу.

В той же директории, где лежит файл test.js , создайте файл scrape.js и вставьте туда следующую заготовку:

В идеале, после разбора первого примера, вы уже должны понять то, как устроен этот код. Но если это не так — ничего страшного.

В этом фрагменте мы подключаем ранее установленный puppeteer . Далее, у нас имеется функция scrape() , в которую, ниже, мы добавим код для скрапинга. Эта функция возвратит некое значение. И, наконец, мы вызываем функцию scrape() и работаем с тем, что она возвратила. В данном случае — просто выводим это в консоль.

Проверим этот код, добавив в функцию scrape() возврат строки:

После этого запустим программу командой node scrape.js . В консоли должно появиться слово test . Работоспособность кода мы подтвердили, нужное значение попадает в консоль. Теперь можно заняться веб-скрапингом.

▍Шаг 1: настройка

Сначала надо создать экземпляр браузера, открыть новую страницу и перейти по URL. Вот как мы всё это сделаем:

Разберём этот код.

В этой строке мы создаём экземпляр браузера и устанавливаем параметр headless в false . Это позволяет нам наблюдать за тем, что происходит.

Здесь создаём новую страницу в браузере.

Переходим по адресу http://books.toscrape.com/ .

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

Здесь закрываем браузер и возвращаем результат.

Предварительная подготовка завершена, теперь займёмся скрапингом.

▍Шаг 2: скрапинг

Как вы уже, наверное, поняли, на сайте Books To Scrape имеется большой каталог настоящих книг, снабжённых условными данными. Мы собираемся взять первую книгу, расположенную на странице, и вернуть её название и цену. Вот домашняя страница сайта. Щёлкнем по первой книге (она выделена красной рамкой).

В документации по puppeteer можно найти метод, который позволяет имитировать щелчки мышью по странице:

Конструкция вида selector <string> представляет собой селектор для поиска элемента, по которому нужно щёлкнуть. Если обнаружено несколько элементов, удовлетворяющих селектору, то щелчок будет сделан по первому из них.

Очень хорошо то, что инструменты разработчика Google Chrome позволяют, без особых сложностей, определить селектор конкретного элемента. Для того, чтобы это сделать, достаточно щёлкнуть правой кнопкой мыши по изображению и выбрать команду Inspect (Просмотреть код).

Эта команда откроет панель Elements (Элементы), в которой будет представлен код страницы, фрагмент которого, соответствующий интересующему нас элементу, будет выделен. После этого можно щёлкнуть по кнопке с тремя точками слева и в появившемся меню выбрать команду Copy → Copy selector (Копировать → Копировать селектор).

Отлично! Теперь у нас имеется селектор и всё готово для того, чтобы сформировать метод click и вставить его в программу. Вот как это будет выглядеть:

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

На этой новой странице нас интересует название книги и её цена. Они выделены на нижеприведённом рисунке.

Для того, чтобы добраться до этих значений, мы будем пользоваться методом page.evaluate() . Этот метод позволяет использовать методы JavaScript для работы с DOM, наподобие querySelector() .

Для начала вызовем метод page.evaluate() и присвоим возвращённое им значение константе result :

В этой функции мы можем выбирать необходимые элементы. Для того, чтобы понять, как описать то, что нам нужно, снова воспользуемся инструментами разработчика Chrome. Для этого щёлкнем правой кнопкой по названию книги и выберем команду Inspect (Просмотреть код).

В панели Elements (Элементы) можно увидеть, что название книги — это обычный заголовок первого уровня, h1 . Выбрать этот элемент можно с помощью следующего кода:

Так как нам нужен текст, содержащийся в этом элементе, нам понадобится воспользоваться свойством .innerText . В итоге приходим к следующей конструкции:

Такой же подход поможет нам выяснить то, как взять со страницы цену книги.

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

Теперь, когда мы вытащили со страницы название книги и её цену, мы можем возвратить всё это из функции в виде объекта:

В результате получается следующий код:

Здесь мы считываем со страницы название книги и цену, сохраняем их в объекте и возвращаем этот объект, что приводит к записи его в result .

Теперь осталось лишь вернуть константу result и вывести её содержимое в консоль.

Полный код этого примера будет выглядеть так:

Теперь можно запустить программу с помощью Node:

Если всё сделано правильно, в консоль будет выведено название книги и её цена:

Собственно говоря, всё это и есть веб-скрапинг и вы только что сделали первые шаги в этом занятии.

Пример №3: улучшаем программу

Тут у вас могут появиться вполне резонные вопросы: «Зачем щёлкать по ссылке, ведущей к странице книги, если и её название, и цена, отображаются на домашней странице? Почему бы не взять их прямо оттуда? И, если мы смогли это сделать, почему бы не прочитать названия и цены всех книг?».

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

▍Задача

Ваша цель — считать все заголовки книг и их цены с домашней страницы и вернуть их в виде массива объектов. Вот какой массив получился у меня:

Можете приступать. Не читайте пока дальше, попробуйте сделать всё сами. Надо сказать, что эта задача очень похожа на ту, которую мы только что решили.

Получилось? Если нет — тогда вот подсказка.

▍Подсказка

Главное отличие этой задачи от предыдущего примера заключается в том, что тут нам надо пройтись по списку данных. Вот как это можно сделать:

Если и сейчас вам не удаётся решить задачу, в этом нет ничего страшного. Это — вопрос практики. Вот один из возможных вариантов её решения.

▍Решение задачи

Итоги

Из этого материала вы узнали о том как пользоваться браузером Google Chrome и библиотекой Puppeteer для создания системы веб-скрапинга. А именно, мы рассмотрели структуру кода, способы программного управления браузером, методику создания копий экрана, методы имитации работы пользователя со страницей и подходы к чтению и сохранению данных, размещаемых на веб-страницах. Если это было ваше первое знакомство с веб-скрапингом, надеемся, теперь у вас есть всё необходимое для того, чтобы вытащить из интернета всё, что вам нужно.

Уважаемые читатели! Пользуетесь ли вы библиотекой Puppeteer и браузером Google Chrome без пользовательского интерфейса?

Зачем автоматизировать действия в браузере и как это сделать за 5 минут

Автоматизация действий, выполняемых в браузере, может упростить административные процессы, что очень полезно для увеличения производительности повседневного рабочего процесса.

Выполнение повторяющихся задач может оказаться непростым делом. Поскольку сейчас все основано на эффективности и скорости, очень важно иметь возможность автоматизировать некоторые (если не все) повторяющиеся задачи, которые необходимо выполнять на регулярной основе. К таким задачам относится ввод паролей, вход в электронную почту и т.д. В этом может помочь расширение Wildfire.

О расширении Wildfire

Простое расширение для автоматизации работы в браузере, которое отлично подходит как для новичков, так и для профи. Первое, что бросается в глаза при использовании Wildfire, — насколько у этого расширения интуитивно понятный интерфейс.

Расширение Wildfire записывает действия, совершаемые пользователем на веб-страницах, и воспроизводит их с помощью встроенного симулятора. Записанные действия попадают в журнал, который можно просматривать, а редактор рабочего процесса позволяет вносить любые необходимые правки. Это современный и удобный инструмент автоматизации.

1. Большой выбор полезных и простых в использовании опций, которые помогут максимально эффективно использовать расширение.
2. Wildfire можно установить совершенно бесплатно.
3. Можно запланировать моделирование.

• Переход к более сложным задачам потребует определенных навыков.

Как правильно использовать расширение Wildfire

В принципе, все довольно просто и на весь процесс уйдет не более 5 минут. Итак, вот что нужно сделать:

Щелкнуть по значку расширения Wildfire и выбрать подходящий вариант, чтобы начать запись.

Все записи и соответствующая информация сохраняются и отображаются в разделе « Журнал моделирования ».

Есть ли другие подобные инструменты?

Благодаря автоматизации многие рабочие моменты значительно упрощаются. Хорошим инструментом считается расширение UI.VISION KANTU. Оно может запускать и взаимодействовать с десктопными приложениями. Однако оно не подойдет для новичков. Также можно рассмотреть расширение Katalon Recorder. Но оно больше подходит для программистов и тестировщиков программного обеспечения, которые хотят автоматизировать повторяющиеся циклы тестирования. Для новичков подойдет Puppeteer Recorder — бесплатное расширение для браузера Google Chrome. С его помощью можно записывать действия, выполняемые в браузере, в виде сценария.

Помимо расширений для браузера Google Chrome, существует приложение под названием IFTTT, объединяющее все виды автоматизации воедино.

Выводы и советы

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

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

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

Автоматизируем любые действия в браузере с iMacros

iMacros — это программа, которая позволяет автоматизировать и имитировать действия пользователя в браузере. По словам разработчиков, iMacros загрузили 9 миллионов раз, но лишь 240 тысяч юзеров активно используют приложение. То есть лишь 3% из установивших продукт нашли ему применение. И неслучайно. При первом взгляде на документацию сложно разглядеть его удивительные, поражающие воображение возможности. Эта статья откроет их для тебя.

Рис. 1. Начало работы iMacros

Другие статьи в выпуске:

Хакер #185. Докажи баг!

Установка

Есть два варианта установки iMacros:

• в качестве расширения (add-ons) для браузера (Firefox, Chrome или Internet Explorer),
• как отдельное приложение (только для Windows).

В описанных ниже примерах использован iMacros Firefox add-on.

Hello world

Основной прием, которому стоит научиться, — запись действий в браузере и последующее их воспроизведение. Перейдем на вкладку Record на панели в левом нижнем углу экрана и нажмем на кнопку Record Macro. Теперь вобьем в Google «Hello world» и нажмем Enter. Потом кнопку Stop (под кнопкой Record Macro). iMacros сгенерировал код, который можно многократно запускать и редактировать:

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

WARNING

В браузере Chrome не работает треть iMacros-команд (какие — см. документацию). Поэтому лучше использовать Firefox (90% возможностей) или Internet Explorer (наиболее полный функционал).

Работа с данными

Заполнение форм из CSV-файла с данными

Предположим, нам нужно заполнить информацию о товарах интернет-магазина через CMS-админку (конкретный пример написан для Insales). Названия, описания, цены и остатки хранятся в файле CSV. Эту задачу можно мгновенно выполнить с помощью небольшого макроса:

Рис. 2. Запись макроса

Извлечение данных из веб-страниц

А теперь представим обратную ситуацию. Когда нужно просмотреть каталог магазина-конкурента и сохранить информацию о товарах.

Естественно, весь этот код можно использовать в цикле с динамическими переменными.

Рис. 3. Панель запуска макроса

Вызов iMacros из кода

Любой макрос можно сохранить в файле с расширением iim и использовать в приложениях, написанных на 16 языках программирования. Только надо не забыть установить полную версию (не аддон) iMacros на компьютер или веб-сервер.

Поддерживаемые языки

• ASP
• ASP.NET
• C#
• C++
• Delphi
• FoxPro
• Java
• JavaScript
• Perl
• PHP
• Python
• Power Shell
• Ruby
• TCL
• VBA
• VBS

• Пользователи iMacros для Firefox могут делиться между собой исходниками с помощью закладок Delicious. Подробности здесь: wiki.imacros.net/iMacros_for_Firefox#Bookmarking
• Полный мануал по iMacros: wiki.imacros.net
• Сайт производителя: imacros.net

Batch-файлы

Вызов iMacros из батников — наиболее простой и удобный путь автоматизировать их выполнение. Достаточно одной строки для запуска макроса:

Основная сложность в использовании iMacros под C++ — настройка среды разработки (конкретику по версиям различных сред ищи в документации или спрашивай у саппорта). Принцип работы кода такой же, как в PHP:

Использование JavaScript в макросах

В iMacros можно присваивать переменным результаты выполнения JavaScript-кода c помощью команды EVAL:

iMacros можно запускать с веб-сервера, используя PHP-скрипт. Зачем это может пригодиться? Для пополнения базы данных посредством мониторинга информационных сайтов, генерации онлайн-табло результатов тестирования состояния серверов и так далее. Пример вызова макроса, осуществляющего поиск на странице:

С помощью координатной адресации можно даже имитировать drag and drop. Перед записью макроса для Flash-сайта необходимо включить Use Direct Screen Commands в настройках.

Скриншоты

С помощью команды SCREENSHOT TYPE=(PAGE|BROWSER) FOLDER=folder_name FILE=file_name можно сделать скриншот всей страницы, а используя TAG + обращение к элементу + CONTENT=EVENT:SAVE_ELEMENT_SCREENSHOT — отдельной ее части.

Тестирование сайтов

С помощью iMacros можно легко написать программу для мониторинга времени реакции на разные действия пользователя. Пример:

Результаты измерений сохраняются в Imacros\Downloads\performance_Stopwatch.csv.

Обработка ошибок

По умолчанию в случае возникновения какой-либо ошибки выполнение макроса останавливается. Этого можно избежать, прописав в начале !ERRORIGNORE YES.

Использование прокси-серверов

Для этого чтобы подсоединиться к прокси-серверам перед выполнением макроса или во время его, используй команду proxy:

Альтернативы

Запись видео

Если ты хочешь запечатлеть лучшие моменты работы iMacros на видео — используй плагин Capture Fox для Mozilla или Screencastify для Chrome.

В приложении к журналу есть девять шаблонов макросов (с русскоязычными комментами), которые ты сможешь приспособить для решения следующих задач:

• заполнение полей форм из CSV-файлов;
• извлечение данных из таблицы в CSV-файл;
• установка значений в селектах и переключателях (radio buttons);
• сохранение картинок с сайта;
• обработка всплывающих JS-диалогов;
• печать страницы;
• создание скриншотов;
• измерение времени на загрузку отдельных элементов страницы и выполнение сценариев;
• извлечение данных из форм и прочих частей веб-сайта.