How to search by Xpath/Css in Chrome Developer Tools?

The Chrome Developer Tools are a set of web authoring and debugging tools built into Google Chrome.

You can use Xpath or Css by using the search function inside Elements panel. Let’s see how we can do this.

  • Press F12 to open up Chrome DevTools.
  • Elements panel should be opened by default.
  • Click on some element.
  • Press Ctrl + F to enable DOM searching in the panel.
  • Type in XPath or CSS selectors.
  • If system finds something, result will be highlighted in DOM.

 

XpathChrome

You can check your Xpath/Css by evaluating javascript code in Chrome Console. 

  • Press F12 to open up Chrome DevTools.
  • Switch to Console panel.
  • Type in XPath like $x(“.//*[@id=’id’]”) to evaluate and validate.
  • Type in CSS selectors like $$(“#id”) to evaluate and validate.
  • Check results returned from console execution.

XPATH example:

XpathConsoleChrome

CSS example:

CSSConsole

3 thoughts on “How to search by Xpath/Css in Chrome Developer Tools?

  1. Pingback: Identifying and validating XPath selectors in Selenium - Mind & Coffee

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s