Puppeteerの基本的な動かし方

※このページは2019/8/13に作成されました。

こんにちは、ケネです。

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

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

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

  • まとめ
  • スポンサーリンク

    Puppeteerを利用したいシーン

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

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

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

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

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

    個別の解説、サンプルコードは以下リンクを参照ください。
    【Node.js】Puppeteerで文字入力する(ログインする方法も) – Node.jsで暗号資産アービトラージ

    【Node.js】Puppeteerで画面遷移する(リンクをクリックする) – Node.jsで暗号資産アービトラージ

    Puppeteerでボタンをクリックする – Node.jsで暗号資産アービトラージ

    テキストデータを取得したい場合は以下リンクを参照ください。
    Puppeteerでテキストデータを取得する(スクレイピング) – Node.jsで暗号資産アービトラージ

    Puppeteerの基本的な使い方

    Puppeteerで文字入力をする

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

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

    【Node.js】Puppeteerで文字入力する(ログインする方法も) – Node.jsで暗号資産アービトラージ

    Puppeteerで画面遷移をする

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

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

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

    【Node.js】Puppeteerで画面遷移する(リンクをクリックする) – Node.jsで暗号資産アービトラージ

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

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

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

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

    Puppeteerでボタンをクリックする – Node.jsで暗号資産アービトラージ

    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でテキストデータを取得する(スクレイピング) – Node.jsで暗号資産アービトラージ

    まとめ

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

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

    コメント

    1. […] […]

    タイトルとURLをコピーしました