Capture Web Elements
Capture a web element before using it in click, input, or other element-based commands. In the sidebar, open Element Library and select Capture New Elements.
The captured elements will be displayed below. Click to select the element. When the mouse moves over the element, buttons for modifying element attributes and deleting elements will be displayed.
After capture mode starts, move the pointer over the webpage. The detected element is outlined in green; press Ctrl+left-click to capture it.
Capture similar web elements
Use similar-element capture for repeated items such as products or contacts. In the sidebar, select Web Elements > Capture Similar Elements. Ctrl+left-click the first item, then Ctrl+left-click a second similar item. The element-property editor opens after the second capture.
Example: Get all product names in the product list on the JD homepage
Capture descendant web elements
Capture a descendant of an existing element, for example a price inside a captured product item. Move the pointer over the captured element and select the descendant-capture button. Descendants of descendants cannot be captured.
Capture elements in local HTML files
To capture elements from a local HTML file, open the browser's extension settings, select Runavelo, enable Allow access to file URLs, refresh the page, and start capture again.
Capture an element after a delay
When the pointer moves over some webpage elements, the hover state temporarily changes attributes such as class or style. Capturing those temporary values can make the locator fail later, when the pointer is no longer hovering over the element.
Use delayed capture in this case: press Ctrl+Alt+left-click to select the element, then move the pointer away. Runavelo locks the selected element and waits two seconds before reading its attributes, allowing the page to leave the hover state.
The target is selected immediately, but its attributes are collected after the temporary hover state disappears.
Edit element attributes
After capturing a web element, select only the nodes and attributes needed to identify it. Runavelo combines them into a CSS selector and searches with document.querySelectorAll.
When text is selected, Runavelo first uses the CSS selector, then compares element.innerText with the captured text. A successful match receives an ms-rpa-id="iframeId|index" attribute, which is used to find the element later.
For example, the following captured element produces this CSS selector: MAIN.svelte-svw4ad BUTTON.download.svelte-ygzixe[data-svelte-h="svelte-1no3n1s"]:nth-child(1):nth-of-type(1)
If the element node contains IFRAME, be sure to check IFRAME, otherwise the element cannot be found correctly.
Ignore an attribute value
Clear an attribute value when only the attribute's presence matters. For example, an empty style value matches any element that has a style attribute. This does not apply to the class attribute.
Match an attribute value that contains text
Add * after the attribute name. For example, use this mode to find elements whose style value contains color: red. This mode does not apply to the class, text, or index attributes.
Match an attribute value that starts with text
Add ^ after the attribute name. This mode does not apply to the class, text, or index attributes.
Match an attribute value that ends with text
Add $ after the attribute name. This mode does not apply to the class, text, or index attributes.
Match a word in a space-separated attribute value
Add ~ after the attribute name. This mode does not apply to the class, text, or index attributes.
- Select meaningful nodes and attributes, such as
LI,TABLE,list, oritemfor product-list entries. - Do not select apparently generated attributes such as
wpoey8,rpdrk4, or1nzqfx. - Select only the essential nodes and attributes. Selecting everything makes the locator more likely to break after small webpage changes.
Select a node name to edit it, for example to change DIV to SPAN. Use Add to add a node or attribute.
After editing, select Verify Element. A normal locator should match exactly one element. If it matches multiple elements, refine the selected nodes and attributes. Similar-element locators are expected to match multiple elements.