如何从下拉列表中选择一个选项

Question

我可以点击选择器,但我的问题是如何从下拉列表中选择一个选项？

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

单击使用CSS选择器的选项不起作用.

例如,从下面的列表中选择国家/地区代码,

Answer 1

Puppeteer v0.13.0有page.select()方法,它就是这样做的.你只需要给它选择值.因此,假设你有一个<option value="my-value">在你的<select>:

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

Answer 2

对于下拉组件,我认为我们应该考虑两种情况:

• 原生HTML select元素
• 由JS编写的组件,由一个按钮和一个选项列表组成,以bootstrap下拉为例

对于第二种情况,我认为click可以解决问题.

对于第一种情况,我只找到了两种方法:

1. page.select
2. elementHandle.type (通知已于27/04/2018更新)

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".

// 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用于在输入文本框中键入文本,但是因为它

聚焦元素,然后为文本中的每个字符发送keydown,keypress/input和keyup事件.

select HTML元素有输入事件,因此该方法有效.

我个人认为elementHandle.type更好,因为不需要知道选项值属性,只需要知道人们可以看到的标签/名称.

27/04/2018更新

我之前elementHandle.type只在Mac OSX 上使用过.最近,我的同事报告了与此相关的错误.他正在使用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);

Answer 3

我从一条消息中登陆这里，其中有人询问如何从下拉列表中选择第一个选项。这就是我刚刚想出的方法：

await page.click('.select-input');
await page.waitFor(300);
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');

上面的代码首先选择相关的输入。然后我设置了等待，因为我的加载速度不够快。然后我使用键盘向下导航到第一个选项。

Answer 4

对于原生选择框,我的解决方案是在页面上执行一些JS:

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

Answer 5

事实证明这比我想象的要容易，因为下拉列表不是原生 HTML 选择和选项组合，因此，我实际上可以使用下面的代码来选择我想要的目标。

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