puppeteerとは
- プログラムから API で Chromeブラウザ を制御できる Node.jsライブラリ。
- ブラウザ制御にはコマンドラインAPI といった開発者モードで使用できる API をそのまま使用できる。
事前準備(puppeteerインストール)
※Node.jsはインストール済みとする。
npm init
npm install puppeteer
コード
test.js
-
puppeteerでGoogle検索を行い、検索結果の1番上のページにアクセスし、スクリーンショットを取得する。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
// Googleページを開く
await page.goto('https://www.google.com/');
// 検索boxに`puppeteer`を入力
await page.type('input[name="q"]', 'puppeteer');
// 「Enter」ボタン押下
await page.keyboard.press('Enter');
// 検索結果要素の表示まで待機
await page.waitForSelector(".LC20lb", {visible: true});
// 検索結果のタイトル・リンク一覧取得
const searchResults = await page.evaluate(() =>
[...document.querySelectorAll(".LC20lb")].map(e => ({
title: e.innerText,
link: e.parentNode.href
}))
);
console.log(searchResults);
// 検索結果のページ1番目をクリック
await page.click(".LC20lb");
// スクリーンショットを取得
await page.screenshot({ path: 'screenshot.png'});
await browser.close();
})();
動作確認
node test.js
[
{
title: 'puppeteer/puppeteer: Headless Chrome Node.js API - GitHub',
link: 'https://github.com/puppeteer/puppeteer'
},
{
title: 'puppeteerで始めるブラウザ操作の自動化 - 株式会社クレスコ',
link: 'https://www.cresco.co.jp/blog/entry/15215/'
},
{
title: 'ヘッドレス Chrome Node API 「Puppeteer」 - Qiita',
link: 'https://qiita.com/bezeklik/items/c6448d50ff0efb45829e'
},
{
title: 'Node.jsでPuppeteerを使いChromeを実行して画面キャプチャ ...',
link: 'https://www.4peace.co.jp/tech/456/'
},
{
title: 'Puppeteer | Tools for Web Developers | Google Developers',
link: 'https://developers.google.com/web/tools/puppeteer'
},
{
title: 'Puppeteer の概要 - Microsoft Edge (Chromium)',
link: 'https://docs.microsoft.com/ja-jp/microsoft-edge/puppeteer/'
},
{
title: 'Puppeteerでできることまとめ - GMOアドパートナーズ ...',
link: 'https://techblog.gmo-ap.jp/2018/12/28/puppeteer%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8%E3%81%BE%E3%81%A8%E3%82%81/'
},
{
title: 'Puppeteerを使用したHeadless Chromeの操作 - ZOZO TECH ...',
link: 'https://techblog.zozo.com/entry/puppeteer'
},
{
title: 'puppeteer を使用する - Jest',
link: 'https://jestjs.io/ja/docs/puppeteer'
},
{
title: '「Puppeteer」とは？ マウスやキーボードなしでブラウザ操作 ...',
link: 'https://www.sbbit.jp/article/cont1/34562'
}
]
※ブラウザ操作が行われ、screenshot.pngがテストコードと同一フォルダに保存される。
※ヘッドレスモードで実行したい場合、以下のように変更する。
const browser = await puppeteer.launch({ headless: true });