使用Chrome DevTools(console ande elements panel)進行xpath/css/js定位

Google Chrome provides a built-in debugging tool called "Chrome DevTools" out of the box, which includes a handy feature that can evaluate or validate XPath/CSS selectors without any third party extensions.

This can be done by two approaches:

• Use the search function inside Elements panel to evaluate XPath/CSS selectors and highlight matching nodes in the DOM.
• Execute tokens $x("some_xpath") or $$("css-selectors") in Console panel, which will both evaluate and validate.

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.
   • If elements are matched, they will be returned in a list. Otherwise an empty list [ ] is shown.

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

　　

• If the XPath or CSS selector is invalid, an exception will be shown in red text. For example:

$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.

$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.

 

js定位

 

console里面執行javascript代碼，操作dom對象。

每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。

通過id獲取
　　document.getElementById(“id”)
通過name獲取
　　document.getElementsByName(“Name”) 返回的是list
通過標簽名選取元素
　　document.getElementsByTagName(“tag”)
通過CLASS類選取元素
　　document.getElementsByClassName(“class”)
兼容性：IE8及其以下版本的瀏覽器未實現getElementsByClassName方法
通過CSS選擇器選取元素
　　document.querySelectorAll(“css selector")
兼容性：IE8及其以下版本的瀏覽器只支持CSS2標准的選擇器語法

 

 

轉自：

https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/

https://blog.csdn.net/jamieblue1/article/details/101075193