Puppeteerのセットアップと基本操作

2024年1月30日

はじめに

今回はじめてPuppeteer APIをつかってスクレイピングをおこなったのでその記録を書きたいと思います。

Puppeteerとは

PuppeteerはGoogleが開発した、Node.js製のヘッドレスブラウザ操作用のAPIです。Puppeteerを使うことで、JavaScriptを使ってWebページを操作することができます。Puppeteerの特徴としては、自動テストやWebスクレイピングに最適な点が挙げられます。また、スクレイピングを行う際にはChrome DevTools Protocolを使用することができるため、高度なエラーハンドリングやデバッグが可能です。Puppeteerは簡単なコマンドで起動できるため、初心者から上級者まで幅広く使われています。

セットアップ

Node.jsをインストールする

Puppeteerは、Node.jsで実行することができるWebスクレイピングライブラリです。そのため、Puppeteerを利用するには、まずNode.jsをインストールする必要があります。

次に、Puppeteerをインストールします。以下のコマンドでインストールします。

$ npm i puppeteer

基本操作

ベース

test.js

const puppeteer = require('puppeteer');

(async() => {
　　　// Puppeteerの起動
    const browser = await puppeteer.launch();

　　// 新しい空のページを開く
    const page = await browser.newPage();

    // ページ移動 
    await page.goto('//操作するページのアドレス'); 

    // ここにページ内の操作を書く

　　// ブラウザの終了
    browser.close();
})();

この中に操作を追加していきます。

ページの移動

await page.goto('https://example.com');

// オプションを指定する場合
await page.goto('https://example.com', { waitUntil: 'domcontentloaded'});

page.goto()でページの移動ができます。

オプションの { waitUntil }では、読み込み完了のタイミングを指定できます。

domcontentloadedを指定すると、DOMContentLoaded発火後に次の操作を実行させることできます。他にも

networkidle0: 500ms以内にネットワーク接続がなくなった時
networkidle2: 500ms以内のネットワーク接続が2つ以下になった場合

といったオプションが存在します。

クリックする

page.click('CSSセレクタ');

指定したセレクタをクリックします。
clickして移動した先のページで操作する場合は、await page.waitForNavigation({ waitUntil: "domcontentloaded"});をセットで書いておきます。そうすれば遷移先のページを読み込んだ後に、その後の処理を実行してくれます。

入力する

page.type('CSSセレクタ', 'hoge');

指定した要素にhogeと入力します。

テキスト取得

const text = await page.$eval('.test', text => text.textContent)

<div class="test">text</div>の中の'text'の部分を取得できます。

URL取得

//aタグのリンク取得
const href = await page.$eval('CSSセレクタ', a => a.href);

//imgタグのsrc取得
const src = await page.$eval('CSSセレクタ', img => img.src);

スクショやPDF取得

await page.screenshot({path: 'screenshot.png'}); 

await page.pdf({path: 'page.pdf'});

指定した要素が存在するかの処理

const exists = await page.$('CSSセレクタ').then(res => !!res);

if(exists){
// 要素がある場合の処理
}else{
// 要素がない場合の処理
}

要素の有無で処理を分ける場合など

データをファイルに出力する

const fs = require('fs');

 // JSONで出力する
fs.writeFile('data/data.json', JSON.stringify(data),(err) => {
        if (err) throw err;
       console.log('done');
    });

// csvで出力する
fs.writeFile('data/data.csv', csv, (err) => {
    if (err) throw err;
    console.log('file saved');
  });

最初にconst fs = require('fs');を定義してください。

おわり

以上がPuppeteerのセットアップと基本の機能になります。

はじめてスクレイピングをしてみましたが結構簡単にjsonに書きだすことができました。

もっと知りたい方は公式ドキュメントをご覧ください。Puppeteer API

ブログ

BLOG