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

※この記事は2019/6/26に更新されました。

Puppeteerでボタンをクリックする方法を解説します。

Puppeteerはブラウザのスクレイピング(自動操作)ができるNode.jsのライブラリです。
Puppeteerについては以下記事を参照ください。
ブラウザ自動操作で楽したいならPuppeteerを使おう - 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を確認する

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

CSSセレクタ

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

上記のようなCSSの場合、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(タグ)」だけだと他のタグと判別することができません。

このような場合でも「a(タグ)」と「Puppeteerでスクレイピング(タグで囲んでいる値)」でクリックすることができます。

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

タグしかない場合

やっていることは「a(タグ)」をループさせて、「タグで囲んでいる値」が指定した文字を含んでいるか判定して、一致した場合にクリックします。

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

aタグでなくてもOKです。

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をクリック

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

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング