Автоматизация браузера с Puppeteer - Блог

1. Краткое введение в автоматизацию браузера, включая варианты использования
2. Что такое безголовый браузер?
3. Chrome Headless
4. Mac OS X:
5. Linux:
6. Окна:
7. кукольник
8. Кукловод: практический пример
9. В сценариях автоматизации браузера какие потенциальные проблемы могут возникнуть при загрузке сторонних...
10. скорость
11. надежность
12. Последовательность:
13. Firefox без головы
14. Заключение
15. Следующие шаги

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

Примеры кода включены, чтобы вы могли следовать. Если вы уже знакомы с автоматизацией браузера, не стесняйтесь переходить к разделу «Кукольник: практический пример», который включает более продвинутое использование Кукольника.

Здесь мы рассмотрим:

1. Краткое введение в автоматизацию браузера: как это обычно делается и варианты использования.
2. Что такое безголовый браузер: чем он отличается от безголового.
3. Chrome Headless: команда запуска Chrome в автономной среде.
4. Кукольник: Управление Chrome программно.
5. Кукловод: практический пример (включает код).
6. Firefox Headless: обновление о безголовой поддержке.
7. Вывод: резюме

Краткое введение в автоматизацию браузера, включая варианты использования

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

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

Все современные браузеры могут быть автоматизированы, включая Chrome, Firefox, Edge & Safari. Вы также можете автоматизировать мобильные браузеры , Этот пост будет кратко освещать Chrome и Firefox.

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

Что такое безголовый браузер?

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

Chrome Headless

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

Mac OS X:

/ Applications / Google \ Chrome \ Canary.app/Contents/MacOS/Google \ Chrome \ Canary --headless --remote-debugging-port = 9222 --disable-gpu

Linux:

google-chrome --headless --remote-debugging-port = 9222 --disable-gpu

Окна:

chrome.exe --headless --remote-debugging-port = 9222 --disable-gpu

Флаг удаленной отладки позволяет вам использовать DevTools для некоторой удаленной проверки вкладки безголового браузера.

В прошлом вы могли использовать PhantomJS для достижения ваших задач автоматизации браузера, однако Chrome без головы работает быстрее, а также потребляет меньше памяти ,

Чтобы программно взаимодействовать с этой безголовой версией Chrome, вы можете отправлять команды через Протокол Chrome DevTools , Используя протокол DevTools, вы можете делать большинство вещей в обычном браузере DevTools. Вот пример взаимодействия по протоколу DevTools через WebSockets для получения URL текущей страницы с проверяемой страницы:

// Gist: https://gist.github.com/umaar/ebc170660f15aa894fa4880f4b76e77d // Здесь вы можете использовать свой собственный URL const devtools = new WebSocket ('ws: // localhost: 9222 / devtools / page / 69990451-aaab-4ef8 -87b1-ea77b8101b2a '); devtools.onmessage = ({данные}) => {const {результат: {результат: {значение}}} = JSON.parse (данные); console.log ('Получено сообщение WebSocket:', значение)}; devtools.send (JSON.stringify ({id: 1, метод: 'Runtime.evaluate', params: {expression: `'Текущий URL-адрес:' + location.href`}}));

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

кукольник

Код автоматизации, который вы пишете с помощью API Puppeteer, фактически выполняет вызовы через API протокола DevTools, что в точности и описано в предыдущем разделе. Вместо того, чтобы создавать полезные данные WebSocket, вы можете вызывать API, такие как:

page.goto (» https://example.com «)

,

Как показано в документации Puppeteer, вы можете запустить Puppeteer из кода Node.js следующим образом:

const puppeteer = require ('кукловод)'; (async () => {const browser = await puppeteer.launch (); const page = await browser.newPage (); await page.goto ('https://example.com'); await page.screenshot ({путь : 'example.png'}); browser.close ();}) ();

В приведенном выше примере выполняется следующее:

1. Запускает Chrome.
2. Открывает новую вкладку.
3. Переходит на example.com.
4. Делает скриншот текущей страницы.
5. Закрывает браузер.

Кукольник включает в себя примеры кода а также API документация ,

Кукловод: практический пример

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

СайтPen страница контактов включает в себя контактную форму. Обратите внимание, что после некоторой отладки с помощью DevTools поля формы настраиваются из CMS (системы управления контентом), а сами поля создаются после запроса JavaScript на стороне клиента.

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

В сценариях автоматизации браузера какие потенциальные проблемы могут возникнуть при загрузке сторонних ресурсов?

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

скорость

Общеизвестно, что автоматизация браузеров медленный , Часто из-за различных факторов, таких как «спящий режим», а не опрос изменений, сторонние скрипты, которые медленно загружаются и медленно изменяют страницу (чего обычно ждут фреймворки автоматизации), и многие другие аспекты.

В этом примере: Скорость сети - небольшая проблема.

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

надежность

Сторонние сервисы могут:

• Спуститесь на техническое обслуживание.
• Неожиданно возвращаются страницы с запросами (например, капчи), когда они обнаруживают высокий трафик с того же IP-адреса.
• Заряжайте свои деньги за доступ выше обычного API.

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

Последовательность:

Представьте, что ваши скрипты автоматизации предназначаются для элементов на странице с помощью селекторов CSS. Если эти же элементы могут появляться или исчезать в зависимости от того, что возвращается из CMS, ваши сценарии автоматизации, скорее всего, потерпят неудачу. Динамические данные (а не статические) могут быть сложными для работы в сценариях автоматизации, так как ваш код должен учитывать несколько сценариев. Это также может увеличить сложность вашей кодовой базы автоматизации.

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

Обратите внимание, как метки полей формы включают в себя текст «перехвачен» .

Вы можете найти полный пример кода который создает скриншот выше, на GitHub. Пример кода на GitHub делает следующее:

• Запускает статический веб-сервер для обслуживания макета файла.
• Включает перехват запросов через Puppeteer.
• Переходит на страницу контактов SitePen.
• Соблюдает все сетевые запросы.
• Перехватывает сетевой запрос, который заполняет контактную форму.
• Перенаправляет запрос на статический ресурс в файловой системе.

Firefox без головы

Firefox также предлагает без головы Режим. Кроме того, Mozilla предлагает JavaScript а также Джава примеры кода о том, как использовать безголовый режим Firefox. На момент написания этой статьи Firefox поддерживается только в Windows, и в ближайшем будущем планируется поддержка других платформ. Eсть руководство по подключению WebDriver к безголовой версии Firefox Вот:

Заключение

Мы затронули ряд тем:

• Безголовые браузеры: Chrome и Firefox могут работать без графического интерфейса. Есть больше вариантов там для других браузеров (например, Safari & Edge)
• Протокол DevTools: это предлагает API для управления Chrome через WebSockets. Мы увидели, как вы можете управлять удаленным браузером с веб-страницы на стороне клиента, используя Интерфейс WebSocket ,
• Chrome Headless : Chrome может работать в без головы среда. Родная поддержка для этого появилась недавно.
• Кукольник : Это программное обеспечение предлагает API высокого уровня для управления браузером Chrome по протоколу DevTools.
• Перехват сети с помощью Puppeteer : чтобы продемонстрировать более интересный вариант использования, мы увидели, как изменять сетевые запросы на лету для обеспечения стабильной и быстрой настройки автоматизации.
• Firefox без головы: Firefox также может работать в без головы среда. Родная поддержка для этого появилась недавно.

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

Следующие шаги

Вам нужна помощь в создании стратегии тестирования для вашего следующего проекта? Связаться с нами обсудить, как мы можем помочь!

Получить помощь от SitePen Разработка по требованию Наши быстрые и эффективные решения для задач разработки JavaScript любого размера.

Есть вопрос? Мы здесь, чтобы помочь! Связаться и давайте посмотрим, как мы можем работать вместе.

Похожие

Комментарии