python selenium-webdriver 下拉菜單處理 (九)

測試過程當中常常遇到下來菜單,好比說分頁,每頁顯示的條數,以及語言的切換,不少時候常常是如下來菜單的形式展示,下面咱們看一下selenium如何處理下來菜單。html

首先selenium 很人性化的給提供了一個Select的模塊,供處理下來菜單,首先咱們須要導入Select,經過from selenium.webdriver.support.select import Select來導入。web

Select中提供幾個用於定位的option的方法,下面看一下具體的方法測試

主要把Select方法總結了一下分爲三大類:ui

1.選擇列表spa

  • select_by_index(self, index)      #以index屬性值來查找匹配的元素並選擇;
  • select_by_value(self, value)           #以value屬性值來查找該option並選擇;
  • select_by_visible_text(self, text)     #以text文本值來查找匹配的元素並選擇;
  • first_selected_option(self)               #選擇第一個option 選項 ;

爲了測試以上的方法,從網上找的了一個簡單的頁面,來輔助測試3d

<html>
<body>
    <form>
        <select name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat" selected="selected">Fiat</option>
            <option value="audi">Audi</option>
        </select>
    </form>
</body>
</html>

針對按索引進行切換option屬性示例以下。經常使用方法code

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('file:///C:/Users/hunk/Desktop/select.html')
time.sleep(2)   #默認option顯示"Fiat"
S = Select(driver.find_element_by_name('cars')).select_by_index(0)  #實例化Select,按索引選擇option。索引以0開始
time.sleep(2)   #切換後option顯示"Volvo"
driver.quit()

針對按value進行切換option屬性示例以下。經常使用方法orm

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('file:///C:/Users/hunk/Desktop/select.html')
time.sleep(2)   #默認option顯示"Fiat"
S = Select(driver.find_element_by_name('cars')).select_by_value('saab')  #實例化Select,按value選擇option。這裏的value是標籤的屬性value,<option value="saab">Saab</option>
time.sleep(2)   #切換後option顯示"saab"
driver.quit()

針對按text文本進行切換option屬性示例以下。經常使用方法htm

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('file:///C:/Users/hunk/Desktop/select.html')
time.sleep(2)   #默認option顯示"Fiat"
S = Select(driver.find_element_by_name('cars')).select_by_visible_text ('Audi')  #實例化Select,text值是選擇的咱們下拉菜單時看到的值
time.sleep(2)   #切換後option顯示"Audi"
driver.quit()

使用first_selected_option(self) 來切換到第一個option,該方法與select_by_index(0)實現的效果相同,直接看一下代碼執行效果,詳細的就解釋了blog

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('file:///C:/Users/hunk/Desktop/select.html')
time.sleep(2)   #默認option顯示"Fiat"
S = Select(driver.find_element_by_name('cars')).first_selected_option
time.sleep(2)   #切換後option顯示"Audi"
driver.quit()

2.清除選擇列表

第一類咱們講解了如何選擇列表,總共介紹了4種方法,可是既然能夠選擇咱們就能夠清除選擇,而前三種取消方法能夠與選擇一一對應,下面咱們看下如何清除選擇

  • deselect_by_index(self, index)              #以index屬性值來查找匹配的元素並取消選擇;
  • deselect_by_value(self, value)              #以value屬性值來查找該option並取消選擇;
  • deselect_by_visible_text(self, text)   #以text文本值來查找匹配的元素並取消選擇;
  • deselect_all(self)                                    #將全部選擇清除;

由於按照上面的頁面示例,咱們切換完成之後是沒有辦法清除,下面咱們來普及一下html <select> 標籤的multiple 屬性,multiple 屬性規定可同時選擇多個選項,能夠把 multiple 屬性與 size 屬性配合使用,來定義可見選項的數目,因此咱們會涉及到取消模式。

下面是不包含multiple 和 包含 multiple 的兩種樣式 

<select> 標籤樣式

 <select> 標籤的multiple 屬性樣式

因爲選擇已經介紹的很詳細,那麼咱們配合的選擇和取消,寫一個例子共同演示一下

輔助測試的頁面html代碼

<html>
<body>
    <select name="cars" multiple="multiple" size="4">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</body>
</html>

首先咱們經過index、value、text文本三種方式進行選擇,而後再次按index、value、text 進行取消,最後遍歷全部的option循環選擇,最後所有取消。

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('file:///C:/Users/hunk/Desktop/select.html')
'''本示例中全部設置等待時間均爲便於觀察效果'''
time.sleep(1)
Select(driver.find_element_by_name('cars')).select_by_index(0)  #以索引選擇
time.sleep(1) 
Select(driver.find_element_by_name('cars')).select_by_value('saab')  #以value屬性值選擇
time.sleep(1) 
Select(driver.find_element_by_name('cars')).select_by_visible_text('Mercedes') #以text 文本進行選擇
time.sleep(2)
Select(driver.find_element_by_name('cars')).deselect_by_index(0)
time.sleep(1)
Select(driver.find_element_by_name('cars')).deselect_by_value('saab')  #以value屬性值取消選擇
time.sleep(1) 
Select(driver.find_element_by_name('cars')).deselect_by_visible_text('Mercedes') #以text 文本進行取消選擇
time.sleep(1)
'''獲取全部的option的text值,進行遍歷經過text文本進行選擇'''
Options = Select(driver.find_element_by_name('cars')).options #該方法下面會詳細介紹,此處爲了獲取全部的options選項
for option in Options:
    Select(driver.find_element_by_name('cars')).select_by_visible_text(option.text)  #循環選擇
time.sleep(1)
Select(driver.find_element_by_name('cars')).deselect_all()
time.sleep(1)
driver.quit()

代碼邏輯不重要,重要的是看效果,以下顯示

 

3.選項

雖然選項沒有上面兩大塊那麼重要,可是咱們還須要簡單的來看一下

  • options    #以列表形式返回屬於此select標籤的全部option
  • all_selected_options #所有選擇了的option的列表
  • first_selected_option #第一個被選中的option元素若是select沒有multiple值,此時獲取值爲當前選擇的option

option 方法上面的例子已經使用過了,下面咱們來介紹一下

def options(self):
    '''以列表形式返回屬於此select標籤的全部option'''
    return self._el.find_elements(By.TAG_NAME, 'option')

示例:

#-*- coding:utf-8 -*-

from selenium import webdriver
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('file:///C:/Users/hunk/Desktop/select.html')
S = Select(driver.find_element_by_name('cars')).options  #實例化Select,而且獲取全部的options
for option in S:  #遍歷options
    print(option.text) #獲取option值
driver.quit()

 咱們結合着上面的例子把剩下的兩種option方法一塊兒演示下,下面在上面的例子進行改造一下,來看看會出現上面樣子的效果

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('file:///C:/Users/hunk/Desktop/select.html')
'''本示例中全部設置等待時間均爲便於觀察效果'''
time.sleep(1)
Select(driver.find_element_by_name('cars')).select_by_index(0)  #以索引選擇
time.sleep(1) 
Select(driver.find_element_by_name('cars')).select_by_value('saab')  #以value屬性值選擇
time.sleep(1) 
Select(driver.find_element_by_name('cars')).select_by_visible_text('Mercedes') #以text 文本進行選擇
time.sleep(2)
options = Select(driver.find_element_by_name('cars')).all_selected_options  #獲取全部選擇的option
'''這裏咱們遍歷下看看那些值被選中'''
for option in options:
    print('已經被選中option文本值:' + option.text)
Select(driver.find_element_by_name('cars')).deselect_by_index(0)
time.sleep(1)
Select(driver.find_element_by_name('cars')).deselect_by_value('saab')  #以value屬性值取消選擇
time.sleep(1) 
Select(driver.find_element_by_name('cars')).deselect_by_visible_text('Mercedes') #以text 文本進行取消選擇
time.sleep(1)
'''獲取全部的option的text值,進行遍歷經過text文本進行選擇'''
Options = Select(driver.find_element_by_name('cars')).options #該方法下面會詳細介紹,此處爲了獲取全部的options選項
for option in Options:
    Select(driver.find_element_by_name('cars')).select_by_visible_text(option.text)  #循環選擇
time.sleep(1)
'''由於遍歷的過程當中Volvo的索引爲0,Volvo則被第一個選中'''
selectOption = Select(driver.find_element_by_name('cars')).first_selected_option
print (selectOption.text)
Select(driver.find_element_by_name('cars')).deselect_all()
time.sleep(1)
driver.quit()

咱們把option添加之後,控制檯打印了一下效果,看看是不是獲取了對應的值

上述把Select模塊中經常使用的方法介紹了,經過兩種不一樣的下拉菜單,對全部的方法進行了介紹,我採用紅色標記的方法是咱們實際項目中常常會使用的,須要更加深入的去理解。

相關文章
相關標籤/搜索