web-dev-qa-db-ja.com

ドロップダウン選択からオプションを選択する方法

セレクターをクリックできますが、質問はドロップダウンリストからオプションの1つを選択する方法ですか？

  await page.click('#telCountryInput > option:nth-child(4)')

CSSセレクターを使用するオプションをクリックしても機能しません。

たとえば、以下のようなリストから国コードを選択し、

enter image description here

puppeteer
28
Lorem Ipsum Dolor

Puppeteer v0.13.0には page.select（） メソッドがあり、まさにそれを行います。選択する値を指定するだけです。したがって、<option value="my-value">に<select>があると仮定します。

await page.select('#telCountryInput', 'my-value')

41
zaboco

ドロップダウンコンポーネントについては、2つの状況を考慮する必要があると思います。

  • ネイティブHTML select要素
  • ボタンとオプションのリストで構成されるJSによって記述されたコンポーネントは、例として bootstrap dropdown を取ります

2番目の状況では、clickが問題を解決できると思います。

最初の状況では、これを行う2つの方法を見つけました。

  1. page.select
  2. elementHandle.type （2018年4月27日に更新された通知）

page.selectは、v0.12.0で追加された新機能です。

たとえば、select要素があります：

<label>Choose One:
    <select name="choose1">
        <option value="val1">Value 1</option>
        <option value="val2">Value 2</option>
        <option value="val3">Value 3</option>
    </select>
</label>

2番目のオプション「値2」を選択するには2つの方法があります。

// use page.select
await page.select('select[name="choose1"]', 'val2');

// use elementHandle.type
const selectElem = await page.$('select[name="choose1"]');
await selectElem.type('Value 2');

通常、elementHandle.typeは入力テキストボックスにテキストを入力するために使用されますが、

要素にフォーカスを設定し、テキスト内の各文字に対してキーダウン、キー押下/入力、およびキーアップイベントを送信します。

select HTML要素には入力イベントがあるため、このメソッドは機能します。

そして、個人的にはelementHandle.typeの方が優れていると思います。なぜなら、オプション値の属性を知る必要はなく、ラベル/名前だけを見ることができるからです。

27/04/2018更新

以前にMac OSXでのみelementHandle.typeを使用しました。最近、私の同僚がこれに関連するバグを報告しました。彼はLinux/Winを使用しています。また、私たちは両方ともpuppeteer v1.3.0を使用しています。

試行錯誤の後、このelementHandle.typeが<select>要素に値を割り当てることができることがわかりましたが、これは要素のchangeイベントをトリガーしません。
だから、elementHandle.typeで<select>を使用することはお勧めしません。

最後に、 このコメント に従って、変更イベントを手動でディスパッチしました。次のようなものです。

// use manually trigger change event
await page.evaluate((optionElem, selectElem) => {
    optionElem.selected = true;
    const event = new Event('change', {bubbles: true});
    selectElem.dispatchEvent(event);
}, optionElem, selectElem);
15
bambooom

ネイティブ選択ボックスの場合、私のソリューションはページ自体でいくつかのJSを実行することでした：

await page.evaluate(() => {
  document.querySelector('select option:nth-child(2)').selected = true;
})
7
I.devries

ドロップダウンリストはネイティブのHTML selctionoptionの組み合わせではないため、これは思ったより簡単です。したがって、実際に以下のコードを使用して目的のターゲットを選択できます。

  await page.click('#telCountryInput')
  await page.click('#select2-telCountryInput-results > li:nth-child(4)')
3
Lorem Ipsum Dolor