Find elements in Chrome dev tools using XPath or CSS selectors

I learned a quick trick today for querying DOM elements from the Chrome dev tools. I was watching one of Jason Lengstorf’s videos, Visual Testing Using Cypress and Applitools (with Angie Jones), when Angie mentioned using this for verifying queries while writing cypress tests.

This is really helpful for finding how many elements on a given screen might match a selector you want to use. This really can help avoid headaches while writing for your tests, so thanks Angie and Jason!

From Chrome’s dev tools console (press F12 or Ctrl+Shift+J) you can:

Search using XPath

$x(".//*[@id='Header']")

Search using CSS selectors

$$("#Header")