Set input value – Virtuoso

The setValue extension sets the value of a stored input-like element directly in the page DOM and dispatches a bubbling input event so reactive front-end frameworks can respond to the change.

This is useful when a normal journey step such as write updates a field visually but the application does not enable the submit button, refresh validation, or trigger the expected reactivity, especially in cross-browser or device executions.

Parameters:

storedElement required, a string containing the element details captured by a previous journey step, for example store element details of "element hint" in $elementVariable. The value must parse as JSON and contain a selectors array;
value required, the string value to apply to the target element's value property, for example #00FF00 for an HTML color input.

Note: This extension is designed for form controls that expose a native value setter, such as many input and textarea elements. It does not type into the field like a user; it sets the value through JavaScript and then dispatches an input event.

How to apply this to your journey

Use the extension in a journey by storing the target element details first, then calling setValue with the execute command. Pass the stored element details using as storedElement and the desired field value using as value.

Note: The source code parses storedElement as JSON and checks only CSS_SELECTOR and XPATH selectors from the stored selector list. If the stored element cannot be resolved in the current page context, the extension fails the step.

store element details of "html5colorpicker" in $picker
execute "setValue" using "$picker" as storedElement, "#00FF00" as value

store element details of "Email address" in $emailInput
execute "setValue" using "$emailInput" as storedElement, "john@example.com" as value

You can also store the value in a variable before calling the extension. This is useful when the value comes from test data, an environment variable, or a previous journey step.

execute "setValue" using "$picker" as storedElement, "$colorValue" as value

store value "#00FF00" in $colorValue
store element details of "html5colorpicker" in $picker
execute "setValue" using "$picker" as storedElement, "$colorValue" as value

This extension does not return a meaningful value. When it succeeds, the target element's native value setter has been called and a bubbling input event has been dispatched. Add a follow-up assertion in the journey to confirm the page reacted as expected.

This extension does not require any external resource.

The extension should be configured as:

Run asynchronously: No
Scope: Global

Limitation: This extension changes the target element through browser JavaScript rather than through real keyboard or pointer input. It only works when storedElement contains valid JSON element details with selectors that can be resolved in the current document, and this implementation checks only CSS_SELECTOR and XPATH selector types. It requires the resolved element or its prototype to expose a value setter; non-form elements, custom widgets that store state outside the native value property, closed shadow DOM components, browser-native controls, cross-origin or sandboxed iframes, and controls that require trusted user events may not react as expected. The script dispatches a bubbling input event but does not dispatch change, focus, blur, keyboard, pointer, or composition events, so some frameworks or validation logic may still need an additional journey step. Cross-browser note: This extension runs in the browser or device selected for the journey execution. Because it uses DOM selector lookup, native property descriptors, the value property, and synthetic browser events, behavior can differ from Virtuoso's default Chromium-based browser in Safari, Firefox, Edge, iOS, Android, or remote-grid executions. Validate it in each browser/device configuration used by your plan, especially for color inputs, date inputs, mobile form controls, custom components, and reactive frameworks.

Add the extension to your Virtuoso instance

Select the domain that matches your Virtuoso account.

Add extension to Virtuoso - https://app.virtuoso.qa/ →	Add extension to Virtuoso Free Trial - https://app2.virtuoso.qa/ →
Add extension to Virtuoso US - https://app-us.virtuoso.qa/ →	Add extension to Virtuoso UK - https://app-uk.virtuoso.qa/ →

View source

Last updated: 21/11/2022

Resources:

This extension does not require any external resource.

// Last updated: 21/11/2022, 18:07:27 UTC
function setNativeValue(element, value) {
  const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {};
  const prototype = Object.getPrototypeOf(element);
  const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};

  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else if (valueSetter) {
    valueSetter.call(element, value);
  } else {
    throw new Error('The given element does not have a value setter');
  }
  element.dispatchEvent(new Event('input', { bubbles: true }));
}

function getElement (selectors) {
  let element = null
  for (const selectorDetails of selectors) {
    switch (selectorDetails.type) {
      case 'CSS_SELECTOR':
        element = document.querySelector(selectorDetails.value)
        break
      case 'XPATH':
        element = document.evaluate(selectorDetails.value, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
        break
      default:
        continue
    }
    // if we found a valid element we don't need to keep searching
    if (element) return element
  }
  throw new Error('Found no suitable selector: ' + JSON.stringify(selectors))
}

const { selectors } = JSON.parse(storedElement)
const element = getElement(selectors)

setNativeValue(element, value)