大家用的最多的鼠標點擊，在拾取網頁的時候，經常發現好多看起來差不多的藍色框框，鼠標在邊緣稍微移動，框會變大或者變小，有意義的內容都一樣，爲什麼會出現這種情況呢？這是由現代網頁的層次邏輯決定的，比如百度首頁：
紅框的span和input，對應的有意義的都只有這個按鈕，但是你拾取的時候，可能拾取到 span，也可能拾取到 input
查找路徑工具
▲
這裏面的細微差別，給機器人設計人員代理了很大的障礙和不確定，爲了讓程序員具備外科手術級別的深入能力，我們在 9.0 中增了了一個專門的工具：
查看CSS Selector
▲
看起來和原來差不多吧？點擊紅框這裏，會彈出如下工具：
自定義CSS Selector
▲
這裏有設計器自動生成的 4 個 css selector，也可以自定義 selector
在這個工具的左邊，我們獲取了當前頁面完整的 html，如果層次搞錯了，你可以在你需要的層次上點擊右鍵，設置他爲你需要的元素
點擊自定義 selector，右邊會出現可以選擇的 attribute
通過勾選快速生成自己需要的 selector，這樣不用學 css selector 也有一定定製開發能力了，重中之重是：你要多次打開網頁，發現屬性中不變的部分，然後把它設置爲你的selector
你也可以根據提示編寫自己需要的 selector：
[attr=value] 表示具有屬性名attr的元素，且該屬性的值等於目標值value。
[attr~=value] 表示具有屬性名attr的元素，該屬性值是以空格分隔的一列單詞，且其中之一的值等於目標值value。
[attr|=value] 表示具有屬性名attr的元素，其值要麼等於目標value，要麼爲以value值開頭，隨後緊接連字符-（U + 002D）的值。它通常用於語言子代碼匹配。
[attr^=value] 表示具有屬性名attr的元素，且該屬性的值以value爲前綴。
[attr$=value] 代表具有的屬性名attr的元素，且該屬性的值以value爲後綴。
[attr*=value] 表示具有屬性名attr的元素，且該屬性的字符串中至少包含一個value值
更多功能
▲
除了編寫和查看能力，這個工具還提供了多種輔助能力，具體包括：
- 搜索 html 文本
- 對 selctor 進行語法檢查
- 根據當前選擇或者編寫的 selector，定位到網頁中，可以測試 selector 在頁面中匹配的正確性
- 將編寫完成的 selector 保存到原始的組件中去
這裏面最有用的就是定位到網頁了，這樣不用運行機器人流程就能快速診斷了