Web Element Selectors
Overview
Web automation activities interact with elements on a web page, such as buttons, text fields, tables, dropdowns, and links. To enable reliable interaction with these elements, IntelliBuddies provides a visual element selection mechanismcalled Web Element Selectors.
Instead of manually identifying elements using complex expressions, you can visually select elements directly from the browser. IntelliBuddies captures and stores the necessary information internally to locate the element during automation execution.
Selecting Web Elements Visually
Most web automation activities expose an Element Path property that allows you to select a target web element visually.
How to select a web element
- In the activity properties panel, click the ellipsis [...] next to the Element Path field.
- This opens the Browser Selector dialog.
- Configure the selector options:
| Option | Description |
|---|---|
| Select the browser instance | Choose an existing browser instance or launch a new one |
| Browser | Select the browser type |
| URL | Specify the URL for a new browser or select from active browser URLs |
- Click OK.
- The selector enters selection mode.
- Hover over elements in the browser to highlight them.
- Right-click the desired element and select Send XPath.
IntelliBuddies stores the selected element internally using a structured selector representation.
The Element Path property is available in the following Web Automation activities:
- Click Element
- Click Link
- Click Download Link
- Focus Textbox
- Get Element Attributes
- Set Element Attribute
- Set Text Field Value
- Set Dropdown Field Value
- Set Checkbox Field Value
- Set Radio Button Field Value
- Hover Mouse Over Element
- Get Element Value
- Scroll To Element
Selecting Elements Inside IFrames
Some web pages embed content inside iframes (inline frames). Elements inside an iframe cannot be accessed directly from the main page and must be selected through the iframe context.
IntelliBuddies handles this explicitly using the Get Iframe activity.
How to select an element inside an iframe
- Add the Get Iframe activity to the workflow.
- In the Iframe Path field, click the dropdown and select Select Element.
- The Browser Selector dialog appears with an additional Iframe option:
| Option | Description |
|---|---|
| Select the browser instance | Launch or reuse a browser instance |
| Browser | Select the browser type |
| URL | Select or specify the page URL |
| Iframe | Displays available iframes and their paths |
- Select the appropriate iframe from the list.
- Optionally preview the iframe using the eye icon.
- Click OK.
- Select the desired element inside the iframe using the same visual selection approach.
The selected iframe and element paths are captured and returned in a structured format.
Selector Representation and Storage
Internally, IntelliBuddies represents element selectors as a hierarchical path structure. This improves selector stability and allows fine-grained control when dealing with dynamic web pages.
Path Parameters
Most activities expose a Path Parameters field that stores the selector definition.
- Click the ellipsis [...] next to Path Parameters to open the Edit XPath dialog.
- The dialog provides two views: - Hierarchical XPath - Raw JSON XPath
Hierarchical XPath
The hierarchical view displays the element path from the root parent to the target element.
Each row represents a level in the hierarchy:
| Option | Description |
|---|---|
| Path | XPath of the sub-element |
| Type | Element, Iframe, or Shadowroot |
| Action | Add or remove hierarchy levels |
Supported element types:
| Type | Description |
|---|---|
| Element | Standard DOM element |
| Iframe | Embedded document |
| Shadowroot | Encapsulated DOM structure |
Raw JSON XPath
You can also define or modify the selector directly in Raw JSON XPath format.
If both Hierarchical XPath and Raw JSON XPath are provided, Raw JSON XPath takes precedence.
Only the leaf path (the final element in the hierarchy) is used as the effective selector during execution.
XPath Encoding
If an XPath contains special characters, they must be encoded before use.
The following table lists commonly used special characters and their encoded values:
Best Practices for Stable Selectors
- Prefer element attributes that are stable across page reloads.
- Avoid absolute paths when possible.
- Use hierarchical selectors to handle dynamic page structures.
- Re-select elements if the web page layout changes significantly.
This approach ensures selectors remain robust, maintainable, and resilient across UI changes while keeping element selection visual and straightforward for the user.