bdg dom fill

Overview

Fill input fields, textareas, and select elements with values. Uses React-compatible synthetic events to ensure proper state updates. Automatically waits for network stability unless disabled.

Syntax

bdg dom fill <selector> <value> [options]

Arguments

selector

string

required

CSS selector or numeric index from cached query results (0-based)

value

string

required

Value to fill into the field

Options

--index

number

Element index if selector matches multiple (0-based)

--no-blur

flag

Do not blur after filling (keeps focus on element)

--no-wait

flag

Skip waiting for network stability after fill

--json

flag

Output as JSON

Behavior

Event sequence

Focus: Dispatches focus event
Input: Sets value and dispatches React input event with nativeEvent
Change: Dispatches React change event
Blur (default): Removes focus with blur event
Wait (default): Waits for network stability

React compatibility

Properly triggers onChange handlers in React components
Sets both DOM value and React internal state
Uses Object.getOwnPropertyDescriptor to update React’s tracked value

Automatic waiting

By default, waits for page stability after filling:

Network idle (no requests for 150ms)
DOM stable (no mutations for 200ms)
Maximum wait: 2 seconds

Examples

Fill by selector

# By ID
bdg dom fill "#email" "[email protected]"

# By name attribute
bdg dom fill "input[name='username']" "john_doe"

# By type
bdg dom fill "input[type='password']" "SecurePass123"

Fill by cached index

# Step 1: Query and cache
bdg dom query "input"
# Found 3 elements:
# [0] <input.email>
# [1] <input.password>
# [2] <input.text>

# Step 2: Fill by index
bdg dom fill 0 "[email protected]"
bdg dom fill 1 "SecurePass123"
bdg dom fill 2 "John Doe"

Fill specific match

# Fill 2nd input (0-based indexing)
bdg dom fill "input" "value" --index 1

Keep focus after filling

# Don't blur (useful for autocomplete)
bdg dom fill "#search" "query" --no-blur

Skip stability wait

# For fast, non-validating fields
bdg dom fill "#name" "value" --no-wait

Complete form workflow

# Discover form structure
bdg dom form
# Shows field indices and requirements

# Fill required fields
bdg dom fill 0 "[email protected]"     # Email
bdg dom fill 1 "SecurePass123"        # Password
bdg dom fill 2 "SecurePass123"        # Confirm password

# Toggle checkbox
bdg dom click 3                        # Terms checkbox

# Submit
bdg dom click 4                        # Submit button

Supported field types

Text inputs

bdg dom fill "input[type='text']" "value"
bdg dom fill "input[type='email']" "[email protected]"
bdg dom fill "input[type='password']" "secret"
bdg dom fill "input[type='tel']" "+1-555-0100"
bdg dom fill "input[type='url']" "https://example.com"

Textareas

bdg dom fill "textarea" "Multi-line\ntext\nvalue"

Select elements

# By visible text
bdg dom fill "select" "Option 2"

# By value attribute
bdg dom fill "select[name='country']" "US"

Number inputs

bdg dom fill "input[type='number']" "42"

Exit codes

number

Success - field filled

number

RESOURCE_NOT_FOUND - element not found

number

STALE_CACHE - cached index invalid (page navigation)

102

number

CDP_TIMEOUT - CDP operation timed out

Troubleshooting

Value not updating

For React components, ensure:

The component uses controlled inputs with onChange
Try without --no-blur (blur triggers validation)
Check for custom event handlers that may block updates

Slow filling

If fills are slow due to stability waiting:

Use --no-wait for fields without validation
Fill multiple fields before waiting for submission

Element not fillable

# Verify element is an input
bdg dom get "#element" --raw

# Check if element is disabled
bdg dom eval 'document.querySelector("#element").disabled'

Comparison with other methods

Method	Use case
`bdg dom fill`	Form fields with React support
`bdg dom eval`	Direct value setting without events
`bdg dom pressKey`	Keyboard-based input

bdg dom form - Discover form structure
bdg dom click - Click buttons and checkboxes
bdg dom query - Find form fields
bdg dom submit - Submit forms

Session Management

Data Inspection

DOM Commands

Network Commands

CDP Commands

Console Commands

Overview

Syntax

Arguments

Options

Behavior

Event sequence

React compatibility

Automatic waiting

Examples

Fill by selector

Fill by cached index

Fill specific match

Keep focus after filling

Skip stability wait

Complete form workflow

Supported field types

Text inputs

Textareas

Select elements

Number inputs

Exit codes

Troubleshooting

Value not updating

Slow filling

Element not fillable

Comparison with other methods

Build docs developers (and LLMs) love

Session Management

Data Inspection

DOM Commands

Network Commands

CDP Commands

Console Commands

​Overview

​Syntax

​Arguments

​Options

​Behavior

​Event sequence

​React compatibility

​Automatic waiting

​Examples

​Fill by selector

​Fill by cached index

​Fill specific match

​Keep focus after filling

​Skip stability wait

​Complete form workflow

​Supported field types

​Text inputs

​Textareas

​Select elements

​Number inputs

​Exit codes

​Troubleshooting

​Value not updating

​Slow filling

​Element not fillable

​Comparison with other methods

​Related commands

Build docs developers (and LLMs) love

Overview

Syntax

Arguments

Options

Behavior

Event sequence

React compatibility

Automatic waiting

Examples

Fill by selector

Fill by cached index

Fill specific match

Keep focus after filling

Skip stability wait

Complete form workflow

Supported field types

Text inputs

Textareas

Select elements

Number inputs

Exit codes

Troubleshooting

Value not updating

Slow filling

Element not fillable

Comparison with other methods

Related commands