For a native HTML dropdown, call Puppeteer’s page.select() with the selector and the option’s value, wait for any page update triggered by the selection, then call page.screenshot(). The key is to wait for the state you want to show—not merely for the selection command to finish.
Capture a screenshot after choosing a native dropdown option
This runnable ES module example uses Puppeteer 25.12.0. Replace the URL and selectors with those used by your page. The CA argument is the option’s value attribute, not necessarily the text displayed to the user.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com');
await page.select('select#country', 'CA');
// Replace this with a condition that represents the result you need.
await page.waitForFunction(() =>
document.querySelector('#selected-country')?.textContent?.trim() === 'Canada'
);
await page.screenshot({ path: 'selected.png' });
} finally {
await browser.close();
}page.select(selector, values) selects option values on a native <select> and triggers the input and change events after selecting the provided options. See the Puppeteer Page API. The example assumes the page updates a label with the text “Canada”; that selector and condition are illustrative, not requirements for every site.
Wait for the page state you actually need
Awaiting page.select() ensures the selection operation has completed. It does not establish that an application has finished rendering content in response. If a result appears asynchronously, wait for an observable sign of that result before capturing.
#1 Best Overall
Wait for an element to appear
Use waitForSelector() when the relevant result is an element that gets added to the page:
await page.select('select#country', 'CA');
await page.waitForSelector('#country-result', { visible: true });
await page.screenshot({ path: 'selected.png' });Puppeteer documents a 30-second default timeout for waitForSelector(); it can also wait for visibility. See the waitForSelector API. Choose a selector and visibility condition that match the actual completed state you need.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Wait for a value or text to change
If the result is a label or other existing element, wait for its expected content with waitForFunction(), as in the first example. The API evaluates a page function until its condition is met; see the waitForFunction API.
A fixed delay can be useful when a page provides no reliable observable signal, but it is less dependable: a delay that is too short may capture stale content, while a longer one makes every run wait unnecessarily. Prefer a condition tied to the result whenever possible. Puppeteer’s Page interactions guide covers locators and waiting during interaction.
Rank #3
If the dropdown is a custom widget
page.select() is for a native <select>, not an arbitrary menu that only looks like one. A custom dropdown may be built from buttons, list items, or other elements. Inspect the page’s markup and interact with the controls it actually uses. Puppeteer recommends locators for selecting and interacting with page elements; locators perform automatic precondition checks. See the Page interactions guide.
For example, the interaction may need to open a button and then click an option. Adapt the selectors and accessible names to the page:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
await page.locator('button[aria-haspopup="listbox"]').click();
await page.locator('[role="option"][data-value="CA"]').click();
await page.waitForSelector('#country-result', { visible: true });
await page.screenshot({ path: 'selected.png' });This is a markup-dependent pattern, not a universal custom-dropdown API. For supported elements, locator.fill() also works with <select> elements; the interaction guide explains locator usage.
Choose what part of the page to capture
By default, page.screenshot() captures the current viewport and saves the image at the path you provide. PNG is the default image type. Puppeteer’s guide says, “For capturing screenshots use Page.screenshot().” See the Screenshots guide, Page.screenshot API, and ScreenshotOptions reference.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →- Viewport:
await page.screenshot({ path: 'selected.png' });captures what is currently visible. - Full page:
await page.screenshot({ path: 'selected.png', fullPage: true });captures the full page rather than only the viewport. - Clipped region: use the
clipoption inpage.screenshot()to capture a specific area. Set the clip coordinates and dimensions for the region you want. - One element: locate the target element and call its screenshot method. Puppeteer documents that
ElementHandle.screenshot()scrolls the element into view if necessary; see the ElementHandle.screenshot API.
Troubleshoot a missing or incorrect result
- The wrong option is selected: check the native option’s
valueattribute and pass that value topage.select(). The visible label and submitted value can differ. - The result still shows the old state: wait for the application’s updated text, element, or other observable result after selection. Selection completing does not guarantee asynchronous rendering has completed.
page.select()does not work: confirm the target is a native<select>. For custom widgets, open and choose through their actual controls.- The wait times out: verify the selector and expected text against the page after selection. If the result is intentionally hidden, do not require visibility; wait for the condition the capture actually needs.
- The screenshot omits content: check whether you need
fullPage: true, a clip, or an element screenshot rather than the default viewport capture.
Or skip the browser setup
ScreenshotNeo can return a screenshot or PDF from one GET request, without you launching and managing a browser. It accepts consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed as clean shots, and the response identifies the page verdict and billing status in headers.
For example, capture the URL after the application has reached the desired state:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Does Puppeteer’s selection call accept the dropdown’s visible label?
It accepts option values. Check the native option’s value attribute; it may differ from the text shown in the menu.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Can I use page.select() on a custom dropdown?
No. It applies to native <select> elements. For a custom widget, interact with its actual controls using locators or another suitable input method.
What does a Puppeteer screenshot capture if I do not set an option?
The default is the current viewport. Use fullPage: true, a clip, or an element screenshot when you need a different scope.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
