https://www.cnblogs.com/ninefish/p/9759129.html

Selenium對網(wǎng)頁的控制是基于各種前端元素的，在使用過程中，對于元素的定位是基礎(chǔ)。元素定位主要核心的兩種方法是CSS 和XPTH定位，CSS是倚天劍，XPATH是屠龍刀，CSS元素定位上性能優(yōu)于XPATH,優(yōu)先使用CSS定位。這兩種定位方式組合基本能完全查找到需要定位的元素。

? ? ? 下面介紹幾種結(jié)合谷歌瀏覽器在UI自動化腳本編程過程中，如何快速編寫CSS和XPAT元素定位;如何快速驗(yàn)證自己編寫的CSS和XPATH元素定位是否正確。

一：谷歌瀏覽器自帶的devtools（瀏覽器按住F12）-【獲取】

1.谷歌瀏覽器F12,進(jìn)入devtools面板

2.選擇需要定位的元素，右鍵,任意選擇 select（css）或xpath

3.直接復(fù)制，就是對應(yīng)的定位

默認(rèn)定位的會比較長，可以自己在修改下，然后用SelectorGadget和Xpath Helper進(jìn)行驗(yàn)證是否正確（具體下面會介紹）

二：谷歌瀏覽器chrome上的firepath ----chropath插件【獲取，檢查】

1.下載安裝chropath插件

2.谷歌瀏覽器F12,進(jìn)入devtools面板

3.選擇元素，選擇chropath

4.獲取相對相對xpath，絕對xpath和CSS選擇器

也可以在devtools面板中編輯，檢查并驗(yàn)證XPath和CSS選擇器是否正確

三：谷歌瀏覽器使用SelectorGadget和Xpath Helper獲取xpath和css path【獲取，檢查】

在谷歌瀏覽器中使用SelectorGadget和Xpath Helper兩個(gè)插件

A.SelectorGadget使用方法如下：

打開一個(gè)網(wǎng)頁，例如www.hao123.com;

開啟SelectorGadget（點(diǎn)擊一個(gè)放大鏡圖案的按鈕即可）;

移動鼠標(biāo)箭頭到一個(gè)頁面元素上并單擊，該頁面元素會變成綠色，SelectorGadget的文本框內(nèi)顯示出被選中頁面元素的css path類型的定位字符串?！癱lear”按鈕可以清空定位字符串，“clear”按鈕中的數(shù)字是指定位字符串可以匹配的頁面元素個(gè)數(shù)，其它具有相同定位字符串的頁面元素都將變?yōu)辄S色。單擊這些黃色的頁面元素，這些元素變?yōu)榧t色，表示剔除它們，用這種方式不斷改變定位字符串，最終生成被選中元素的特有的定位字符串。

單擊“xpath”按鈕，可以生成被選擇元素的xpath定位字符串，復(fù)制xpath定位字符串后，可以使用Xpath Helper擴(kuò)展程序，驗(yàn)證xpath定位字符串能夠匹配的頁面元素個(gè)數(shù)。

B.SelectorGadget使用方法如下：

1.打開新選項(xiàng)卡并導(dǎo)航到任何網(wǎng)頁。

2.按Ctrl-Shift-X，或單擊工具欄中的XPath Helper按鈕，打開XPath Helper控制臺。

3.在鼠標(biāo)懸停在頁面上的元素上時(shí)按住Shift鍵。查詢框?qū)⒉粩喔乱燥@示鼠標(biāo)指針下方元素的XPath查詢，結(jié)果框?qū)@示當(dāng)前查詢的結(jié)果。

4.如果需要，直接在控制臺中編輯XPath查詢。結(jié)果框?qū)⒘⒓捶从掣?顯示對應(yīng)的位置,可以很方便的幫助我們判斷xpath語句是否書寫正確

5.重復(fù)步驟（2）關(guān)閉控制臺。

四：使用chrome console檢查css selector/xpath的有效性【檢查】

步驟?

1. 按F12打開chrome的開發(fā)者工具；?

2. 再按Esc鍵調(diào)出console?

經(jīng)過這倆步驟，chrome的Elements和Console展示在同一個(gè)窗口，便于查看。

$(selector)和$$(selector)

$x(path)

$x(path)返回的是一個(gè)數(shù)組，數(shù)組中即為與xpath匹配的所有元素。