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

本記事の内容

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

Puppeteerを使ってみたけど、上手くボタンクリックできないよ。

2パターンの方法があるから試してみて。

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

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

Contents

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

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

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

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

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

マウスカーソルのボタンをクリックして、選択したいボタンをクリックします。
ボタンの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">

上記のように１ページで同一のタグが出てきた場合、一意に特定できる属性（この例では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();

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