How to evaluate and validate XPath and CSS selectors

There are many scenarios where developers need a valid XPath/CSS selector definition.

For instance, JavaScript configuration for GuideChimp tours needs a valid element selector, which will be used to highlight an HTML/DOM element or place a beacon.

What is the easiest way to validate XPath / CSS selectors?

Most of the browsers provide a built-in developer tools, which includes a handy feature that can evaluate or validate XPath/CSS selectors without any third-party extensions: browser console.

Step-by-step instructions:

  • Open page containing HTML/DOM you would need to verify selector on; in our example, we’ll be using page
  • Open Browser’s DevTools panel
    • Chrome, Firefox: press F12
    • Safari: use the shortcut Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux)
  • Switch to Console tab
  • Type in XPath or CSS selectors to evaluate like:

If there are matched elements, the console output will contain a matched DOM element; otherwise null, undefined or an exception will be thrown if the locator is invalid or doesn’t exist.

Validate CSS selector for GuideChimp

Most of the browser will even highlight HTML element on mouse hover over the console output.

Having all CSS selectors properly defined, GuideChimp will show an interactive guided tour for your website or application.