How to select an option from dropdown select
PuppeteerPuppeteer Problem Overview
Puppeteer Solutions
Solution 1 - Puppeteer
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>
:
Solution 2 - Puppeteer
For dropdown component, I think we should consider 2 situations:
- native HTML
select
element - component written by JS, composed of a button and a list of options, take bootstrap dropdown as example
For the second situation, I think click
can solve the problem.
For the first situation, I just found 2 ways to do this:
page.select
elementHandle.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.
27/04/2018 Updated
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);
Solution 3 - Puppeteer
For native selectboxes, my solution was to execute some JS on the page itself:
await page.evaluate(() => {
document.querySelector('select option:nth-child(2)').selected = true;
})
Solution 4 - Puppeteer
Turn out this is easier than what I thought because the dropdown list is NOT a native HTML selction&option combination, therefore, I can actually use the code below to select the target I want.
await page.click('#telCountryInput')
await page.click('#select2-telCountryInput-results > li:nth-child(4)')
Solution 5 - Puppeteer
I landed here from a message where someone was asking how to select the first option from a dropdown. This is how I just worked out how to do it:
await page.click('.select-input');
await page.waitFor(300);
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');
The above code first selects the relevant input. I then set a wait because mine wasn't loading quick enough. Then I used keyboard presses to navigate down to the first option.
Solution 6 - Puppeteer
Page.select doesn't always work for me and page.type is unreliable as well. Today I came up with:
await page.evaluate((css, text) => {
let sel = document.querySelector(css)
for(let option of [...document.querySelectorAll(css + ' option')]){
if(text === option.text){
sel.value = option.value
}
}
}, '#telCountryInput', 'my-value')
Solution 7 - Puppeteer
In pyppeteer, when select by text, i can do this :
Example page with fastapi server
"""
filename: example.py
Note:
When run this example, recommend create a virtualenv by tools, like pipenv. And install dependencies.
Install dependencies:
```shell
pipenv install fastapi uvicorn python-multipart
```
Run server:
```shell
pipenv run python example.py
# pipenv run uvicorn --reload example:app
```
"""
import logging
import uvicorn
from fastapi import FastAPI, Form
from pydantic import BaseModel
from starlette.responses import HTMLResponse
HTML = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<form id="add" method="post" action="/add">
<label for="title"></label>
<input id="title" name="title">
<label for="tag">Tag</label>
<select id="tag" name="tag">
<option>java</option>
<option>python</option>
<option>kotlin</option>
</select>
</form>
<button id="submit" onclick="submitHandle()">Submit</button>
<script>
const submitHandle = () => {
document.getElementById('add').submit()
}
</script>
</body>
</html>
"""
console_handler = logging.StreamHandler()
console_handler.setLevel(level=logging.DEBUG)
logger = logging.getLogger(__name__)
logger.setLevel(level=logging.INFO)
logger.addHandler(console_handler)
app = FastAPI()
class PostModel(BaseModel):
title: str
tag: str
@app.get('/posts')
def posts():
return HTMLResponse(content=HTML)
@app.post('/add')
def detail(title: str = Form(...), tag: str = Form(...)) -> PostModel:
post = PostModel(title=title, tag=tag)
logger.info(f'Add a blog. Detail: "{post.json()}"')
return post
if __name__ == '__main__':
uvicorn.run(app) # noqa
Example python spider code
import asyncio
import logging
from pyppeteer import launch
console_handler = logging.StreamHandler()
console_handler.setLevel(level=logging.DEBUG)
logger = logging.getLogger(__name__)
logger.setLevel(level=logging.INFO)
logger.addHandler(console_handler)
async def post_spider():
"""Open page and add value in form, then submit."""
browser = await launch(headless=False)
try:
page = await browser.newPage()
await page.goto('http://127.0.0.1:8000/posts')
expect_value = 'python'
title_element = await page.querySelector('#title')
await title_element.type('I love python, and python love me.')
# # If it does not work.
# await page.select('#tag', expect_value)
tag_element = await page.querySelector('#tag')
# #Extract all options value
# options_text = await page.querySelectorAllEval(
# '#tag > option',
# 'options => options.map(option => option.value)'
# )
options_text = await tag_element.querySelectorAllEval(
'option',
'options => options.map(option => option.value)'
)
# # Check expect value in options
if expect_value in options_text:
# # Use JavaScript set select element value that in options.
await page.querySelectorEval('#tag', f'element => element.value = "{expect_value}"')
tag_selected_value = await page.querySelectorEval('#tag', 'element => element.value')
logger.info(f'Selected tag element value is "{tag_selected_value}"')
submit_ele = await page.querySelector('#submit')
await submit_ele.click()
finally:
await browser.close()
if __name__ == '__main__':
asyncio.run(post_spider())
Note:
You can use evaluate a JavaScript to set one of options text to their select, if the text not in options, the select's value is not change.
This is python example, its use is similar to puppeteer and I would like to record it here to help more people.
My env:
- Python: 3.10
- pyppeteer: 0.2.6
Solution 8 - Puppeteer
@huagang
Your idea is amazing, I extended the value attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<form id="add" method="post" action="/detail">
<label for="title"></label>
<input id="title" name="title">
<label for="tag">Tag</label>
<select id="tag">
<option value="1">java</option>
<option value="2">python</option>
<option value="3">kotlin</option>
</select>
</form>
<button id="submit" onclick="submitHandle()">Submit</button>
<script>
const submitHandle = () => {
document.getElementById('add').submit()
}
</script>
</body>
</html>
expect_value = '3'
select_tag = '#tag'
# extract all options value
option_texts = []
for option_ele in await page.querySelectorAll(f'{select_tag} > option'):
text = await page.evaluate('(element) => ({"value":element.value,"text":element.textContent})', option_ele)
option_texts.append(text)
value = ''
for v in option_texts:
if v.get('text') == expect_value:
value = v.get('value')
break
await page.select(select_tag, value)