grafana/k6 · error

filling element: %w

Error message

filling element: %w

What it means

Returned by ElementHandle.fill() in the k6 browser module when the fill action cannot complete. Fill first waits for the element to be visible, enabled and editable (unless force:true), then focuses it and sets its value; any failure in that pipeline is wrapped with %w, most commonly a timeout waiting for one of those element states. The wrapped cause carries the real reason (e.g. 'waiting for element to be editable').

Source

Thrown at internal/js/modules/k6/browser/common/element_handle.go:916

		return fmt.Errorf("dispatching element event %q: %w", typ, err)
	}

	applySlowMo(h.ctx)

	return nil
}

// Fill types the given value into the element.
func (h *ElementHandle) Fill(value string, opts *ElementHandleBaseOptions) error {
	fill := func(apiCtx context.Context, handle *ElementHandle) (any, error) {
		return nil, handle.fill(apiCtx, value)
	}
	fillAction := h.newAction(
		[]string{"visible", "enabled", "editable"},
		fill, opts.Force, withRetry, opts.NoWaitAfter, opts.Timeout,
	)
	if _, err := call(h.ctx, fillAction, opts.Timeout); err != nil {
		return fmt.Errorf("filling element: %w", err)
	}

	applySlowMo(h.ctx)

	return nil
}

// Focus scrolls element into view and focuses the element.
func (h *ElementHandle) Focus() error {
	focus := func(apiCtx context.Context, handle *ElementHandle) (any, error) {
		return nil, handle.focus(apiCtx, false)
	}
	opts := NewElementHandleBaseOptions(h.DefaultTimeout())
	focusAction := h.newAction(
		[]string{}, focus, opts.Force, withRetry, opts.NoWaitAfter, opts.Timeout,
	)
	if _, err := call(h.ctx, focusAction, opts.Timeout); err != nil {
		return fmt.Errorf("focusing on element: %w", err)

View on GitHub (pinned to 93accf6570)

Solutions

  1. Wait for actionability before filling: page.waitForSelector(sel, { state: 'visible' }) and confirm the control is enabled and not readonly
  2. Make the selector unique (browser devtools) so it does not resolve to a hidden duplicate
  3. Give the action a bigger budget: handle.fill(value, { timeout: 10000 }) or raise the browser-level timeout option
  4. If the state check is a false negative (CSS opacity/animation quirks), bypass checks with { force: true }
  5. Re-query the handle immediately before fill instead of reusing one captured earlier

Example fix

// before
const h = await page.$('#email');
await h.fill('a@b.c');
// after
await page.waitForSelector('#email', { state: 'visible' });
const h = await page.$('#email');
await h.fill('a@b.c', { timeout: 10000 });
Defensive patterns

Strategy: try-catch

Validate before calling

const sel = '#email';
await page.waitForSelector(sel, { state: 'visible', timeout: 5000 });
const h = await page.$(sel);
const editable = await h.isEditable();
const enabled = await h.isEnabled();
if (!editable || !enabled) throw new Error('field not fillable');

Try / catch

try {
  await handle.fill('a@b.c', { timeout: 10000 });
} catch (e) {
  if (String(e).includes('filling element')) {
    await page.waitForSelector(sel, { state: 'visible' });
    await handle.fill('a@b.c');
  } else {
    throw e;
  }
}

Prevention

When it happens

Trigger: handle.fill(value) on an element that is hidden, disabled, or readonly/non-editable when the timeout expires; filling a handle whose node was detached by a SPA re-render; using a handle captured before a page navigation; page or browser closed while the action was retrying.

Common situations: React/Vue apps re-rendering between page.$() and fill(); a selector matching a hidden duplicate node instead of the intended input; inputs gated behind UI logic (enabled only after another control changes); default timeout too short on slow CI machines or under k6 load.

Related errors


AI-assisted analysis of grafana/k6@93accf6570 (2026-08-15). Data as JSON: /api/errors/207ac77a58d0f1da. Report an issue: GitHub.