Menu
I can click the selector but my question is how to select one of the options from the dropdown list?
await page.click('#telCountryInput > option:nth-child(4)') Click the option using CSS selector does not work.
For example, select a country code from a list like below:
658
A dropdown is represented by <select> tag and the options are represented by <option> tag. To select an option with its value we have to use the selectByValue method and pass the value attribute of the option that we want to select as a parameter to that method.
To select multiple items, the user has to hold down the shift or ctrl key, then select with the mouse.
The select tag in HTML is used to create a dropdown list of options that can be selected. The option tag contains the value that would be used when selected. The default value of the select element can be set by using the 'selected' attribute on the required option. This is a boolean attribute.
The options property returns the collection of all the option elements in the <select> dropdown list. The elements are sorted according to the source code of the page. The index found before it can be used with this property to get the selected element. This option’s value can be found by using the value property.
To select multiple items, the user has to hold down the shift or ctrl key, then select with the mouse. That’s not all you can do with the select and <option> tags. You can also make a multi-layer select box with the <optgroup> element inside a <select> tag. You can convert the already made dropdown to a multi-layer select box like this:
This index starts from 0 and returns -1 if no option is selected. The options property returns the collection of all the option elements in the <select> dropdown list. The elements are sorted according to the source code of the page. The index found before it can be used with this property to get the selected element.
for modern versions of jquery you should use the .prop () instead of .attr () HTML select elements have a selectedIndex property that can be written to in order to select a particular option: 'select' would be the id of your select or a class selector. or if there is just one select, you can use the tag as it is in the example.
Puppeteer v0.13.0 has page.select() method, which does exactly that. You just have to give it the value to select. So, assuming you have an <option value="my-value"> in your <select>:
await page.select('#telCountryInput', 'my-value')
103
For dropdown component, I think we should consider 2 situations:
select elementFor the second situation, I think click can solve the problem.
For the first situation, I just found 2 ways to do this:
page.selectelementHandle.type (notice updated on 27/04/2018)page.select is a new feature added in v0.12.0.
For example you have a select element:
<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> You have two ways to select second option 'Value 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'); Normally elementHandle.type is used to type in text in input textbox, but since it
Focuses the element, and then sends a keydown, keypress/input, and keyup event for each character in the text.
select HTML element has input event, so that this method works.
And I personally think elementHandle.type is better since it's not required to know the option value attribute, only the label/name what man can see.
I previously used elementHandle.type only on Mac OSX. Recently, my colleague reported a bug related to this. He is using Linux/Win. Also, we are both using puppeteer v1.3.0.
After trial and error, we found that this elementHandle.type can assign the value to the <select> element, but this won't trigger the change event of the element.
So I no longer recommend using elementHandle.type on <select>.
Finally, we followed this comment to dispatch change event manually. It's like:
// 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); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
