How to choose options from dropdown lists with Puppeteer automation

[lucask]

I’m new to working with Puppeteer and running into a frustrating issue. I need to interact with a dropdown menu on a webpage and pick a specific option from it, but nothing seems to work properly.

I’ve been searching everywhere and tried multiple approaches but they all fail. The dropdown just won’t cooperate and I can’t figure out what I’m doing wrong.

Here’s my current code setup:

const puppeteerLib = require('puppeteer');
(async function() {
  const browserInstance = await puppeteerLib.launch({headless: false});
  const newPage = await browserInstance.newPage();
  await newPage.goto('https://example.com');
  // Need to add dropdown selection logic here
  // await newPage.select('#my-dropdown', 'option-value');
  await browserInstance.close();
})();

This is really blocking my progress and I’m getting pretty frustrated. Has anyone dealt with stubborn dropdown menus before? What’s the best way to handle them in Puppeteer?

[SpinningGalaxy]

the page.select() method is usually reliable. just ensure the page loads completely - try await newPage.waitForLoadState('networkidle'). if that doesn’t help, it might be timing. adding a slight delay before your selection can help the js finish loading dropdown options.

[CreativePainter33]

Dropdowns can be tricky, especially when they are not standard HTML select elements. Your use of page.select() is effective for traditional dropdowns, but many websites implement custom dropdown menus that require a different approach.

From my experience, ensuring that elements are completely loaded is crucial. Incorporate await newPage.waitForSelector('#my-dropdown') prior to your selection code to ensure the dropdown is available.

For custom dropdowns that lack real select tags, you may need to simulate user interactions. To do this, first trigger the dropdown by executing await newPage.click('.dropdown-trigger'), then select your desired option with await newPage.click('[data-value="your-option"]'). It’s important to review the page’s HTML structure, as custom dropdowns often use div elements with event handlers instead of standard select options.

If you encounter any animations when interacting with the dropdown, inserting a timeout such as await newPage.waitForTimeout(500) between steps can help avoid issues.

[sofiap]

I’ve hit this same problem with async dropdowns. The dropdown looks ready, but the options aren’t actually loaded yet.

I fixed it by using await newPage.waitForFunction() to wait for the specific option to exist in the DOM first. Like await newPage.waitForFunction(() => document.querySelector('#my-dropdown option[value="desired-value"]')) - this saved me tons of debugging time.

Another trick that works well: use page.evaluate() to set the select element’s value directly, then trigger the change event manually. This skips the timing issues you get with simulated clicks. Setting the value + dispatching a change event usually works when other methods don’t trigger the dropdown’s JS handlers.