前回に引き続き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側で対策される問題なのかもしれませんが、当面はこのやり方で代用していこうと思います。
0 件のコメント:
コメントを投稿