Puppeteerでラジオボタンにpage.click()メソッドが効かないときの対処方法

2020年7月26日日曜日

Node.js Puppeteer

t f B! P L


前回に引き続きPuppeteerで見つかった問題とその解決策です。

page.click()が効かないラジオボタンがある

ラジオボタン(<input type="radio">)をpage.click()で選択しようとするとたまに失敗する部品が出てきたりします。
同じラジオボタンなのに何故…?と思っていたのですが、どうやらonclick属性の無いラジオボタンは上手く選択できないようです。

<!-- これだとpage.click()が効く -->
<input value="0" name="sample" type="radio" onclick="sample_method()">

<!-- これだとpage.click()が効かない -->
<input value="1" name="sample" type="radio">


解決策

document.querySelectorを使ってラジオボタンを選択する方法もあるみたいですが、自分の環境ではうまくいきませんでした。
仕方ないのでPuppeteerの他のAPIで何とかならないか試行錯誤したところ、page.focus() メソッドと page.keyboard.press() メソッドの組み合わせで代用できることが分かりました。

const puppeter = require('puppeteer');

(async () => {

    // Webブラウザを起動
    const browser = await puppeter.launch({
        headless: false,
        slowMo: 0
    });

    // 対象のページへ遷移(URLは仮の値)
    const page = await browser.newPage();
    await page.goto('http://xxxx.xxxx.jp');

    // 任意のラジオボタンにフォーカスを当てる(これが基準点となる)
    await page.focus('input[type="radio"][value="0"]');
    await page.waitFor(100);

    // 基準点から上下左右キーで目的のラジオボタンまで選択箇所を移動させる
    await page.keyboard.press('ArrowRight');
    await page.waitFor(100);

})();

page.focus()で任意の項目にフォーカスを当てて、その後 page.keyboard.press() でキーボードの上下左右キーを押下して目的のラジオボタンへ移動/選択するようにしています。(page.focus()だけでは選択扱いになりませんでした)
ちなみに上下左右キーはそれぞれ以下のパラメータで押下できます。
  • 上キー:page.keyboard.press('ArrowUp')
  • 下キー:page.keyboard.press('ArrowDown')
  • 左キー:page.keyboard.press('ArrowLeft')
  • 右キー:page.keyboard.press('ArrowRight')

いずれはPuppeteer側で対策される問題なのかもしれませんが、当面はこのやり方で代用していこうと思います。

自己紹介

SESから工場へ転職 ⇒ その後SESへ出戻った底辺客先常駐エンジニアです。 主に組み込み、オープン系の現場で詳細設計~実装を担当しています。 使用言語:C/C++/C#/Java/JavaScript (Node.js)/Python etc..

QooQ