How do you handle dynamic web elements?

Get Help & Discuss Process Studio
1

How do you handle dynamic web elements?

2

To handle dynamic web elements (elements whose IDs, XPaths, or attributes change on page refresh or dynamic user actions), Process Studio provides several built-in mechanisms within the GUI Automation plugin family.

Here are the primary strategies to handle dynamic elements:

Strategy 1: Use Relative & Attribute-Based XPaths (Best Practice)

Avoid relying on auto-generated absolute XPaths (e.g., /html/body/div[2]/div[1]/span[3]) or dynamic IDs containing generated numbers (e.g., id="button-12948").

Instead, write relative XPaths based on stable attributes, partial text, or ancestor-child relationships.

Strategy 2: Explicit Synchronization & Waiting

Dynamic web applications (React, Angular, AJAX) often render elements with a delay. Interacting with an element before it finishes loading will throw element-not-found errors.

  • GUI: Web Wait Until Step: Use this step set to Element Visible or Element Clickable before executing GUI: Set Values or GUI: Mouse Actions.

  • GUI: Web Element Condition Step: Checks if a dynamic element exists or is hidden before proceeding, allowing you to branch logic using standard hops.

Strategy 3: Handle Dynamic Frames & Iframes

If elements dynamically load inside changing iframe elements:

  1. Identify the stable selector for the iframe (or use the Frame Locator step / iframe XPath option).

  2. Specify the Iframe XPath parameter directly inside steps like GUI: Set Values, GUI: Mouse Actions, or GUI: ComboBox Actions so the step knows where to search inside the DOM.

Strategy 4: Fallback to GUI Spy / Element Property Actions

  • GUI Spy Toolbar: Use GUI Spy in Process Studio to inspect the DOM structure and evaluate alternative attributes (e.g., name, aria-label, data-testid, title).

  • GUI: Element Property Actions: Dynamically retrieve properties or attributes of an element at runtime to construct dynamic selectors downstream if needed.