Автоматизация взаимодействий с помощью Puppeteer
Все лайки, комментарии и упоминания, которые я получаю в Instagram, от реальных людей? К сожалению, нет.
В этой статье я объясню, что такое и как работает бот для взаимодействий в Instagram. И если вы любопытны, оставайтесь, потому что я покажу вам, как вы можете создать свой собственный.
Сначала самое главное,
Что такое бот?
В двух словах, это "робот", способный выполнять заранее запрограммированные задачи повторно.
Имея это в виду, цель бота для взаимодействий - автоматизировать, например, лайки, комментарии и т.д.
Отлично, но...
Какие инструменты существуют для автоматизации задач?
Среди наиболее известных технологий есть:
Selenium, Cypress, Cucumber и т.д. Но в этом случае мы сосредоточимся на инструменте, предоставляемом Google: Puppeteer.
Puppeteer является одной из самых новых технологий по сравнению с альтернативами и, следовательно, он получает преимущества от последних достижений в технологии веб-браузеров. Еще одним преимуществом Puppeteer является то, что он является OpenSource, поэтому, помимо поддержки со стороны Google, у нас есть сообщество, которое ежедневно вносит улучшения.
Отлично, а что насчет моего бота? Давайте к этому перейдем.
Начальная настройка
Давайте посмотрим, как мы можем автоматизировать вход в Instagram.
Инициализируем проект NodeJs с помощью следующей команды:
npm init
Укажем имя нашего проекта, в данном случае ‘my-first-bot’.
В качестве каталога ввода мы установим ‘scraper.js’.
В разделе ‘scripts’ укажем следующую команду:
"scripts": {
"start": "node scraper.js"
},
У нас будет файл с именем _‘package.json’ со следующим содержимым:
{
"name": "my-first-bot",
"version": "1.0.0",
"description": "A instagram bot",
"main": "scraper.js",
"scripts": {
"start": "node scraper.js"
},
"author": "Abel Maroñas",
"license": "ISC"
}
Затем установим зависимости: Puppeteer и Puppeteer Core. Введем эти команды в консоли и установим:
npm i puppeteer puppeteer-core
Создадим файл в корне с именем ‘scraper.js’ и на данный момент у нас должна быть такая структура:
Конфигурация бота
Нашей целью является создание экземпляра браузера, чтобы перейти на Instagram и авторизоваться в нашем боте.
После подготовки наших файлов, мы импортируем Puppeteer и определяем две асинхронные функции в файле 'scraper.js': launchBrowser и loginToInstagram.
//scraper.js
const puppeteer = require("puppeteer");
async function launchBrowser() {
}
async function loginToInstagram() => {
}
Puppeteer предоставляет нам API для управления Chrome, в данном случае Chromium.
Для этого мы используем функцию 'launch', которая запускает экземпляр этого браузера, и устанавливаем свойство 'headless' в false, чтобы видеть поведение бота. Если не установить его на true, он будет выполняться в фоновом режиме.
Затем мы вызываем функцию 'newPage', которая открывает новую вкладку, и используем функцию 'goto', чтобы перейти на главную страницу Instagram.
Наконец, мы вызываем функцию 'loginToInstagram' и передаем ей параметр 'page', чтобы использовать содержимое этой страницы:
//scraper.js
function launchBrowser () {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto("https://www.instagram.com/");
await loginToInstagram(page);
}
Теперь давайте настроим процесс автоматизации для заполнения полей имени пользователя и пароля, которые требуются для входа в Instagram.
Для этого мы будем использовать три функции Puppeteer:
Мы находим нужные селекторы (имя пользователя, пароль и кнопка входа) и передаем их в качестве параметров:
//scraper.js
async function loginToInstagram(page) {
await page.waitForSelector("input[name='username']");
await page.type('input[name="username"]', "your_username");
await page.type('input[name="password"]', "your_password");
await page.click('button[type="submit"]');
}
Наконец, давайте вызовем функцию 'launchBrowser':
//scraper.js
const puppeteer = require("puppeteer");
async function launchBrowser () {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto("https://www.instagram.com/");
loginToInstagram(page);
}
async function loginToInstagram(page) {
await page.waitForSelector("input[name='username']");
await page.type('input[name="username"]', "your_username");
await page.type('input[name="password"]', "your_password");
await page.click('button[type="submit"]');
}
launchBrowser();
Запустите 'npm run start' и, если все прошло хорошо, у вас должен открыться браузер с вашей лентой Instagram, без необходимости вводить учетные данные! ... По крайней мере, не в этот момент.
Почему бы не остановиться здесь? Мы уже находимся в Instagram, и я сказал, что покажу вам, как создавать автоматизированные взаимодействия, поэтому я оставлю вас с этим снимком экрана, чтобы вы продолжили исследования и смогли применить их:
Мы можем автоматизировать, например, нажатие кнопки "Нравится" на публикации, имея селектор кнопки:
async function giveLike(page) {
let likeButtonSelector = "section ._aamw > button._abl-"
await page.waitForSelector(likeButtonSelector);
await page.$eval(likeButtonSelector, (el) => el.click());
}
Или размещение комментария:
async function addComment(page) {
let commentTextArea = "textarea._ablz._aaoc";
let commentButton = "button._acan._acao._acas";
await page.waitForSelector(commentTextArea);
await page.type(commentTextArea, "I'm not a bot! 👀");
await page.$eval(commentButton, (el) => el.click());
}
Учтите, что Instagram время от времени меняет названия классов элементов, поэтому эти селекторы могут не работать.
Я поделюсь ссылкой, которая показывает, как получить их: Получение селектора элемента.
И вот ссылка на официальную документацию, чтобы продолжить изучение.
Заключительные выводы
Мы видим, что Puppeteer способен автоматизировать процессы простым и понятным способом.
Помимо создания ботов для автоматического взаимодействия, мы можем использовать его в нашей рабочей среде для тестирования функциональности и поведения. Получать последние новости из наших любимых газет, получать продукты с разных веб-сайтов для сравнения их цен и т. д. Единственное ограничение - наше воображение.
Большое спасибо за прочтение этого поста. Если вы хотите, чтобы я более подробно рассмотрел эту тему или у вас есть какие-либо вопросы, оставьте их в комментариях!
Приветствия!