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 →Use Puppeteer locators for most form interactions: they find controls, wait until the target is ready, and let you fill fields or click buttons. Use page.select() when choosing explicit values in a native <select>, and keyboard typing when the page needs character-by-character input events. The examples below show how to fill common controls, submit a form, and confirm the result without relying on arbitrary sleeps.
Start with a locator
Puppeteer’s documentation recommends locators for selecting elements and interacting with them. A locator describes how to find a target and perform an action. For actions such as filling and clicking, Puppeteer checks that the target is in the viewport, visible, enabled, and stable across consecutive animation frames. If the element is not ready, the locator retries the action.
Install Puppeteer in a JavaScript project, then use an ES module script such as this. The URL and field selectors are examples; substitute a page you are authorized to automate and selectors that match its form.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.locator('input[name="email"]').fill('reader@example.com');
await page.locator('button[type="submit"]').click();
} finally {
await browser.close();
}Choose selectors based on the actual page markup. A unique name, label, or other meaningful attribute is generally easier to maintain than a long chain of positional selectors. Puppeteer supports CSS selectors as well as additional selector syntax for text, accessibility attributes, XPath, and open shadow DOM; see the Page interactions guide for the available forms.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
Fill text inputs, textareas, and editable content
locator.fill(value) detects the element’s type and supports input elements, textareas, selects, and contenteditable elements. For ordinary text fields, provide the string to enter:
await page.locator('input[name="firstName"]').fill('Avery');
await page.locator('textarea[name="message"]').fill('Hello there');Those field names and values are illustrative. Check the target page’s HTML and labels rather than assuming a form uses these names. The method details and supported control types are documented in Locator.fill().
Set checkboxes and radio controls
For checkboxes, radio buttons, and switches supported by the locator API, pass a boolean to fill() to set the desired state:
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
await page.locator('input[name="terms"]').fill(true);
await page.locator('input[name="updates"]').fill(false);Use a selector that identifies the intended control. Radio buttons in a group are mutually exclusive choices; target the specific option you want. A custom element that merely looks like a checkbox is not necessarily a native control supported by this behavior, so inspect its markup and interaction requirements.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Select options in a native select
Use page.select(selector, ...values) when you want to choose one or more explicit option values from a native HTML <select>. The values must match the option elements’ actual value attributes.
await page.select('select[name="country"]', 'CA');
await page.select('select[name="topics"]', 'news', 'events');For a multiple select, provide the values to select. For a single select, only the first supplied value is used. After selection, Puppeteer triggers the input and change events and returns the selected values. If the selector does not match a select element, the call throws. See Page.select() for the API behavior.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
Choose between filling, selecting, and typing
| Method | Best fit | Behavior to know |
|---|---|---|
locator.fill(value) |
Setting a normal input, textarea, contenteditable, select, or supported boolean control | Chooses a fill method based on the element type; use a boolean for supported checkbox, radio, and switch controls. |
page.select(selector, ...values) |
Choosing known option values in a native select | Triggers input and change; returns the selected values. |
ElementHandle.type(text) |
When character-by-character keyboard and input events matter | Sends keyboard/input events for each character; an optional delay can be set between keystrokes. |
For most straightforward text entry, prefer fill(). Use typing when the target page depends on keyboard-style input behavior. The ElementHandle.type() reference shows the keyboard events involved and an example of pressing Enter after typing; Enter is appropriate only if that form is designed to submit that way.
Type when keyboard events matter
The lower-level typing API works on an ElementHandle. For example, locate the field, focus it, type text, and then press a key only if the page’s form behavior calls for it:
Recommended Free Tools
const field = await page.waitForSelector('input[name="query"]');
if (!field) {
throw new Error('Search field was not found');
}
try {
await field.type('Puppeteer forms');
// Only use Enter if this form submits on Enter.
await field.press('Enter');
} finally {
await field.dispose();
}This illustrates the lower-level pattern, not a universal requirement to press Enter. A handle returned by waitForSelector() should be disposed when you are finished with it. Prefer locators for the ordinary path because waiting for a selector and then acting on its handle does not automatically retry that later action if the element is not ready.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
Submit and wait for a meaningful outcome
When a form has a clear submit button, click that specific control. If the form is designed to submit on Enter, pressing Enter in a relevant field is another option. Neither pattern is correct for every page; choose based on the form’s actual behavior.
await page.locator('input[name="email"]').fill('reader@example.com');
await page.locator('button[type="submit"]').click();
// Wait for a page-specific confirmation element, if the site provides one.
await page.locator('[data-testid="submission-confirmation"]').wait();The confirmation selector is an example, not a Puppeteer convention. Replace it with a result that proves the action succeeded on your page, such as a confirmation element or a known navigation state. Avoid a fixed delay as a substitute for checking the outcome: the right signal depends on the site.
When lower-level APIs are useful
Locators are the recommended starting point. Use page.waitForSelector() or an ElementHandle when locator actions do not provide the functionality you need, or when you specifically need the keyboard interaction pattern. Keep in mind that waitForSelector() waits for a matching element but does not automatically retry the subsequent action. Dispose of returned handles when finished. The interaction guide explains the distinction.
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
Troubleshooting form automation
- The locator does not find the field: Inspect the page’s actual labels and markup, then correct the selector. Check that it is unique and that the control is in the page or frame you are interacting with.
- An action cannot proceed because the element is not ready: Locators retry while checking readiness conditions. If the target never becomes visible, enabled, stable, or present, investigate the page state and selector rather than adding an arbitrary sleep.
fill()does not work on a control that looks like a checkbox: The documented boolean behavior covers supported checkbox, radio, and switch controls. A custom widget may require a different interaction supported by its page.page.select()throws: It requires a matching native select. Confirm that the selector points to a<select>and that the desired option values exist.- The wrong option is selected: Pass the option’s actual
value, not necessarily its visible label. For a single select, only the first provided value is considered. - Typing or pressing Enter behaves unexpectedly: Use
fill()for ordinary value entry. Usetype()when keyboard events matter, and press Enter only when the form’s behavior supports it. - The script clicks submit but cannot tell whether it worked: Wait for a site-specific confirmation or resulting page state. A successful click by itself does not establish that the site accepted the submission.
- Automation stops after waiting for a selector: A handle-based wait is lower-level and does not retry the later action automatically. Use a locator for the combined interaction where possible, and dispose of handles that you create.
Or skip the browser setup
If your goal is to capture a page rather than submit its form, ScreenshotNeo provides a screenshot API and MCP server. A single GET request can return a PNG, JPEG, WebP, or PDF; its documented clean-shot options accept cookie banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture, with each step configurable. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify page verdict and billing status in headers. AI agents can use its MCP tools, including take_screenshot, get_page_info, and capture_pdf. Learn more at ScreenshotNeo.
Here is the one-call cURL example; see the ScreenshotNeo API documentation for request options and response details:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo includes 1,000 screenshots per month on its free plan with no card required; paid plans start at $5 for 3,000 screenshots. Sign up for ScreenshotNeo and start with 1,000 free screenshots a month, no card required.
Documentation and version notes
The Puppeteer references used here surfaced as version 25.12.0, except the ElementHandle.type() API page, which surfaced as version 25.9.0. API documentation can change; check the current project pages when adjusting code for a particular installed version. The official Getting started guide also demonstrates importing Puppeteer, opening a browser and page, and using locator().fill().
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesFrequently Asked Questions
Does locator.fill() submit a form?
No. It fills the target control; submit using the form’s intended button or keyboard behavior.
Does page.select() work with custom dropdowns?
The documented method targets a native HTML select element, not every custom dropdown widget.
Should I use fill() or type() for a text field?
Use fill() for ordinary value entry; choose type() when the page needs character-by-character keyboard and input events.
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.
