Jacobvu84 / selenium-vietnam-training-course

Questions Tracking
7 stars 5 forks source link

Locating Elements by CSS wtih developer mode in Chrome #57

Open Jacobvu84 opened 5 years ago

Jacobvu84 commented 5 years ago

xpath-css-selectors

From Elements panel


1. Press F12 to open up Chrome DevTools.
2. Elements panel should be opened by default.
3. Press Ctrl + F to enable DOM searching in the panel.
4. Type in XPath or CSS selectors to evaluate.
5. If there are matched elements, they will be highlighted in DOM.

However, if there are matching strings inside DOM, they will be considered as valid results as well. For example, CSS selector header should match everything (inline CSS, scripts etc.) that contains the word header, instead of match only elements.

From Console panel


1. Press F12 to open up Chrome DevTools.
2. Switch to Console panel.
3. Type in XPath like $x(".//header") to evaluate and validate.
4. Type in CSS selectors like $$("header") to evaluate and validate.
5. Check results returned from console execution.