Selectors are used to locate elements on a webpage. ObservePoint uses them to find items to click on, enter text into, and to do other interactions in Journey and Audit actions. The default selector is an element's ID but alternate selectors can be used to increase the likelihood of a successful Journey when there is no ID on the target element.
Alternate Selector Types
The name attribute of an HTML element can be used as a selector.
Cascading Style Sheet (CSS) selectors is a syntax used in style definitions to locate items on a web page and apply styling to them (color, font family, positioning, etc). These selectors can also be used with jQuery to locate HTML elements.
XML Path Language (XPath) is a syntax for locating elements in structured documents such as an XML document or web page. XPath defines a kind of hierarchy of elements in the document.
You do not need to know XPath or CSS (though it might be helpful) in order to use them in actions.
The selectors are evaluated in an order as the Journey runs. If the ID does not resolve to a valid HTML element, the Journey will try other selector types according to the following order before failing:
ID
Name attribute
CSS selector
XPath
Note: Only the Chrome engine is compatible with XPath or CSS selectors in actions. If you want the CSS or XPath to be used, make sure the Chrome engine option is selected in the Journey or Audit setup.
Finding a CSS Selector or XPath
If you do not know a CSS Selector or XPath for an element, you can find it manually from the browser's Developer Tools. The general procedure is as follows, though there may be slight differences from browser to browser:
Right click on an element
Choose Inspect
Locate the element in the Elements panel of the Developer Tools
Right click on the element's line
Choose Copy -> Copy Selector or Copy -> Copy XPath
Paste the result into the ID field of an action
Right click the line in the Elements window to copy the XPath or CSS selector. Some browsers have an option to copy the CSS Selector. If that is not available, use the option to copy the selector.
Right click an element on the web page to inspect it. This opens the Elements window showing all the lines of code.
A CSS selector for the blog link's anchor tag might look like this:
a[href='/blog'
An XPath to the same blog link (above) on jpstyle.us might look like this:
Validating CSS Selectors as Input and Click Functions for Journeys
Testing in the Browser
You can test your XPath or CSS selector in Chrome's JavaScript console by wrapping it in a statement, like this:
XPath: $x("<xpath>")
CSS: $$("<css_selector>")
For example, use the following to select the Blog link at http://jpstyle.us. The grey marked text is the selector:
XPath: $x('//*[@id="secondary-menu"]/li[1]/a')
CSS: $$("a[href='/blog']")
Additional Resources
More details about XPaths and CSS selectors is beyond the scope of this document, but there are several sites on the web that teach about them or have reference materials, including these from W3Schools.com: XPath Introduction and CSS Selectors Reference.