Как веб-разработчик, я провожу половину дня в браузере.
Для меня браузер - это всегда то, что я вижу, со всеми макетами, формами, инструментами разработчика и т. Д. Когда я узнал о Headless browser, я начал копать его глубже. Оказывается, это такая мощная вещь, о которой я не подозревал все эти годы. Это настолько очаровало меня, что привело меня сюда, чтобы я написал несколько статей. Но прежде чем двигаться дальше, давайте узнаем, что такое безголовый браузер.
Безголовый браузер - это веб-браузер без графического пользовательского интерфейса. Он обеспечивает автоматическое управление веб-страницей в среде, аналогичной популярным веб-браузерам, но выполняется через интерфейс командной строки.
Это просто означает отсутствие графического интерфейса пользователя (GUI). Но какой смысл в браузере без графического интерфейса? Вот так!
Мы можем раскрыть мощь безголового браузера с помощью множества различных инструментов, но я здесь с Puppeteer.
С помощью Puppeteer мы будем делать снимок экрана веб-браузера, сгенерировать PDF веб-страницы и автоматизировать отправку формы в автоматическом режиме. Но что такое кукловод?
Puppeteer - это библиотека Node, которая предоставляет высокоуровневый API для управления Chrome или Chromium по протоколу DevTools. По умолчанию Puppeteer работает без головы, но его можно настроить для работы в полном (не без головы) Chrome или Chromium.
TL; DR;
Начнем с настройки headless chrome и puppeteer, предполагая, что среда узла уже настроена на вашем устройстве.
mkdir puppeteer-project cd puppeteer-project yarn yarn add puppeteer
Хорошо, теперь, когда мы все настроены и настроены, давайте начнем со скриншота веб-сайта! Создайте файл index.js внутри каталога puppeteer-project со следующим кодом
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://facebook.com');
await page.screenshot({path: 'facebook.png'});
console.log('Screenshot saved!');
await browser.close();
})();
Затем мы запустим этот файл с помощью узла и проверим puppeteer-project папку, в которой будет сохранен наш снимок экрана facebook.png.
node index.js
Большой! У вас есть снимок экрана с окном браузера, но вы думаете, что он обрезан? Бьюсь об заклад, вы это сделали. Вы можете установить точку обзора в кукольнике следующим образом:
page.setViewport({width: 2000, height: 2000});
Как насчет создания PDF-файла для той же страницы, ничего страшного. Для его выполнения мы воспользуемся pdf методом браузера. Итак, теперь в index.js вместо использования метода screenshot мы будем использовать метод pdf следующим образом:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://facebook.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'facebook.pdf', format: 'A4'});
await browser.close();
})();
Запустите файл еще раз, чтобы увидеть facebook.pdf внутри нашей папки. Я обнаружил puppeteer при поиске пакетов или инструментов для загрузки контента из Интернета в формате pdf для приложения (Mero Resume), которое мы сделали для хакатона.
Наконец, автоматизация отправки формы. Поскольку мы работаем с facebook.com, давайте попробуем войти в facebook без головы.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const email = '[email protected]'
await page.setViewport({ width: 2000, height: 2000});
await page.goto('https://www.facebook.com', { waitUntil: 'networkidle2' });
await page.type('#email', email)
await page.type('#pass', '*********') // enter your password here
await page.click('input[type="submit"]');
await page.waitForNavigation({ waitUntil: 'domcontentloaded' });
page.screenshot({ path: 'loggedIn.png' });
})();
Проверьте loggedIn.png, чтобы увидеть домашнюю страницу, на которой вы выполнили вход. Таким образом, мы можем автоматизировать отправку любой формы. Я в основном использую это, когда мне нужно часто регистрировать нового пользователя для целей тестирования. Вы можете попробовать это в любых других формах, и если вы хотите увидеть, что происходит под капотом, вы можете запустить кукольник в окне браузера, как показано ниже:
const browser = await puppeteer.launch(({ headless: false }));
Это несколько вещей, которые мы можем делать с Puppeteer: вы можете открывать для себя больше интересных вещей и не забывать, что существует множество других инструментов и фреймворков для автоматизации браузеров, таких как Selenium, который поддерживает браузеры, отличные от Chrome. Попробуйте, если вы еще этого не сделали. :)
