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

Puppeteer - это библиотека Node, которая предоставляет высокоуровневый API для управления Chrome или Chromium через DevTools Protocol. Puppeteer по умолчанию работает без головы, но может быть настроен для запуска полного (без использования головы) Chrome или Chromium.
Большинство вещей, которые вы можете делать вручную в своем браузере, можно сделать с помощью Puppeteer. Примеры включают создание снимков экрана и PDF-файлов страниц, автоматизацию отправки форм, тестирование пользовательского интерфейса, очистку веб-страниц и т. Д.

Безголовый против безголового режима

Безголовый режим - это когда вы запускаете тест браузера на основе пользовательского интерфейса без отображения пользовательского интерфейса браузера. Кукловод по умолчанию работает без головы. Чтобы запустить режим без головы, то есть отображать пользовательский интерфейс браузера при запуске Puppeteer, установите для headless значение false.

{headless: false}

Мы собираемся использовать Puppeteer, чтобы сделать следующее:

  1. Перейти на google.com
  2. Поиск по ключевому слову
  3. Открыть первый результат поиска
  4. Сделайте снимок экрана всей страницы

Приступим…

Во-первых, поскольку Puppeteer - это библиотека Node, вам необходимо установить Node на ваш компьютер.

Установить кукольник

npm install puppeteer

Импортировать кукловод

const puppeteer = require('puppeteer');

Создает новый экземпляр Chromium и запускает его.

// run in a non-headless mode
const browser = await puppeteer.launch({     
headless: false,
// slows down Puppeteer operations
slowMo: 100,
// open dev tools 
devtools: true
});

Создать новую страницу

const page = await browser.newPage();

Установите область просмотра страницы

await page.setViewport({ width: 1199, height: 900 });

Перейдите на www.google.com

const link = 'https://www.google.com';
await page.goto(link);

Щелкните внутри поля ввода поиска, введите ключевое слово, которое мы хотим найти, и нажмите клавишу ввода на нашей клавиатуре.

Вы можете установить расширение Chrome Puppeteer recorder, чтобы легко получать HTML-селекторы вместо того, чтобы получать их вручную.

// wait for input field selector to render
await page.waitForSelector('div form div:nth-child(2) input');
await page.click('div form div:nth-child(2) input');
// type JavaScript in the search box
await page.keyboard.type('JavaScript');
// press enter on your keyboard
await page.keyboard.press('Enter');
 
await page.waitFor(3000);

Получить URL-адрес первого результата поиска

await page.waitForSelector(
'#main > div #center_col #search > div > div > div'
);
// get href from the selector
const getHref = (page, selector) =>
page.evaluate(
selector => document.querySelector(selector).getAttribute('href'),
selector
);
const url = await getHref(
page,
`#main > div #center_col #search > div > div > div a`
);

Перейдите по URL-адресу первого результата поиска и подождите, пока исходный HTML-документ не будет полностью загружен и проанализирован.

await page.goto(url, { waitUntil: 'domcontentloaded' });

Сделайте снимок экрана всего страницы и сохраните его в текущем каталоге.

await page.screenshot({
fullPage: true,
path: 'new_image.png'
});

Консоль регистрирует URL-адрес и расположение снимка экрана

const screenshotPath = process.cwd() + '/new_image.png';
console.log('URL of the page:', url);
console.log('Location of the screenshot:', screenshotPath);

Закройте страницу и браузер

await page.close();
await browser.close();

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

Чтобы узнать больше о Puppeteer, проверьте официальную документацию Puppeteer https://github.com/puppeteer/puppeteer

Удачи на слом !!!