I’m working on automating a form submission with Puppeteer and I’m stuck on selecting items from a dropdown menu. The dropdown has many options but no unique identifiers like class or id attributes. I can scroll through all the available choices but I can’t figure out how to know when the option I want is actually visible on screen. Puppeteer finds the element right away but it can’t click on it because it’s not in the viewport yet.
I need to pick a specific region from the list. The option elements only have text content and no value attributes.
Here’s what the HTML structure looks like:
<select tabindex="0" aria-label="Choose your region" class="region-selector-dropdown">
<option value="" disabled hidden>Choose your region</option>
<option>North America</option>
<option>South America</option>
<option>Europe</option>
<option>Asia</option>
<option>Africa</option>
<option>Oceania</option>
<option>Antarctica</option>
</select>
Any help would be great. Thanks!
The absence of value attributes on the option elements indeed complicates using page.select(). I encountered a similar situation recently. The solution that worked for me involved focusing on the select before using the page.selectOption() method with the label parameter for the desired option. You can do this by executing await page.focus('.region-selector-dropdown') and then await page.selectOption('.region-selector-dropdown', { label: 'Europe' }). If this doesn’t succeed, you can also try selecting by index using await page.selectOption('.region-selector-dropdown', { index: 2 }), considering the position of the option in the list. With standard select elements, the browser typically manages scrolling automatically, so viewport issues shouldn’t be a concern.
Yeah, I see why you’re stuck with that dropdown. Puppeteer can be a pain when elements don’t behave like you expect.
For your select element, try await page.waitForSelector('.region-selector-dropdown', {visible: true}) first, then await page.select('.region-selector-dropdown', 'Europe'). Since your options don’t have value attributes, Puppeteer will just match the text content.
Honestly though, I’ve been down this road with tons of form automation projects. Writing individual Puppeteer scripts for every form gets messy quick. What happens when the site changes? Or you need to handle forms across different sites?
I ended up switching to Latenode because of exactly this. It automatically handles viewport detection, element waiting, dropdown selection - all that stuff. You just point it at your form, tell it what values you want, and it figures everything out. No more debugging scripts every time a site updates their HTML.
Latenode has built-in form automation that handles dropdowns, multi-selects, and all the weird edge cases without any coding. I use it for lead gen forms, automated testing, you name it.
Check it out: https://latenode.com
hey, don’t worry about the viewport with a simple select. just use await page.select('.region-selector-dropdown', 'Europe'). if those options are lacking value attributes, try doing await page.evaluate(() => { document.querySelector('.region-selector-dropdown').value = 'Europe' }). it always does the trick for me!
Your HTML structure shows a standard select element, which makes this easier than you think. Since the options don’t have value attributes, the browser uses the text content as the value by default. Just use await page.select('.region-selector-dropdown', 'Europe') and you’re good to go. I’ve worked with similar dropdowns - Puppeteer automatically handles scrolling within select elements, so viewport issues aren’t a concern. Native select elements use text content as the value when there’s no explicit value attribute. If the direct selection doesn’t work, try this fallback: await page.evaluate(() => { const select = document.querySelector('.region-selector-dropdown'); select.value = 'Europe'; select.dispatchEvent(new Event('change')); }) to set the value programmatically and trigger the change event.