puppeteer で radio ボタンチェック

概要

puppeteer というスクレイピングツールで radio ボタンをチェックする為の備忘録です。

例題

以下のような radio ボタングループがあるとします。

<input type="radio" name="maker" value="1"> クリスタル映像
<input type="radio" name="maker" value="2"> ポセイドン企画

答え

クリスタル映像 を選びたい場合は、以下のようにします。

page.evaluate でブラウザ内での操作結果を返すようにします。
ブラウザ内なので、 document.querySelector が使えます。
そこで、 `checked = true` しています。

const selectedRadioSelector = `input[type="radio"][value="1"]`
await page.evaluate(
  s => (document.querySelector(s).checked = true),
  selectedRadioSelector
)

失敗例

click 処理は軒並み失敗しました。

`page.WaitFor` すると成功する、という記事を見ましたが、自身の環境 puppeteer (version=1.19.0) では、失敗してしまいました。

• page.click

const selectedRadioSelector = `input[type="radio"][value="1"]`
page.click(selectedRadioSelector)

• radio 要素を捕まえて、click

r = page.$(selectedRadioSelector)
r.click()

• document.querySelector().click()

const selectedRadioSelector = `input[type="radio"][value="1"]`
await page.evaluate(
  s => (document.querySelector(s).click()),
  selectedRadioSelector
)

応用

以下のような radio ボタングループがあるとします。
上のと比べると label タグが追加されてます。

<input type="radio" id="group1" name="maker" value="1"> <label for="group1">クリスタル映像</label>
<input type="radio" id="group2" name="maker" value="2"> <label for="group1">ポセイドン企画</label>

このラベルを正規表現でマッチする方をチェックしてみます。

• "映像" という文字を含む方をチェックする

const regex = "映像"
const regexpLabel = new RegExp(regex, 'g')

const r = await page.$$('input[type="radio"]')

label: for (const i in r) {
  // radio ボタンの id 要素
  const id = await (await r[i].getProperty('id')).jsonValue()
  // radio ボタンの value 要素
  const value = await (await r[i].getProperty('value')).jsonValue()

  // ラベル textContent 取得 ("クリスタル映像", "ポセイドン企画" を取得)
  const label = await page.$(`label[for="${id}"]`)
  const labelContent = await (await label.getProperty(
    'textContent'
  )).jsonValue()


  // ラベルの textContent が "映像" を含む場合、 true
  if (labelContent.match(regexpLabel)) {
    const selectedRadioSelector = `input[type="radio"][value="${value}"]`
    await page.evaluate(
      s => (document.querySelector(s).checked = true),
      selectedRadioSelector
    )
    // radio ボタンにチェック入れたので処理終了
    break label
  }
}

まとめ

非常につまづきやすい点だったので備忘録として残しました。

参考になれば幸いです。

WEB+DB PRESS Vol.109

• 作者: 佐藤歩,加藤賢一,原一成,加藤圭佑,大塚健司,磯部有司,村田賢太,末永恭正,久保田祐史,吉川竜太,牧大輔,ytnobody(わいとん),前田雅央,浜田真成,竹馬光太郎,池田拓司,はまちや2,竹原,原田裕介,西立野翔磨,田中孝明
• 出版社/メーカー: 技術評論社
• 発売日: 2019/02/23
• メディア: 単行本
• この商品を含むブログを見る