Puppeteer Go

Я люблю Puppeteer - он позволяет мне поиграть с идеями The Headless Web - который работает в Интернете в браузере без видимого браузера и даже создает инструменты, такие как DOM-curl (Curl, который запускает JavaScript). В частности, я люблю писать скрипты в браузере, чтобы очищать страницы, манипулировать ими и взаимодействовать с ними.

Одна демонстрация, которую я хотел сделать, была вдохновлена Capturing 422 live images где она запустила сценарий кукловода, который переместился на многие страницы и сделал снимок экрана. Вместо того, чтобы переходить на много страниц, я хотел сделать много скриншотов элементов на странице.

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

Проверьте это.

const { go } = require('puppeteer-go');

go('https://paul.kinlan.me', async (page) => {
    const elements = await page.$$("h1");
    let count = 0;
    for(let element of elements) {
      try {
        await element.screenshot({ path: `${count++}.png`});
      } catch (err) {
        console.log(count, err);
      }
    }
});

Приведенный выше код найдет элемент h1 в моем блоге и сделает снимок экрана. Это далеко не так хорошо, как работа Ire, но я подумал, что было бы неплохо посмотреть, сможем ли мы быстро получить скриншоты с canisuse.com прямо со страницы.

const { go } = require('puppeteer-go');

go('https://caniuse.com/#search=css', async (page) => {
    const elements = await page.$$("article.feature-block.feature-block--feature");
    let count = 0;
    for(let element of elements) {
      try {
        await element.screenshot({ path: `${count++}.png`});
      } catch (err) {
        console.log(count, err);
      }
    }
});
4.png
3.png
2.png
1.png
0.png

Наслаждайтесь!

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium