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

ボタンクリック Node.js

Puppeteerはブラウザのスクレイピング(自動操作)ができるNode.jsのライブラリです。
Node.jsを利用していてブラウザ操作に興味がある人にオススメです。

この記事ではボタンをクリックする方法をパターン別に解説します。

慣れていない方も理解しやすいようにコードの解説、コピペ用のサンプルコードもつけています。

ボタンをクリックするときの書き方

コーディング

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

f:id:aonion2:20190205012425p:plain
f:id:aonion2:20190205012450p:plain

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

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

マウスカーソルのボタンをクリックして、選択したいボタンをクリックします。

ボタンのHTML情報が画面右側のデベロッパーツールでハイライトされます。

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

タグ名と属性を指定してボタンをクリックする

<input type="submit" value="ログイン" class="button">

通常使用される上記のようなinputタグ構成のHTMLの場合、page.click()でボタンをクリックする動作をさせることができます。

typeやclassが存在する場合は以下のように記載できます。

// 1. タグ名(input)と属性(type)
await page.click('input[type="submit"]');
// 2. タグ名(input)と属性(class)
await page.click('input[class="button"]');
// 3. タグ名(input)と属性(class)
await page.click('input.button');

上記はどれも同じように処理できます。

HTMLタグに記載されているCSSセレクタに応じて使い分けましょう。

以下のようにボタンを定義して、clickすることもできます。
clickの後ろには()が必須ですので忘れないようにしましょう。

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

HTMLタグに属性がない場合にボタンやリンクをクリックする

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

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

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

例えば、あるWebサイトで<a>Puppeteerでスクレイピング</a>がリンクになっているときに、「a」(タグ)と「Puppeteerでスクレイピング」(タグ内の文字列)でクリックすることができます。

例えば下の写真のようにこのブログのカテゴリから「PuppeteerでWebスクレイピング (6)」のリンクをクリックしてみます。

タグしかない場合

やっていることは「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();

ざっくり説明しますと、以下のことをやっています。

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

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

まとめ

・通常のinputタグであればpage.click()でボタンクリックができる
・通常のボタンではない場合でも、タグ内の文字列を判定してボタンクリックができる

オススメ記事

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

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

コメント

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