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:

  1. ID
  2. Name attribute
  3. CSS selector
  4. 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:

  1. Right click on an element
  2. Choose Inspect
  3. Locate the element in the Elements panel of the Developer Tools
  4. Right click on the element's line
  5. Choose Copy -> Copy Selector or Copy -> Copy XPath
  6. 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

Syntax

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:
//*[@id="secondary-menu"]/li[1]/a


A CSS selector in the ID field of a click action.

An XPath for the same element in the ID field of a click action.

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("<span style="color: #800000;"><xpath></span>")
CSS: $$("<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.

XPath:  $x('<span style="color: #800000;">//*[@id="secondary-menu"]/li[1]/a</span>')
CSS: $$("<span style="color: #800000;">a[href='/blog']</span>")

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.