Puppeteer Go

Puppeteerが大好きですThe Headless WebのアイデアでThe Headless WebThe Headless Web -目に見えるブラウザーのないブラウザーでWebを実行し、さらにDOM-curl (JavaScriptを実行するCurl)のようなツールを作成します。具体的には、ページをスクレイピング、操作、および対話するためのブラウザのスクリプト作成が大好きです。

私が作りたかったデモの1つは、IreのCapturing 422 live images投稿に触発され、そこで彼女は多くのページにナビゲートしてスクリーンショットを撮る操り人形スクリプトを実行しました。多くのページに行く代わりに、ページ上の要素のスクリーンショットをたくさん撮りたかった。

私がPuppeteerで抱えている問題は、あなたが何でもする必要がある最初のスタンザです。起動、タブを開く、ナビゲート-複雑ではなく、単純なスクリプト用に作成するよりも定型的なだけです。それがPuppeteer Goを作成したPuppeteer Goです。これは、ブラウザを開いてページにナビゲートし、_your_アクションを実行し、その後自動的にクリーンアップするCLIユーティリティを簡単に作成するのに役立つ小さなスクリプトです。

見てみな。

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