A Web page element is any of the many building blocks making up a Web page. An element can be a snippet of text, an image, a link, a video... If it's on the page, it's an element.

An element path is a CSS3 selector. Because CSS selectors have certain limits in that they do not support selecting parents or match on text, we have added a few pseudo-selectors to make it easy to match any element you might want.

:visible
Selects only visible elements. Visibility is determined by whether an element has both width and height greater than 0, like jQuery.
​
:eq($index)
​Selects a specific element in group of matched elements, like jQuery.
​
:first / :last
​Selects the first/last element in a group of matched elements.
​
:self
​Selects the element itself. Useful when matching current scope in a loop/iteration.
​
:prev / :next
​Selects the previous or next element for every matched element.
​
:parent
​Selects the parent of every matched element.
​
:closest($selector)
​Selects the closest parent element that matches $selector. Matches only content, not HTML tags or attributes.
​
:text_contains("$text")
​Selects elements containing $text. Matches only content, not HTML tags or attributes.
​
:text_matches("$regex")
​Selects elements matching the regular expression $regex. Matches only content, not HTML tags or attributes.
​
:text_is("$regex")
​Selects elements matching $text exactly. Matches only content, not HTML tags or attributes.
​
:text_is($in['$text'])
​Selects elements exactly matching an input value. Matches only content, not HTML tags or attributes.
​
:text_start("$text")
​Selects elements beginning with $text. Matches only content, not HTML tags or attributes.
​
:text_end("$text")
​Selects elements ending with $text. Matches only content, not HTML tags or attributes.

:text_bestmatch("$text")
​Selects elements most closely matching $text. Matches only content, not HTML tags or attributes.

You can include your input and output variables in your dexi.io CSS3 selectors:

$in['input field'] / $out['output field']
​Includes the input or output variable without any added quotes.
​

Example:

@in['input field'] / @out['output field']
​Includes the input or output variable with added quotes.
​

Example:

W3Schools introduction to CSS selectors:
​http://www.w3schools.com/cssref/css_selectors.asp 

Mozilla Guide to CSS selectors:
​https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors 

jQuery selectors:
​http://api.jquery.com/category/selectors/
​

When iterating though elements, the robot uses something we call scope or DOM (Document Object Model) scope. Each iteration of a loop will create a scope for the current element in the iteration list, and any subsequent path selectors will be relative to this scope. See the illustration below for a visual representation of how DOM scope works.

Scopes are automatically cleared when changing to a new page, but you can manually clear a scope using the Clear Scope step. Reference elements outside the DOM scope using pseudo-selectors like :parent or :closest(.something) that travel up the DOM tree.

You may also define your own DOM scopes, and you can have several scopes within scopes. This can be useful if you have some snippet that expects a certain path, and that path can be found in multiple places. Then you can set a container for the data you want to extract and use the same snippet in multiple places.