Skip to content

Picking an element and the recorder

Both tools put an overlay on the page you are authoring. They run through the service worker, which injects /picker.js into every frame of the tab.

Pick element

Use Pick element to set the anchor of one step. Hover to highlight, click to choose. The picker:

  • reads the real target with composedPath()[0], so it works inside open shadow roots;
  • moves the choice up to the nearest interactive ancestor, so clicking the text inside a button picks the button;
  • captures several locator strategies and a fingerprint (see locator strategy);
  • shows a fragile badge on the step when fewer than two strategies resolved uniquely.

Press Esc to stop. Alt+Shift+P starts the element picker in the active tab and Alt+Shift+Space pauses or resumes it (author mode on and the site granted; see shortcuts).

Picker modes used by the studio: element, form, fields, condition-field and record.

Recorder

Record steps turns each click and each field change into a new step. It stores the element, never the value typed. Stop ends it. Steps are appended to the walkthrough in click order.

Worked example

  1. In a walkthrough, press Record steps.
  2. Click Search, type a policy number into the box, click Open claim.
  3. Press Stop. You now have three steps. The typed policy number is not stored anywhere.
  4. Edit titles and bodies. Use Pick the element again on any step whose anchor looks fragile.

Cross-origin iframes

Picking works through one cross-origin frame hop. The picker session lives in storage.session under picker:<tabId> and is re-injected after navigation, because the service worker can be stopped after about 30 seconds idle.

Gotchas

  • Fields are described by role, label and attributes. Select options and field values are deliberately left out of the fingerprint.
  • A page that rebuilds its DOM between clicks can make the recorder add a step for an element that no longer exists. Re-pick it.
  • Generated ids (framework hashes, ember123, mui-..., radix-...) are rejected as strategies. If an element has only generated ids you get a weak anchor. Ask the application team for a data-testid; the defaults also accept data-test, data-qa, data-cy and data-automation-id, and the app's testIdAttributes field (not exposed in the studio form; set it in a bundle) can add more.
  • Closed shadow roots cannot be picked into. See known limits.