Use await page.locator(selector).fill(value) to fill most form controls in Puppeteer. It supports inputs, textareas, selects, and contenteditable elements; pass true or false when setting checkboxes, radio buttons, or switches. Puppeteer’s page-interactions guide calls locators its recommended way to select and interact with elements. See the Puppeteer page-interactions guide and the Locator.fill() API reference (documentation version 25.12.0 when reviewed).
Fill a form with locator().fill()
Choose a selector that matches the page’s actual markup, then pass the value you want:
As an Amazon Associate I earn from qualifying purchases.
await page.locator('input[name="email"]').fill('[email protected]');
await page.locator('textarea[name="message"]').fill('Hello');
await page.locator('input[name="terms"]').fill(true);
await page.locator('button[type="submit"]').click();The selectors above are examples, not universal selectors. Replace them with selectors for the form you are automating. Puppeteer locators wait for an element to be present and in a suitable state for an action, and retry when readiness conditions are not met. An action can still time out if the element is absent or never becomes ready within the available time.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchChoose a selector that identifies the right field
Prefer a meaningful label, accessible name, or stable attribute when the page provides one. Puppeteer supports CSS selectors as well as selector syntax for text, accessibility attributes, XPath, and open Shadow DOM. For example, the official getting-started guide demonstrates selecting a search field by accessible name:
#1 Best Overall
await page.locator('::-p-aria(Search)').fill('automate beyond recorder');That accessible name works only if the page exposes an element with that name. Inspect the target page’s markup and accessibility information rather than assuming a selector will work across sites. See Puppeteer’s getting-started guide and selector and interaction documentation.
Use the right value for each control
Text inputs, textareas, and contenteditable elements
Pass a string to fill() for text-like controls, including supported input, textarea, and contenteditable elements:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
await page.locator('input[name="email"]').fill('[email protected]');
await page.locator('textarea[name="message"]').fill('Hello');Checkboxes, radio buttons, and switches
Pass a boolean to express the desired state. Use true to set the control and false to unset it:
await page.locator('input[name="terms"]').fill(true);
await page.locator('input[name="marketing"]:checked').fill(false);Make sure the selector identifies the intended control. A radio group, for example, may need a selector for the specific option you want selected.
Rank #3
- 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
Select controls
locator().fill(value) supports select elements. You can also use page.select(selector, ...values) when you want to pass option values explicitly:
await page.select('select[name="country"]', 'US');Puppeteer documents that page.select() triggers input and change events. For a multiple select, all supplied option values are considered; for a single select, only the first value is used. Neither approach is universally preferable: use the locator method for a consistent locator-first style, or page.select() when its explicit option-value interface suits the task. See the page.select() API reference.
Submit only after filling the intended fields
A locator action handles readiness checks for the action itself, but it cannot determine whether your chosen selector identifies the correct field or whether the submitted data is valid for the application. Keep the submit action separate so it is clear which fields were filled and when submission occurs:
await page.locator('input[name="email"]').fill('[email protected]');
await page.locator('input[name="terms"]').fill(true);
await page.locator('button[type="submit"]').click();The button selector is illustrative. Choose a stable selector or accessible name that matches the form you are automating.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot locator form-filling failures
The action times out
- Check that the selector matches an element on the current page and that navigation or rendering has completed.
- Check whether the target becomes visible, enabled, and stable enough for the action. Locator actions perform readiness checks and retry, but they can time out if the required state is never reached.
- Confirm that the form is not inside a frame or a closed Shadow DOM boundary that your selector cannot reach through the documented selector mechanisms.
The wrong field receives the value
- Replace broad selectors with a label, accessible name, or stable field attribute that distinguishes the intended control.
- Check whether the selector matches more than one element or points to a different control than expected.
A checkbox or radio option has the wrong state
- Use a boolean with
fill()to state the desired checked or unchecked value. - For radio groups, target the particular option rather than relying on a selector that could match another member of the group.
A select value is not applied
- Verify that the value you pass is an option value on that select element.
- For a multiple select, supply each desired value to
page.select(); for a single select, only the first supplied value is used.
A legacy wait does not prevent an interaction failure
waitForSelector is a lower-level wait and does not automatically retry the later action. Locators combine finding an element with action readiness checks, so prefer a locator for this interaction pattern. See the page-interactions guide.
Or skip the browser setup
If you need a website screenshot rather than browser-driven form entry, ScreenshotNeo can return an image or PDF from one GET request. It does not fill out or submit forms. Example using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It removes cookie and consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Frequently Asked Questions
Can I use a Puppeteer locator to fill a select element?
Yes. locator().fill(value) supports select elements; page.select(selector, ...values) is another documented option.
Quick Recap
Does fill() work for checkboxes?
Yes. Pass true or false to set the desired state.
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.
