Fill a web form from CSV and review it before submitting

One CSV row often needs to become one record in a website. The work is mostly mapping: which column belongs in which field, which dropdown choice matches the source, and which checkboxes should be checked. This example prepares that record and hands it back for review.

We used MCP Browser Extension to fill eight controls on Selenium's public web form. The source was a single invented row. There was no account, customer data, file attachment, or submission. The final page remained on the form with Submit available.

This workflow is useful for someone preparing administrative records from a spreadsheet, or a developer checking that a form can receive a known dataset. It is a small example of preparation and verification, not a bulk-import feature or an end-to-end submission test.

The source row and prompt

The CSV has eight columns. For this demonstration, the agent was given their contents directly; no CSV file was uploaded to the website. You can copy this sample or download the same row.

record,notes,city,choice,checked_checkbox,default_checkbox,radio,range
QA-1042,Review this draft before submission.,Seattle,Two,false,true,Default radio,7

Give your agent this prompt:

Use MCP Browser Extension to open Selenium's public web form
in your own background tab:
https://www.selenium.dev/selenium/web/web-form.html

Use the CSV row above. Map record to Text input, notes to
Textarea, city to Dropdown (datalist), and choice to Dropdown
(select). Set Checked checkbox to false, Default checkbox
to true, choose Default radio, and set Example range to 7.

Leave the password, file, disabled, readonly, color and date
controls unchanged. Inspect the fields before filling them.
Read back the result and capture a screenshot for review.
Stop before Submit. Do not press Enter or submit the form.

The explicit field mapping matters because this is a generic test page. “Text input” could hold almost anything. In a business application, replace these labels with the destination's actual labels and explain any ambiguous column. The agent supplies the mapping; the extension executes the browser actions.

What the agent did

The run was recorded on 15 October 2026. It began with chrome_status, selected the already-paired default profile using profile_use, and opened the public page with tab_new and active: false. The captured task was named with task_new so the screenshots and action history stayed together.

1. Inspect the controls

The agent used snapshot to identify the controls, then get_html scoped to form to inspect their names and IDs. Several snapshot names were empty, so the markup provided a reliable mapping to the visible labels. The page contained a password field, but it was a public test form rather than a login screen; that field was left empty.

2. Fill the record, notes, and city

The first fill_form call used these fields. All calls targeted the tab returned by tab_new; its session-specific ID is omitted below.

{
  "fields": {
    "[name=\"my-text\"]": "QA-1042",
    "[name=\"my-textarea\"]": "Review this draft before submission.",
    "[name=\"my-datalist\"]": "Seattle"
  }
}

The tool returned filled: 3 and submitted: false. The city control is a text input backed by a datalist, which is why it received text rather than a native-select operation.

3. Choose the dropdown option

The agent called select_option with selector: "[name=\"my-select\"]" and values: ["Two"]. The page displayed Two. The later readback showed its underlying value as 2, matching the option in the inspected HTML.

4. Set the checkboxes, radio button, and range

A second fill_form call set #my-check-1 to false and #my-check-2 to true. It returned filled: 2 and submitted: false. The agent then called click on #my-radio-2 to select Default radio. A final fill_form call set [name="my-range"] to the string "7" and again returned submitted: false.

These were separate operations, followed by screenshots. The demo does not claim that every control was filled in a single call.

A repeat capture exposed a useful retry limitation: boolean entries in fill_form acted as clicks, so replaying them on already-matching checkboxes inverted the state. The readback caught that, and explicit clicks corrected both controls. For a repeatable workflow, inspect the checked states first and click only the controls that differ from the source.

5. Read the result and stop

The agent took another snapshot and a final screenshot. An additional read-only eval inspected the live values and checked states, confirmed the unchanged form URL, and reported zero attached files. That diagnostic used an eval-enabled session. Evaluation is a separate opt-in; it is not required to follow the basic interaction workflow or inspect the screenshot and snapshot.

No call supplied submitSelector, clicked Submit, or pressed Enter. After preserving the evidence, the agent closed its own test tab.

Watch the recorded demo

The video holds each captured step long enough to inspect it. Its duration is an editing choice, not a measurement of how quickly the task ran. The Selenium source and licence identify the public test fixture used in the recording.

The verified result

The password and date inputs remained empty. The readonly field retained its original text, the disabled input stayed disabled, the color retained its initial value, and the file input had no attachment. The result was a prepared form, not a saved record. No server-side validation or persistence claim follows from this run.

How to try it

Follow the quickstart, allow www.selenium.dev, and enable mutations for navigation and field interaction. Complete the first-use email verification and Chrome pairing when prompted. Ask your agent to check chrome_status, then paste the sample and prompt above.

Start with this one synthetic row. Compare its expected values with the page before applying the pattern to a real destination. The AI form filling guide explains how to handle uncertain mappings, custom controls, and review boundaries. The tool reference gives the exact arguments.

Variations

For a validation check on your own test environment, provide deliberately invalid input and ask the agent to report the visible error. That is a different task from the successful preparation shown here and needs its own evidence.

For several rows, ask the agent to prepare one record at a time and produce a comparison table for each. Decide explicitly whether the workflow may save records. Some applications autosave changes before a final button is clicked, so check that behavior before entering real data.

For a custom city picker, inspect the suggested options and select the intended result. Entering “Seattle” into an ordinary datalist does not demonstrate that an unrelated autocomplete widget has accepted a valid city record.

FAQ

Does the extension import a CSV automatically?

No. The agent reads the supplied row and maps it to explicit tool arguments. In this example, the row was provided as text. A host that can read local files can supply the same information from a CSV file.

Was the sample form submitted?

No. Submit remained untouched, the form URL stayed unchanged, and the fill calls reported submitted: false. The recorded outcome is the prepared and checked form.

Why did you check both values and checked states?

Checkboxes can have the value on even when they are unchecked. A state check establishes whether they are selected. Likewise, the dropdown's label Two and stored value 2 need to be interpreted using the page's option mapping.

Can I use the same prompt on another site?

Use the workflow, but inspect that site's controls and replace the field mapping. The selectors in this example belong to Selenium's test fixture. They are not universal selectors for other forms.