Привет, друзья! Сегодня мы отправляемся в новое приключение: Используем Puppeteer для автоматизации отправки форм. Мы погрузимся в мир Puppeteer, чтобы понять, как мы можем автоматически войти в GitHub.

Puppeteer, если вы еще не знакомы, является мощной библиотекой Node.js, предоставляющей высокоуровневый API для управления браузерами Chrome или Chromium без графического интерфейса. Это наш золотой билет для автоматизации веб-задач и, в данном случае, отправки форм.

Без лишних слов, приступим!

1. Установка Puppeteer

Если вы еще не установили, первое, что нам нужно сделать, это установить Puppeteer в наш проект. В терминале выполните следующую команду:

npm i puppeteer

2. Запуск браузера

После установки Puppeteer давайте создадим новый файл JavaScript githubLogin.js и начнем с запуска браузера.

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://github.com/login');
  
  // Остальной код будет здесь
  
  await browser.close();
}

main().catch(console.error);

3. Заполнение и отправка формы

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

Давайте заполним их:

  await page.type('#login_field', 'your_username');
  await page.type('#password', 'your_password');

После заполнения полей мы можем отправить форму. Селектор для кнопки отправки в форме входа в GitHub - input[type="submit"].

  await Promise.all([
    page.waitForNavigation(),
    page.click('input[type="submit"]'),
  ]);

4. Проверка входа

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

  const profileImage = await page.$('.avatar-user');
  if (profileImage) {
    console.log('Успешный вход в систему!');
  } else {
    console.log('Ошибка входа.');
  }

И вот, мы вошли в систему на GitHub и проверили вход, используя Puppeteer.

Вот полный код:

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://github.com/login');
  
  await page.type('#login_field', 'your_username');
  await page.type('#password', 'your_password');

  await Promise.all([
    page.waitForNavigation(),
    page.click('input[type="submit"]'),
  ]);

  const profileImage = await page.$('.avatar-user');
  if (profileImage) {
    console.log('Успешный вход в систему!');
  } else {
    console.log('Ошибка входа.');
  }

  await browser.close();
}

main().catch(console.error);

Запустите node githubLogin.js в терминале и наблюдайте, как Puppeteer берет контроль!

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

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

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

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

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

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

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

Заключение

Вот и все, друзья!

Мы автоматизировали процесс входа в GitHub с помощью Puppeteer. Эта мощная библиотека помогает нам автоматизировать веб-задачи, делая наш процесс тестирования быстрее и плавнее.

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

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

Лео Г. - Medium

Читайте статьи от Лео Г. на Medium. Разработчик программного обеспечения | Технический писатель | Давайте свяжемся! | leogbrt@pm.me. Каждый день...

medium.com

Вот несколько ресурсов, чтобы погрузиться глубже в Puppeteer и автоматизацию:

[Отказ от ответственности: Каждая статья, которую я пишу, является сочетанием моих идей и возможностей искусственного интеллекта. В то время как ИИ помогает уточнять и разрабатывать, основные мысли и концепции исходят из моей перспективы и знаний. Чтобы узнать больше о моем творческом процессе, прочтите эту статью.]

Как ИИ помогает мне писать мои статьи?

Ландшафт Medium претерпел трансформацию, с появлением все большего числа статей с явно выраженным...