Как выбрать параметр из выпадающего меню

Я могу нажать селектор, но мой вопрос - как выбрать один из вариантов из раскрывающегося списка?

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

Щелчок опции с помощью селектора CSS не работает.

Например, выберите код страны из списка, как показано ниже,

Ответ 1

Puppeteer v0.13.0 имеет метод page.select(), который делает именно это. Вам просто нужно дать ему значение для выбора. Итак, предположим, что у вас есть <option value="my-value"> в <select>:

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

Ответ 2

Для собственных наборов выберите мое JS на самой странице:

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

Ответ 3

Для выпадающего компонента, я думаю, мы должны рассмотреть две ситуации:

собственный элемент select HTML
компонент, написанный JS, состоящий из кнопки и списка опций, выберете выпадающее меню bootstrap в качестве примера

Для второй ситуации я думаю, что click может решить проблему.

Для первой ситуации я просто нашел два способа сделать это:

page.select
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);

Ответ 4

Оказалось, это проще, чем то, что я думал, потому что раскрывающийся список НЕ является родной комбинацией смещения и опций HTML, поэтому я могу использовать код ниже, чтобы выбрать цель, которую я хочу.

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