CODEWITHSUNDEEP
htmlgoogle-chromecss-selectorsgoogle-chrome-devtools
Michael Durrant
Michael Durrant

Reputation: 96454

How to use Chrome Developer Tools to find elements based on a CSS selector? (e.g., class or id)

Long time automation developer here (just for context). It's been bugging me for quite a while that the dev tools in chrome used to find elements just don't seem to work as I expect. Hopefully someone can point out what I'm doing wrong.

Looking at, say, the Sauce Labs page: https://saucelabs.com/blog/selenium-tips-finding-elements-by-their-inner-text-using-contains-a-css-pseudo-class

That page has div's and anchors:

enter image description here

and indeed I can do find ('a') or find('div'). But why do I have a problem using classes or id's ?

enter image description here

Upvotes: 10

Views: 55329

Answers (2)

Duma
Duma

Reputation: 194

You can use jquery code in chrome console, for example if you want to find something with class of "foo" you can write $('.foo') or a id of "bar" you write $('#bar')

You can read all about it here

Also you can just google what you want "Jquery how to find a div with id"

Upvotes: 6

BoltClock
BoltClock

Reputation: 723388

The find() method refers to window.find(), a non-standard API for the browser's built-in Find function. It does not find web elements the same way Selenium or Capybara do, and so it does not parse the input as a selector.

You find elements with selectors in Chrome DevTools using document.querySelector() or document.querySelectorAll(). There are no special methods in Chrome DevTools for this, however it does provide the $() and $$() aliases (respectively) to save you time and keystrokes.

Upvotes: 19

Related Questions