«Какой заголовок был вчера на сайте cnn.com?»

Эта статья является первой частью серии «Сохранение скриншотов веб-сайтов с помощью Puppeteer, Cloudinary и Heroku». Я расскажу об использовании Puppeteer для локального создания снимков экрана веб-сайтов с помощью Puppeteer. Если вы уже знаете, как использовать Puppeteer, вы можете перейти к

Часть 2: в которой рассказывается о Cloundiary или

Часть 3: рассказывается о настройке Puppeteer и Cloundinary на Heroku.

Мой партнер работает в финансовой сфере и однажды он спросил меня:

Г-н А: «У нас есть газетный архив для бумажной газеты. Но сегодня
новости поступают с веб-сайтов линейки cnn.com, как они архивируются?»

Я как технарь сразу подумал об API. Есть много хороших поставщиков кормов. Однако это ему не подходит, так как он смотрит и на азиатские рынки. И у поставщиков API часто есть только новости для США или новости с точки зрения США для других рынков. Ему нужны были снимки нескольких новостных сайтов, которые должны запускаться в определенное время каждый день. Я не мог найти хороший API с доступным бюджетом. Тогда я закатал рукава.

Я записал карандашом то, что нужно, и эта серия статей будет состоять из 3 частей:

  1. Снимок сайтов
  2. Сохраняйте снимки как изображения в облаке
  3. График работы каждый день

Делайте снимки экрана сайтов с помощью Puppeteer

Я работал с PhantomJSи Seleniumраньше и знаю, что они умеют правильно делать моментальные снимки. Сравнивая немного PhantomJS и Puppeteer, Puppeteer для меня является лучшим кандидатом, поскольку он находится в экосистеме Node.js. Меня также привлекает простота применения большого количества вариантов запуска безголового браузера Chrome. Дополнительную информацию о puppeteer можно найти в репозитории git: https://github.com/GoogleChrome/puppeteer.

📝Как сделать снимок с помощью Puppeteer с помощью Node.js

1. Создайте папку со следующей структурой файлов:

--MyNewsShotProject\
  |--pacakge.json
  |--snapshot.js

2. Инициализировать проект

$ yarn init (or npm init)

3. Добавьте start script для запуска моментального снимка в package.json:

"scripts": {
   "start": "node snapshot.js"
}

4. Установите кукловод:

$ yarn add puppeteer

5. Установите node_modules:

$ yarn install (or npm install)

4. Затем в snapshot.js мы добавляем функцию doScreenCapture, чтобы сделать снимок экрана одного сайта и локально сохранить снимок экрана в файл png:

// snapshot.js
const puppeteer = require('puppeteer');
async function doScreenCapture(url, site_name) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({
    fullPage: true,
    path:`${site_name}.png`
  });
  await browser.close();
}

Вызовы метода puppeteer прекрасно объясняют сами себя:

  • puppeteer.launch: для запуска браузера.
  • browser.newPage: для создания новой страницы в браузере.
  • page.goto: чтобы открыть URL-адрес сайта.
  • page.screenshot: сделайте скриншот сайта и сохраните изображение по пути локально. Здесь я указываю, что хочу полную длину страницы, также доступны другие параметры, такие как указание ширины, высоты, x-позиции, y-позиции.
  • browser.close: закрыть браузер.

5. Завершите snapshot.js для вызова doScreenCapture для нескольких сайтов:

const puppeteer = require('puppeteer');
async function doScreenCapture(url, site_name) {
  // shown in previous step
}
const news_sites = [
  {
    name: 'reuters',
    url: 'https://www.reuters.com/'
  }, {
    name: 'reuters_china',
    url: 'https://cn.reuters.com/'
  }, {
    name: 'reuters_japan',
    url: 'https://jp.reuters.com/'
  }, {
    name: 'reuters_germany',
    url: 'https://de.reuters.com/'
  }, {
    name: 'reuters_ara',
    url: 'https://ara.reuters.com/'
  }
];
for (var i = 0; i < news_sites.length; i++) {
  doScreenCapture(news_sites[i]['url'], news_sites[i]['name']);
}

6. Запустите программу.

$ yarn start (or npm start)

7. В результате должны получиться png-файлы с именами news_sites.

--MyNewsShotProject\
  |--node_modules\
  |--package.json
  |--snapshot.js
  |--reuters.png        
  |--reuters_ara.png    
  |--reuters_china.png  
  |--reuters_germany.png
  |--reuters_japan.png

Теперь мы можем делать скриншоты сайтов и сохранять изображения локально. Далее я расскажу, как сохранить его в Cloudinary.

Исходный код этой части (1/3) можно найти на моем github. https://github.com/viviancpy/MyNewsShotProject/tree/part1-кукольник-только

Или вы можете искать по:

имя пользователя github: viviancpy
репозиторий: MyNewsShotProject
ветка: part1-puppeteer-only