Element Picker

The Element Picker is the primary way to select elements on a web page for automation.

How to Use

1. In the Visual Builder, click the pointer icon next to any selector field.
2. Your cursor changes to a crosshair.
3. Move your mouse over the page. Elements are highlighted with a red overlay.
4. Click an element to select it.
5. A refinement panel appears.

Refinement Panel

After clicking an element, you see:

Button	Description
✓ (Confirm)	Accept the current selection and generate the selector
✗ (Exclude)	Exclude this element and refine the selection

Excluding Elements

If the initial selection includes elements you don’t want:

1. Click ✗ on the unwanted element.
2. The element is excluded from the selection.
3. The selector is refined automatically.
4. Repeat until only the desired elements are selected.
5. Click ✓ to confirm.

Selector Generation

The element picker generates the most appropriate selector type:

• CSS selector for elements with stable classes or IDs
• XPath for complex nested structures
• Text selector for elements identified by their text content

Text Selection

You can also select text directly:

1. Click the pointer icon.
2. Highlight text on the page.
3. The selected text becomes a text= selector.

Tips

Tip	Description
Click precisely	Click the exact element you want, not a parent container
Use exclusion	If too many elements are selected, use ✗ to exclude unwanted ones
Check the generated selector	Verify the selector in the field after selection
Use data attributes	Elements with data-id or data-product-id make stable selectors
Avoid auto-generated classes	Classes like .css-1a2b3c change frequently