2021.05.10ケネ【サンプルあり】Puppeteerでボタンをクリックする方法ツイートシェアはてブ送るPocket※当サイトはアフィリエイト広告を利用しています本記事の内容Puppeteerはブラウザのスクレイピング(自動操作)ができるNode.jsのライブラリです。この記事ではNode.jsでスクレイピングを始めたい方向けに、Puppeteerを利用したボタンクリックの方法を解説します。Puppeteerを使ってみたけど、上手くボタンクリックできないよ。2パターンの方法があるから試してみて。この記事ではPuppeteerでボタンをクリックする方法をHTMLのパターン別に解説します。慣れていない方も理解しやすいようにコードの解説、コピペ用のサンプルコードもつけています。Puppeteerでの文字入力や画面遷移の方法はPuppeteerの基本的な動かし方でも解説しています。Puppeteerでボタンをクリックする方法のまとめPuppeteerでボタンをクリックする書き方(事前準備)デベロッパーツールでボタンのHTMLタグを確認する上の画像の『submit』ボタンのように、inputタグでtype属性が付いているボタンはpuppeteerのpage.click()で押すことができます。CSSを確認しましょう。ブラウザがChromeの場合はデベロッパーツールでCSSを確認できます。デベロッパーツールはWindowsはキーボードの『F12』、Macは『Command+option+i』で起動します。マウスカーソルのボタンをクリックして、選択したいボタンをクリックします。ボタンのHTML情報が画面右側のデベロッパーツールでハイライトされます。PuppeteerではHTMLタグを確認しながらコーディングしていくことになるので、覚えておくと便利ですよ。属性がある場合のクリック方法クリックしたいinputタグやaタグが属性を持っており、ページ内で一意に特定できる場合、page.click()でボタンをクリックする動作をさせることができます。typeやclassを指定して以下のように記載できます。page.click('input.button');上記は実行される内容は同じです。実際に使う際は、WebサイトによってHTMLタグに記載されている内容が変わっていたりするので、スクレイピングしたいサイトに応じて使い分けましょう。以下のようにボタンを定義して、clickする書き方もできます。clickの後ろには()が必須ですので忘れないようにしましょう。実行される内容は上記のサンプルと同じです。上記でクリックするコードの書き方を解説しましたが、注意点があります。class="button">上記のように1ページで同一のタグが出てきた場合、一意に特定できる属性(この例ではvalue)を指定しないと最初に出てきたボタンがクリックされます。このような場合は、以下のように一意に特定できる属性を指定します。page.click('input[value="ログイン"]');HTMLの情報量が足りずに、一意に指定できない場合は、以下の【HTMLタグに属性がない場合】ボタンをクリックする方法を参照ください。先ほどはHTMLのタグや属性を指定してボタンをクリックしましたが、たまにタグ(aタグやfontタグ)しか情報として使用できないボタンが存在します。そのような場合は「タグ」とタグ内の「文字列」を利用してクリックすることができます。(6)」のリンクをクリックしてみます。「a」(タグ)と「Puppeteerでスクレイピング」(タグ内の文字列)だけでもクリックできます。「a」(タグ)をループで一つ一つ確認して、指定した文字を含んでいた場合にクリックします。page.$$(‘a’);」の’a’の部分をタグ名、/PuppeteerでWebスクレイピング/の部分を「タグで囲んでいる値」に置き換えてください。aタグ以外のタグでも対応可能です。}}aTagAll[indicator].click();上記のコードでは以下のことをやっています。ページ内の全aタグの情報をaTagAllに格納aTagAllをループさせて「タグで囲んでいる値」をテキスト形式でtagText(配列)に格納していくtagTextで特定文字を含んでいたら、タグの位置をindicatorに設定(どのaタグをクリックすればよいかわかる)indicatorを使ってaTagAllをクリック上記の方法でボタンクリックは概ね達成できますので、是非試してみてください。Puppeteerでボタンをクリックする方法のまとめボタンのクリックは以下のいづれかで対応できます。結論inputタグであればpage.click()でボタンクリックができるinputタグでない場合でも、タグ内の文字列を判定してボタンクリックができるぜひ試してみてくださいね。Puppeteerで作ったアプリケーションは外部サーバで稼働させると24時間対応できるようになります。Puppeteerは必要なメモリ量が多いので、コストあたりのメモリ量が多いVPSがコスパよく使えます。詳細は初心者向けのVPSの選び方も参照ください。Node.jsのチュートリアルは動画学習が早く習得できます。私が利用しているのはUdemyです。Node.jsの勉強法も参照ください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。USケネはじめまして、ケネです。Node.jsの技術情報を書いています。一人でも多くの方と「自分でもできた」感覚を共有したいので、なるべくわかりやすく、実体験ベースでのブログを心がけています。技術で自分の世界を広げましょう。不明点や質問があればお気軽にコメントください。