Using XPaths and CSS Selectors
Selectors are used to locate elements on a web page. ObservePoint uses them to find items to click on, enter text into, and to do other interactions in web 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:
- Name attribute
- CSS selector
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
A CSS selector for the blog link's anchor tag might look like this:
An XPath to the same blog link (above) on jpstyle.us might look like this:
Testing in the Browser
$x("<span style="color: #800000;"><xpath></span>")
$$("<span style="color: #800000;"><css_selector></span>")
For example, use the following to select the Blog link at http://jpstyle.us. The red text is the selector.
$x('<span style="color: #800000;">//*[@id="secondary-menu"]/li/a</span>')
$$("<span style="color: #800000;">a[href='/blog']</span>")
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.