【サンプルあり】Puppeteerでボタンをクリックする方法

ボタンクリック
本記事の内容
Puppeteerはブラウザのスクレイピング(自動操作)ができるNode.jsのライブラリです。
この記事ではNode.jsでスクレイピングを始めたい方向けに、Puppeteerを利用したボタンクリックの方法を解説します。

Puppeteerを使ってみたけど、上手くボタンクリックできないよ。
2パターンの方法があるから試してみて。

この記事ではPuppeteerでボタンをクリックする方法をHTMLのパターン別に解説します。
慣れていない方も理解しやすいようにコードの解説、コピペ用のサンプルコードもつけています。

Puppeteerでの文字入力や画面遷移の方法はPuppeteerの基本的な動かし方でも解説しています。

Puppeteerでボタンをクリックする書き方

(事前準備)デベロッパーツールでボタンのHTMLタグを確認する

Inputタグサンプル HTMLタグサンプル

上の画像の『submit』ボタンのように、inputタグでtype属性が付いているボタンはpuppeteerのpage.click()で押すことができます。

まずはCSSを確認しましょう。ブラウザがChromeの場合はデベロッパーツールでCSSを確認できます。
デベロッパーツールはWindowsはキーボードの『F12』、Macは『Command+option+i』で起動します。

マウスカーソルのボタンをクリックして、選択したいボタンをクリックします。
ボタンのHTML情報が画面右側のデベロッパーツールでハイライトされます。

デベロッパーツールでボタンのHTMLを確認する

PuppeteerではHTMLタグを確認しながらコーディングしていくことになるので、覚えておくと便利ですよ。

【HTMLタグに属性がある場合】ボタンをクリックする方法

属性がある場合のクリック方法

クリックしたいinputタグやaタグが属性を持っており、ページ内で一意に特定できる場合、page.click()でボタンをクリックする動作をさせることができます。

typeやclassを指定して以下のように記載できます。

クリックしたいボタンのHTML
<input type="submit" value="ログイン" class="button">
Puppeteerのコードサンプル
// 1. タグ名(input)と属性(type)
await page.click('input[type="submit"]');
// 2. タグ名(input)と属性(value) await page.click('input[value="ログイン"]');
// 3. タグ名(input)と属性(class)(2通りあり) await page.click('input[class="button"]'); // または await page.click('input.button');

上記は実行される内容は同じです。
実際に使う際は、WebサイトによってHTMLタグに記載されている内容が変わっていたりするので、スクレイピングしたいサイトに応じて使い分けましょう。

また、以下のようにボタンを定義して、clickする書き方もできます。
clickの後ろには()が必須ですので忘れないようにしましょう。実行される内容は上記のサンプルと同じです。

const loginButton = await page.$('input.button');
await loginButton.click();

属性がある場合のクリック方法の注意点

上記でクリックするコードの書き方を解説しましたが、注意点があります。

<input type="submit" value="ログイン" class="button">
<input type="submit" value="パスワード変更" class="button">

上記のように1ページで同一のタグが出てきた場合、一意に特定できる属性(この例ではvalue)を指定しないと最初に出てきたボタンがクリックされます。
このような場合は、以下のように一意に特定できる属性を指定します。

await page.click('input[value="ログイン"]');
HTMLの情報量が足りずに、一意に指定できない場合は、以下の【HTMLタグに属性がない場合】ボタンをクリックする方法を参照ください。

【HTMLタグに属性がない場合】ボタンをクリックする方法

タグしかないボタンをクリックする方法

先ほどはHTMLのタグや属性を指定してボタンをクリックしましたが、たまにタグ(aタグやfontタグ)しか情報として使用できないボタンが存在します。

そのような場合は「タグ」とタグ内の「文字列」を利用してクリックすることができます。

例えば下の写真のようにこのブログのカテゴリから「PuppeteerでWebスクレイピング (6)」のリンクをクリックしてみます。
「a」(タグ)と「Puppeteerでスクレイピング」(タグ内の文字列)だけでもクリックできます。

タグしかない場合

「a」(タグ)をループで一つ一つ確認して、指定した文字を含んでいた場合にクリックします。

タグしかないボタンをクリックするサンプルコード

以下をコピペして、「const aTagAll = await page.$$(‘a’);」の’a’の部分をタグ名、/PuppeteerでWebスクレイピング/の部分を「タグで囲んでいる値」に置き換えてください。

aタグ以外のタグでも対応可能です。

const aTagAll = await page.$('a');
let tagText = [];
let indicator = "";
for (let i = 0; i < aTagAll.length; i++) {
    tagText.push(await (await aTagAll[i].getProperty('textContent')).jsonValue())
    if(tagText[i].match(/PuppeteerでWebスクレイピング/)){
        indicator = i;
        break;
    }
}
aTagAll[indicator].click();

上記のコードでは以下のことをやっています。

  1. ページ内の全aタグの情報をaTagAllに格納
  2. aTagAllをループさせて「タグで囲んでいる値」をテキスト形式でtagText(配列)に格納していく
  3. tagTextで特定文字を含んでいたら、タグの位置をindicatorに設定(どのaタグをクリックすればよいかわかる)
  4. indicatorを使ってaTagAllをクリック

上記の方法でボタンクリックは概ね達成できますので、是非試してみてください。

Puppeteerでボタンをクリックする方法のまとめ

ボタンのクリックは以下のいづれかで対応できます。
結論
  • inputタグであればpage.click()でボタンクリックができる
  • inputタグでない場合でも、タグ内の文字列を判定してボタンクリックができる

ぜひ試してみてくださいね。


Puppeteerで作ったアプリケーションは外部サーバで稼働させると24時間対応できるようになります。
Puppeteerは必要なメモリ量が多いので、コストあたりのメモリ量が多いVPSがコスパよく使えます。詳細は初心者向けのVPSの選び方も参照ください。

IT特化の転職支援サービス

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUT US

ケネ
はじめまして、ケネです。

Node.jsの技術情報を書いています。

一人でも多くの方と「自分でもできた」感覚を共有したいので、なるべくわかりやすく、実体験ベースでのブログを心がけています。
技術で自分の世界を広げましょう。

不明点や質問があればお気軽にコメントください。