Puppeteerの基本的な動かし方

Puppeteerの基本的な動かし方のまとめ記事となります。

PuppeteerはNode.jsのライブラリで定型的なブラウザの操作を自動化できるようになります。

基本的なコードが書けると流用して自分のやりたいことができるようになりますので、最初に知っておきたい項目をまとめてみました。

Puppeteerを利用したいシーン

Puppeteerで利用できるのは決まったブラウザ操作の自動化です。

以下のような使い方ができます。

• 毎日Webサイトの特定のボタンをクリックする
• 毎日Webサイトにログインする（特定の文字入力をする）
• 毎日Webサイトの特定のテキストデータを取得する

「毎日Webサイトの特定のボタンを押す」は以下の動作を実装できれば自動化が実現可能です。

• （Webサイトの）ログイン画面で文字入力する（ユーザ名、パスワードを入力する）
• （Webサイトの）ログインボタンをクリックする
• （特定のボタンがあるWebページまで）画面遷移をする
• （特定のボタンがあるWebページで）ボタンをクリックする

個別の解説、サンプルコードは以下リンクを参照ください。

テキストデータを取得したい場合は以下リンクを参照ください。

Puppeteerの基本的な使い方

Puppeteerで文字入力をする

PuppeteerでWebサイト（HTMLのフォーム）に文字入力をするにはpage.type()を使います。

//「abc」という文字をinputタグに入力
await page.type('input[name="username"]', "abc");
//改行付きの文章をtextareaタグに入力
let bodyText = "１行目の文字を入力します。\n２行目の文字を入力します。\n３行目の文字を入力します。",
await page.type('textarea[name="Body"]', bodyText);

Puppeteerで画面遷移をする

PuppeteerでWebサイトの画面を遷移する場合はpage.goto()を使います。

//静的リンクに画面遷移
await page.goto('https://www.kennejs.com/');

動的リンクで画面遷移をしたい場合は、画面遷移できるボタンのタグを検索して、click()で遷移します。

Puppeteerでボタンをクリックする

PuppeteerでWebサイトのボタンをクリックする場合はpage.click()を使います。

// タグ名（input）と属性（type）を指定してボタンをクリックする
await page.click('input[type="submit"]');

page.click()で一つに指定できるタグや属性がない場合は、タグの値で検索して、click()でボタンをクリックします。

Puppeteerでテキストデータを取得する

Puppeteerでテキストデータを取得する場合は以下の手順となります。

1. page.$()で要素の情報を取得
2. 「.getProperty(‘textContent’)」「.jsonValue()」でテキストデータを取り出す

// spanタグのclass属性timeのタグの値を取得する
let resultSelector = await page.$('span.time');
let value = await (await resultSelector.getProperty('textContent')).jsonValue()

上記で一つに指定できない場合は、配列処理して検索することで目的のデータを取得できます。

取得したデータは自分の使いたいフォーマットで加工して、テキストデータ等に出力することができます。

まとめ

この記事では「Puppeteerを利用したいシーン」および「Puppeteerの基本的な使い方」ごとに概要をまとめました。

詳細なコードは記事内のリンクから取得して活用してください。

おすすめ記事

Puppeteerを自作したらVPSで稼働させてみよう。

外部サーバで稼働させるにはさくらVPSが手軽でおすすめです。