一、前言

上篇文章中我們成功編寫(xiě)并啟動(dòng)了第一個(gè)selenium腳本。那Selenium是怎樣知道我們想要操作哪個(gè)元素的呢？
這篇文章將為你講解Selenium的頁(yè)面操作原理和高效的元素定位方法。

(PS:個(gè)人在用的人工智能學(xué)習(xí)網(wǎng)站推薦給大家：captainai，覺(jué)得不錯(cuò)請(qǐng)三連支持一下）

二、Selenium是如何操作頁(yè)面元素的？

Selenium首先會(huì)查找我們給予的元素地址是否存在，如果存在則進(jìn)行我們指定的操作。
例如上篇文章中的這行代碼，它用于在百度搜索框輸入曲鳥(niǎo) csdn：

# 在輸入框輸入：曲鳥(niǎo) csdndriver.find_element(By.XPATH, "http://*[@id="kw"]").send_keys("曲鳥(niǎo) csdn")

代碼解釋：首先，我們通過(guò)【driver.find_element】方法，給予了兩個(gè)參數(shù)：

1.定位的方法：Xpath；
2.元素地址：//*[@id="kw"]；

通過(guò)這兩個(gè)參數(shù)得以讓Selenium能夠找到百度的搜索框元素，再通過(guò)【send_keys】方法傳遞想要輸入的內(nèi)容曲鳥(niǎo) csdn，Selenium就會(huì)在其進(jìn)行輸入。

上面的例子使用的定位方法是Xpath，除此之外Selenium還支持七種（共八種）定位方法：

是不是感覺(jué)有點(diǎn)多？但我們無(wú)需全部掌握它們！

我們無(wú)需花太多精力在學(xué)習(xí)定位上，雖然我們的每個(gè)自動(dòng)化操作都需要進(jìn)行元素定位，但瀏覽器的調(diào)試工具已經(jīng)可以幫我們獲取元素地址了。

有小伙伴會(huì)說(shuō)，通過(guò)工具定位出來(lái)的元素地址一長(zhǎng)串是否會(huì)影響調(diào)試和體驗(yàn)?zāi)兀?br /> 其實(shí)擔(dān)心是多余的，首先元素地址不同于代碼，它不需要具備可讀性！只要能夠定位成功且有一定的穩(wěn)定性就行了！其次，如果你為了減少元素地址的長(zhǎng)度，而花時(shí)間去手寫(xiě)元素地址的話，這個(gè)時(shí)間會(huì)是通過(guò)工具定位的數(shù)倍！自動(dòng)化測(cè)試本就需要高效的完成腳本，減少自動(dòng)化用例編寫(xiě)的時(shí)間占比，從而達(dá)到高效自動(dòng)化的目的。現(xiàn)在為了元素地址的可讀性來(lái)增加自動(dòng)化編寫(xiě)的時(shí)長(zhǎng)是得不償失的！并且現(xiàn)在隨著react、vue的普及，前端組件化應(yīng)用的越來(lái)越多，通過(guò)【id、name、class】這些定位方式已經(jīng)不太適用了 (前提是開(kāi)發(fā)不愿意加唯一標(biāo)識(shí)(唯一的【id、name】等)的情況下) 所以完全沒(méi)必要花大量的時(shí)間去搞懂八種定位，只需要簡(jiǎn)單了解即可。
另外一點(diǎn)，Xpath定位很強(qiáng)大，花時(shí)間搞懂Xpath遠(yuǎn)比花時(shí)間去學(xué)習(xí)完八種定位要高效的多！

三、高效的定位方法和Xpath定位講解

1. 利用瀏覽器工具

【Chrome】瀏覽器自帶了定位方式的獲取工具，按下F12（右鍵鼠標(biāo)，點(diǎn)擊"檢查"）也可以，按圖中的步驟操作就可以獲取到需要操作的元素地址

但在我們實(shí)際應(yīng)用過(guò)程中，會(huì)出現(xiàn)定工具獲取的Xpath定位地址，代碼跑起來(lái)定位不到的情況！這種情況一般可能是因?yàn)樵氐膇d是動(dòng)態(tài)的（重新訪問(wèn)頁(yè)面元素的id會(huì)變）或者所屬層級(jí)沖突（操作頁(yè)面步驟的順序改變導(dǎo)致層級(jí)優(yōu)先級(jí)不同）這個(gè)時(shí)候就可以借助Xpath的高級(jí)運(yùn)用（文本關(guān)鍵字匹配，條件匹配等）來(lái)解決。

2.Xpath定位簡(jiǎn)單介紹

1. 絕對(duì)定位

通過(guò)【Chrome】自帶的定位工具，選擇【Copy full XPath】得到的就是xpath絕對(duì)路徑 （非特殊情況不建議使用，使用相對(duì)定位即可）

路徑代碼

/html/body/div/div[2]/div[5]/div[1]/div/form/span[1]/input

2. 相對(duì)定位

通過(guò)【Chrome】自帶的定位工具，選擇【Copy XPath】得到的就是xpath相對(duì)路徑 （推薦使用）

路徑代碼

下面的代碼會(huì)查找id等于kw的元素：

//*[@id="kw"]

3. Xpath代碼解釋

1. //和/的區(qū)別和含義：

//代表會(huì)在所有節(jié)點(diǎn)去進(jìn)行查找，如果要指定層級(jí)或逐層查找的話可以使用/。

舉個(gè)例子：

下面的xml代碼含義：一個(gè)班級(jí)下有兩個(gè)學(xué)生【曲鳥(niǎo) 男】、【張三 女】：

<class><student>  <name>曲鳥(niǎo)name>  <gender>男gender>student><student>  <name>張三name>  <gender>女gender>student>class>

1）現(xiàn)在我們想獲取第一個(gè)學(xué)生的信息可以這樣寫(xiě)：

/class/student[1]

輸出結(jié)果

  <name>曲鳥(niǎo)name>  <gender>男gender>

2）想獲取第一個(gè)學(xué)生的名稱可以這樣寫(xiě)：

 /class/student[1]/name

輸出結(jié)果

曲鳥(niǎo)

上面的代碼是一層一層（class->student->name），那是否可以不指定層級(jí)，直接查找名稱呢？

3）通過(guò)//獲取學(xué)生名稱：

/class/name

甚至還可以這樣寫(xiě)

//name

輸出結(jié)果

張三

雖然獲取到姓名了，但變成張三了，如果你通過(guò)//name[1]的方式來(lái)獲取的話，會(huì)發(fā)現(xiàn)執(zhí)行失效！
所以，//是不能夠指定下標(biāo)的，如果想獲取曲鳥(niǎo)的話可以通過(guò)校驗(yàn)文本的方式來(lái)匹配：

//name[text()="曲鳥(niǎo)"]

Xpath在線練習(xí)地址：https://www.bejson.com/testtools/xpath/

2. *的含義

*代表匹配任何元素節(jié)點(diǎn)，通過(guò)分析下圖百度搜索框的源碼發(fā)現(xiàn)它的標(biāo)簽為input，那么我們將代碼改為這樣//input[@id="kw"]也是可行的。

3. []的含義

[]中用于放置具體的匹配規(guī)則，之前代碼中的[@id="kw"]代表匹配id等于kw的元素；分析上圖紅框標(biāo)簽的屬性會(huì)發(fā)現(xiàn)，如果替換為[@name="wd"]也是能夠匹配成功的；還可以改寫(xiě)為[@class="s_ipt"];

4. Xpath的模糊匹配和條件匹配

Xpath中=用于全匹配，那它支持模糊匹配嗎？

答案是支持的，Xpath中=必須一模一樣才算匹配成功。Xpath也可以通過(guò)contains進(jìn)行模糊匹配,之前代碼中的[@id="kw"]可以改寫(xiě)為[contains(@id, "k")]這樣也能夠匹配成功。它的含義為匹配id名稱包含k的元素。

如果有兩個(gè)id都包含k那不是就匹配失敗了嗎？

是的，這個(gè)時(shí)候就可以使用Xpath的條件判斷，例如有兩個(gè)元素，他們的id分別為：kw1、kw2。我們想通過(guò)模糊匹配來(lái)匹配kw1的話，可以這樣寫(xiě)[contains(@id,"k") and contains(@id,"1")]，代碼含義為匹配id名稱既包含k又包含1的元素

Xpath可以通過(guò)顯示的文本進(jìn)行匹配嗎？

可以的，下面是百度頁(yè)右上角【新聞】標(biāo)簽的源碼

通過(guò)文本匹配的話，代碼可以這樣寫(xiě) （類似于八大定位方式中的By.LINK_TEXT）：

 //*[text()="新聞"]

通過(guò)聞字模糊匹配的話可以這樣寫(xiě) （類似于八大定位方式中的By.PARTIAL_LINK_TEXT）：

//*[contains(text(),"聞")]

四、總結(jié)

Xpath的功能還有很多，但對(duì)于自動(dòng)化來(lái)講掌握上述這幾種常用方法已經(jīng)足夠了！萬(wàn)一還不夠用，我們還可以通過(guò)airtest【圖像識(shí)別】的定位方法來(lái)解決。
可以閱讀 重復(fù)元素如何定位區(qū)分？Selenium的缺點(diǎn)讓圖像識(shí)別來(lái)彌補(bǔ) 這篇文章進(jìn)行了解。后續(xù)也會(huì)在該專欄的實(shí)戰(zhàn)篇中進(jìn)行詳細(xì)圖像識(shí)別定位的教學(xué)，歡迎訂閱本專欄！