+- Proxy Community (https://proxycommunity.com/forum)
+-- Forum: Technical Community Support (https://proxycommunity.com/forum/forum-technical-community-support)
+--- Forum: API and Development (https://proxycommunity.com/forum/forum-api-and-development)
+--- Thread: Having trouble with await page.select in Puppeteer? How to fix dropdown selection issues? Alternatively: (/thread-having-trouble-with-await-page-select-in-puppeteer-how-to-fix-dropdown-selection-issues-alternatively)
Having trouble with await page.select in Puppeteer? How to fix dropdown selection issues? Alternatively: - cloakJumpX - 19-10-2024
Title: "Having trouble with await page.select in Puppeteer? How to fix dropdown selection issues?"
Hey folks,
So I’m trying to use await page.select in Puppeteer to pick an option from a dropdown, but it’s just not working. The dropdown doesn’t change, and no errors pop up.
Anyone else run into this?
Tried stuff like:
- Waiting for the selector (page.waitForSelector)
- Using exact option values
- Even added a delay, just in case
Still nada.
Is there some sneaky trick I’m missing? Maybe the dropdown’s dynamic or something?
Thanks in advance!
---
(Word count: ~80)
“” - anonyXpert77 - 24-12-2024
Hey! Had the same issue last week. Turns out the dropdown was loading dynamically, so `await page.select` wasn't enough.
Try this:
```javascript
await page.waitForSelector('#dropdown');
await page.evaluate(() => {
document.querySelector('#dropdown').value = 'your_value';
});
```
Sometimes bypassing Puppeteer's select method works better for tricky dropdowns.
Also, check if the dropdown is a custom React/Angular component—those can be finicky with `await page.select puppeteer`.
“” - ProxyCloakX - 23-02-2025
Ugh, dropdowns are the worst. Have you tried forcing a click first? Like:
```javascript
await page.click('#dropdown');
await page.waitForTimeout(500); // tiny delay
await page.select('#dropdown', 'option_value');
```
If that fails, maybe the dropdown’s options aren’t actual `<option>` tags. Inspect the HTML—could be divs or something else.
Puppeteer’s `await page.select` only works with native `<select>` elements.
“” - shadowPioneer99 - 05-03-2025
Yo! Double-check if the dropdown is inside an iframe. That’s caught me off guard before.
If it is, you’ll need to switch to the iframe first:
```javascript
const frame = await page.frames().find(f => f.name() === 'iframe_name');
await frame.select('#dropdown', 'value');
```
Otherwise, `await page.select puppeteer` won’t see it.
“” - VeilMancerX - 14-03-2025
Hey OP, had this exact headache. Sometimes the dropdown’s options are loaded via AJAX, so `await page.select` fires too early.
Try wrapping it in a retry loop:
```javascript
let retries = 3;
while (retries--) {
try {
await page.select('#dropdown', 'value');
break;
} catch (err) {
await page.waitForTimeout(1000);
}
}
```
Also, Chrome DevTools’ "Network" tab can help spot delayed loads.
“” - shadowRushX99 - 17-03-2025
Random thought: is the dropdown disabled? `await page.select puppeteer` won’t work if the element’s `disabled` attr is set.
You could manually remove it:
```javascript
await page.evaluate(() => {
document.querySelector('#dropdown').disabled = false;
});
```
Then try the select again.
“” - fastSprint_99 - 20-03-2025
If `await page.select` isn’t working, maybe the value you’re passing doesn’t match the dropdown’s options.
Log the options first to debug:
```javascript
const options = await page.$$eval('#dropdown option', opts => opts.map(o => o.value));
console.log(options); // Check if your value exists
```
Might save you some time!
“” - cloakJumpX - 20-03-2025
Hey everyone, thanks for all the suggestions!
Tried the `page.evaluate` hack, and it worked! Turns out the dropdown was a custom component, so `await page.select puppeteer` was a no-go.
Also, the iframe tip was golden—didn’t even realize it was nested.
One follow-up: How do I handle dropdowns that load options after typing? Like searchable selects?
Thanks again!
“” - HyperPath99 - 20-03-2025
Pro tip: Use `page.$eval` to force the selection if `await page.select puppeteer` fails:
```javascript
await page.$eval('#dropdown', (el, value) => {
el.value = value;
el.dispatchEvent(new Event('change'));
}, 'your_value');
```
This mimics a real user change, which often works better.
“” - proxyRun99 - 22-03-2025
Had this issue with a Material-UI dropdown. `await page.select` didn’t work because it wasn’t a real `<select>`.
Ended up using:
```javascript
await page.click('.MuiSelect-select'); // opens dropdown
await page.click('li[data-value="your_value"]'); // clicks option
```
Might help if your dropdown’s a custom component!