I’ve been using the browser console and querySelector
to inspect and find certain elements on a page. Today I learned that one can also use XPath in the search field inside the elements tab. It has a different syntax than querySelector
, but it can do things that CSS selectors cannot.
For example you can search for all elements with aria attributes with this XPath query:
//[@[starts-with(name(),"aria-")]]
You can find more examples and use cases for XPath in this blog post by Adrian Roselli:
adrianroselli.com/2021/04/xpath-for-in-browser-testing.html
Both Chrome and Firefox support XPath searches when in the DOM view of their dev tools.