Сделать скриншот страницы, требующей входа в систему, иногда сложнее, чем вы думаете.

Я рекомендую этот инструмент веб-автоматизации под названием chromedp для выполнения этой задачи.

Что такое Хромедп

Более быстрый и простой способ управлять браузерами, поддерживающими протокол Chrome DevTools».

Проще говоря, chromedp — это высокоуровневый клиент Chrome DevTools Protocol, который упрощает управление браузерами с помощью CDP.

Это библиотека для Go, которая позволяет автоматизировать такие веб-страницы, как:

  • Веб-скрапинг
  • Нажмите на элемент
  • Заполните и отправьте форму
  • Скачать файл и изображение
  • Захват pdf страницы
  • Сделайте скриншот определенного элемента и всей области просмотра браузера
  • Оценить javascript и получить результат

Некоторые концепции

Прежде чем мы перейдем к реальному коду, давайте проясним некоторые понятия.

Статический веб-сайт

Статический веб-сайт имеет только простые статические файлы ресурсов, такие как изображения, CSS и JavaScript, размещенные на сервере.

Когда пользователь посещает статический веб-сайт, браузер отправляет серверу запрос на конкретную страницу. Затем веб-сервер отправляет веб-страницу непосредственно в браузер без ее изменения.

Динамичный веб-сайт

Динамические сайты разные; они содержат сгенерированный кодом контент и не являются статичными.

Существует два типа динамических веб-сайтов:

  • веб-сайты, управляемые клиентскими сценариями (JavaScript)
  • веб-сайты, управляемые серверными сценариями (PHP, Python, Ruby и т. д.).

Веб-сайт с обязательным входом

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

Gmail является примером веб-сайта, требующего входа в систему.

Пачкать руки

Наш целевой веб-сайт сегодня — это маркетинговый веб-сайт Google Analytics, который отслеживает ряд показателей, как показано ниже.

Полный код здесь

  1. Сначала нам нужно установить необходимый пакет.
go get -u github.com/chromedp/chromedp

2. Определение основной функции скриншота приведено ниже.

  • Перейдите на целевую веб-страницу.
  • Эмулируйте размер области просмотра в соответствии с целевыми параметрами.
  • Спать 10 секунд.
  • Сделайте снимок экрана.

3. Часть вызова скриншота проста для понимания.

4. При инициализации объекта chromedp необходимо отметить два момента.

  • Путь к исполняемому файлу Chrome установлен на путь Chrome по умолчанию.
  • Каталог пользовательских данных также установлен в каталог пользовательских данных по умолчанию, который можно получить, введя chrome://version в браузере.

Хотите узнать больше? Ознакомьтесь с документацией chromedp!

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