1. 程式人生 > 其它 >selenium WEB自動化——八種元素元素定位

selenium WEB自動化——八種元素元素定位

序言:

想要實現自動化,則必須要掌握如下四個流程:定位元素,操作元素,獲取返回結果,斷言(判斷測試結果與期望結果是否一致),測試結果自動輸出。其中元素定位在這四個環節中是占主導地位,如果一個頁面上的元素不能被定位到,那後面的操作就無法繼續了。

以下記錄webdriver提供的八種基本元素定位方法,就以百度為例講解如下八種元素定位:

1. id定位: find_element_by_id()

2. class定位:find_element_by_class_name()

3. tag定位:find_element_by_tag_name(s)

4. name定位: find_element_by_name()

5. link定位:find_element_by_link_text()

6. partial_link定位:find_element_by_partial_link_text()

7. xpath定位:find_element_by_xpath()

8. CSS定位:find_element_by_css_selector()

元素定位八大方法:

接下來以Chrome瀏覽器的百度網頁的輸入框作為記錄物件

一、id定位: find_element_by_id()

1. 通過F12進入除錯頁面

2. 在除錯頁面中單擊除錯頁面左上角的指標

3. 將箭頭移動到百度搜索輸入框上,輸入框呈高亮狀態,單擊輸入框可直接定位在輸入框的web屬性上。如下圖的藍色部分就是定位到的百度輸入框的屬性:

  <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

  4.從上面定位到的元素屬性中,可以看到有個id屬性:id="kw",下面通過id屬性到這個元素。

 5. 定位到搜尋框後,用send_keys()方法實現在輸入框中輸入要查詢的內容。  

1 # coding:utf-8
2 from selenium import webdriver
3 
4 
5 driver = webdriver.Chrome()
6 driver.get("https://www.baidu.com
") 7 element = driver.find_element_by_id("kw") 8 element.send_keys("python")

二、tag定位:find_element_by_tag_name()

  1. 檢視元素屬性的方法同ID定位,百度輸入框的元素屬性:<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

  2. 從上面定位到的元素屬性中,可以看到tag(標籤)屬性,如上面搜尋框的元素屬性是最前面的input,下面通過tag屬性到這個元素。

  註釋:當前百度頁面中元素為input的並非唯一,所以無法通過find_element_by_name()定位到元素名稱為input的,以下用例只是tag定位的示範。

1 # coding:utf-8
2 from selenium import webdriver
3 
4 
5 driver = webdriver.Chrome()
6 driver.get("https://www.baidu.com")
7 element = driver.find_element_by_tag_name("input")
8 element.send_keys("python")

三、class定位:find_element_by_class_name()

  1. 檢視元素屬性的方法同ID定位,百度輸入框的元素屬性:<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

  2.從上面定位到的元素屬性中,可以看到class屬性:class="s_ipt",下面通過class屬性到這個元素。

1 # coding:utf-8
2 from selenium import webdriver
3 
4 
5 driver = webdriver.Chrome()
6 driver.get("https://www.baidu.com")
7 element = driver.find_element_by_class_name("s_ipt")
8 element.send_keys("python")

四、name定位: find_element_by_name()

  1. 檢視元素屬性的方法同ID定位,百度輸入框的元素屬性:<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

  2. 從上面定位到的元素屬性中,可以看到name屬性:name="wd",下面通過name屬性到這個元素。

1 # coding:utf-8
2 from selenium import webdriver
3 
4 
5 driver = webdriver.Chrome()
6 driver.get("https://www.baidu.com")
7 element = driver.find_element_by_name("wd")
8 element.send_keys("python")

五、link定位:find_element_by_link_text()

  1. 檢視元素屬性的方法同ID定位,百度一下頁面上的"hao123"這個按鈕的元素屬性:<aclass="mnav"target="_blank"href="http://www.hao123.com">hao123</a>

  2.從上面定位到的元素屬性中,可以看到是一對以<a>開頭,</a>結尾的從超連結(標準超連結都帶有href屬性,href等號後面的連結為跳轉的網址),可以此超連結的文字資訊為:hao123,下面通過hao123屬性定位到這個元素,然後模擬滑鼠的單擊操作實現訪問hao123頁面

1 # coding:utf-8
2 from selenium import webdriver
3 
4 
5 driver = webdriver.Chrome()
6 driver.get("https://www.baidu.com")
7 element = driver.find_element_by_link_text("hao123")
8 element.click()

六、partial_link定位:find_element_by_partial_link_text()

  1. 檢視元素屬性的方法同ID定位,百度一下頁面上的"hao123"這個按鈕的元素屬性:<aclass="mnav"target="_blank"href="http://www.hao123.com">hao123</a>

  2. 有的超連結中他的文字資訊可能比較長,如果輸入全稱的話,會顯得很長,這時候可以用一模糊匹配方式,擷取其中一部分字串就可以了,如超連結中的文字資訊“hao123”,只需輸入“o123”也可以定位到,如下:

1 # coding:utf-8
2 from selenium import webdriver
3 
4 
5 driver = webdriver.Chrome()
6 driver.get("https://www.baidu.com")
7 element = driver.find_element_by_partial_link_text("hao123")
8 element.click()

七、xpath定位:find_element_by_xpath()

  以上定位方式都是通過元素的某個屬性來定位的,但假如一個元素它既沒有id、class、name屬性也不是超連結,或者其元素和屬性都不是唯一的,那通過以上的六種方法就定位不到對應的位置,這個時候可以用xpath解決。

   獲取元素的xpath路徑方法如下:

  1. 單擊鍵盤的F12按鈕調出debug頁面。

  2. 滑鼠左鍵單擊debug頁面的指標按鈕。

  3. 滑鼠選中debug視窗中的元素屬性中,點選滑鼠右鍵選擇copy->copy Xpath即可獲取到此元素的xpath路徑://*[@id="kw"],如下圖所示。

  4. 通過xpath定位元素並實現輸入。 

1 # coding:utf-8
2 from selenium import webdriver
3 
4 
5 driver = webdriver.Chrome()
6 driver.get("https://www.baidu.com")
7 element = driver.find_element_by_xpath('//*[@id="kw"]')
8 element.send_keys("python")

八、CSS定位:find_element_by_css_selector()

  1. CSS的元素獲取方法可參考xpath,在點選滑鼠右鍵選擇copy->copy selector即可獲取到此元素的CSS選擇器:#kw。

  2.通過CSS選擇器定位元素並實現輸入。

1 # coding:utf-8
2 from selenium import webdriver
3 
4 
5 driver = webdriver.Chrome()
6 driver.get("https://www.baidu.com")
7 element = driver.find_element_by_css_selector("#kw")
8 element.send_keys("python")