Puppeteerが大好きですThe Headless WebのアイデアでThe Headless WebでThe 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);
}
}
});
楽しい！
Paul Kinlan
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
