前言
1、在Web網頁中經常會遇到下拉框(下拉列表)：比如說分頁、每頁顯示的條數、語言的切換等功能，很多時候經常都是以下拉框的形式展現。
2、下拉列表是網頁中一種最節省頁面空間的選擇方式，默認狀態下只顯示一個選項，只有單擊下拉按鈕后才能看到全部的選項進而進行選擇。
3、在實際Web網頁開發中下拉框的實現方式有很多：
⑴<select>和<option>實現下拉框
⑵<ul>和<li>實現下拉框
⑶其他
4、對於不同方式實現的下拉框，在使用Selenium工具對元素進行操作時會有一定的差距。所以在進行selenium工具對下拉框元素操作時最好分清楚下拉框的實現方式是什么。
5、selenium工具操作頁面下拉框，一般來說分為兩種情況，一種是標准的select標簽下拉框；另一種是非select類下拉框，比如 ul-li 標簽下拉框。
6、針對select標簽的下拉框，selenium提供了一個select類；針對非select標簽實現的下拉框，可以通過模擬鼠標點擊的方式實現操作。
select標簽下拉框
1、如下圖所示，下拉框為select標簽，此時可以使用select類提供的三種方法定位到下拉框中的元素。
2、select下拉框感覺是HTML中標准的下拉框實現方式（但是並不是很常見）（具體還是需要根據F12去瀏覽器的開發者模式查看）
3、在HTML中select下拉框是由<select>和<option>配合使用的。具體語法格式如下：
⑴<select>標簽用來創建一個下拉列表
⑵<option>標簽表示下拉列表中的每一項(條目)
4、針對select下拉框Selenium提供了專門的接口函數來操作對應的元素：Select類
from selenium.webdriver.support.select import Select
5、操作步驟：
⑴首先定位到select標簽，然后進行實例化(獲取一個select對象)
⑵通過select對象進行選項的定位選擇等：通過選項下標、value、text
6、Select類有以下操作方法：
7、 實例代碼：
import time from selenium import webdriver from selenium.webdriver.support.select import Select # 實例化瀏覽器，訪問目標網頁，窗口最大化 driver = webdriver.Chrome() driver.get("file:///C:/User/Desktop/%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0.html") driver.maximize_window() time.sleep(1) # 定位下拉框,實例化select方法 ele = driver.find_element_by_id("poet") select_ele = Select(ele) # 方法一：通過索引選擇下拉元素 select_ele.select_by_index(0) time.sleep(1) # 方法二：通過下拉元素的value選擇下拉元素 select_ele.select_by_value("03") time.sleep(1) # 方法三：通過下拉元素的文本內容選擇下拉元素 select_ele.select_by_visible_text("白居易") time.sleep(1) # 退出 driver.quit()
Selenium工具操作只能選取單個值的select下拉框
1、一般情況下我們遇到的(select)下拉框都是只能選擇一個值(元素)的下拉框(不能選擇多個值)；（當然也存在可以選擇多個值(元素)的下拉框）
2、對於只能選擇一個值(元素)的下拉框，在選擇下一個元素后會自動取消上一次選擇的元素(始終只能選擇一個值)。
⑴select_by_index()、select_by_value()、select_by_visible_text()等方法已經有點擊的功能了，所以不再需要在click()操作、
⑵相當於這些方法是：定位 + 點擊
3、下拉框實現代碼如下：
""" #下拉框語法： <select> <option></option> </select> #示例：后面就以這個HTML為例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div> <form action="http://www.baidu.com" method="get"> <div> <!-- 下拉框 --> <!-- <select id="mouse" multiple="multiple">--> <select id="mouse" > <option id="0" value="guangzhou">廣州</option> <option id="1" value="shenzheng">深圳</option> <option id="2" value="shandong">山東</option> <option id="3" value="beijing">北京</option> <option id="4" value="shanghai">上海</option> <option id="5" value="chengdu">成都</option> </select> </div> </form> </div> </body> </html>
4、Select類源碼
#Select類源碼：可以看到首先需要傳入一個元素的Element對象來實例化一個Select對象 # 這個傳入的Element對象就是Select標簽元素 class Select(object): def __init__(self, webelement): """ Constructor. A check is made that the given element is, indeed, a SELECT tag. If it is not, then an UnexpectedTagNameException is thrown. :Args: - webelement - element SELECT element to wrap Example: from selenium.webdriver.support.ui import Select \n Select(driver.find_element_by_tag_name("select")).select_by_index(2) """ if webelement.tag_name.lower() != "select": raise UnexpectedTagNameException( "Select only works on <select> elements, not on <%s>" % webelement.tag_name) self._el = webelement multi = self._el.get_attribute("multiple") self.is_multiple = multi and multi != "false"
5、selenium工具操作下拉框
import time from selenium import webdriver from selenium.webdriver.support.select import Select # 獲取瀏覽器對象 driver = webdriver.Chrome() # 設置瀏覽器窗口大小 driver.maximize_window() # 進入頁面 driver.get('C:\\Py_Demo\\Demo\\Py_Project\\demo.html') time.sleep(2) # 定位select標簽 selectTag = driver.find_element_by_id('mouse') # 實例化一個select對象：傳入Select標簽元素的Element對象 select = Select(selectTag) print(select) print(type(select)) # 通過select對象進行下拉框選項操作 # 根據下標進行選擇，從0開始 select.select_by_index(1) time.sleep(2) # 根據value的值選擇 select.select_by_value('beijing') time.sleep(2) # 根據text選擇 select.select_by_visible_text('成都') time.sleep(2) """ # 選擇下一個元素后會自動取消上一次選擇的元素 <selenium.webdriver.support.select.Select object at 0x000001FBC9D18DA0> <class 'selenium.webdriver.support.select.Select'> """
Selenium工具操作可以選取多個值的select下拉框
1、select下拉框是可以選擇多個值：在<select>標簽中設置 multiple="multiple" 屬性，就可以實現多選功能
⑴在windows下：Ctrl鍵+單擊，可以選擇多個選項
⑵在Mac下：Command+單擊，可以選擇多個選項
2、代碼實例：
import time from selenium import webdriver from selenium.webdriver.support.select import Select # 獲取瀏覽器對象 driver = webdriver.Chrome() # 設置瀏覽器窗口大小 driver.maximize_window() # 進入頁面 driver.get('C:\\Py_Demo\\Demo\\Py_Project\\demo.html') time.sleep(2) # 定位select標簽 selectTag = driver.find_element_by_id('mouse') # 實例化一個select對象：傳入Select標簽元素的Element對象 select = Select(selectTag) # 通過select對象進行下拉框選項操作 # 根據下標進行選擇，從0開始 select.select_by_index(1) time.sleep(2) # 根據value的值選擇 select.select_by_value('beijing') time.sleep(2) # 根據text選擇 select.select_by_visible_text('成都') # 返回第一個已選擇的選項 firstSelected = select.first_selected_option print(firstSelected) # 返回一個Element對象 print(firstSelected.text) """ <selenium.webdriver.remote.webelement.WebElement (session="7f41759611e5d9ad1e4c3c6b8d421611", element="f97ec79a-4e59-4a4d-a9bd-a6aa46657011")> 深圳 """ # 返回所有已選擇的選項 allSelected = select.all_selected_options print(allSelected) # 返回一個列表 """ [<selenium.webdriver.remote.webelement.WebElement (session="d5d4ba2a653680a9084badc6026cb5e6", element="4e99e280-be34-4b8e-ad69-9cf0be590b60")>] """ # 返回所以的選擇項 allSelect = select.options print(allSelect) # 返回一個列表 """ [<selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="ec18421f-0fb3-4d75-aa8a-c0c48102ac96")>, <selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="9253ba45-053f-4eb3-be68-dffb57f3b4e4")>, <selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="a3d7123a-6eb6-4f7a-9b40-bd7abe0ee3f5")>, <selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="816ee30a-11ba-46a2-a950-fbc53bb7e7d2")>, <selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="63019040-180a-4a60-98ec-eb18740ddef5")>, <selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="035dfdfa-3f6e-401f-8566-8112ae9dbb5c")>] """ time.sleep(2) # 取消對應index選項，用於多選 select.deselect_by_index(1) time.sleep(2) # 取消所有選項，用於多選 select.deselect_all()
Selenium工具使用常規方法選擇下拉框中的值（元素）
1、不管怎么說Select下拉框中的元素都是在HTML頁面中的，既然在HTML頁面中那么就可以使用常規的定位方式進行定位和操作。
⑴使用常用的8種定位方法
⑵使用click()方法進行點擊選擇
2、Select類只是說對於Select下拉框提供了單獨的、更多的處理方法。但並不會影響使用常規方法來操作下拉框。
3、在選擇下拉框中的值（元素）后可以使用 element_located_to_be_selected 方法來判斷元素是否已經被選中。
4、代碼實例：
import time from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select from selenium.webdriver.support import expected_conditions as EC # 獲取瀏覽器對象 driver = webdriver.Chrome() # 設置瀏覽器窗口大小 driver.maximize_window() # 進入頁面 driver.get('C:\\Py_Demo\\Demo\\Py_Project\\demo.html') time.sleep(2) # 直接定位所需選擇的元素 Tag = driver.find_element_by_id('1') print(Tag) Tag.click() # 判斷元素是否被選中 result = EC.element_located_to_be_selected((By.ID,'1'))(driver) print(result) time.sleep(2) # 再次點擊元素：表示取消選擇 driver.find_element_by_id('1').click() # 判斷元素是否被選中 print(EC.element_located_to_be_selected((By.ID,'1'))(driver)) """ <selenium.webdriver.remote.webelement.WebElement (session="30e6d4b9ea519ab6570e423d5914e214", element="8f61ff14-279e-4235-948d-cf4745531287")> True False """
注意：如果需要鼠標懸浮或者點擊后才會出現下拉框中的值（元素），最好先執行懸浮或者點擊操作后再定位元素並操作。
比如下拉框：先點擊、懸浮下拉框按鈕，使下拉框中的元素展示出來后，再定位下拉框中的元素，如果是直接定位下拉框中的元素的話(沒有執行懸浮、點擊操作)，有可能定位不到元素。
Selenium工具操作非select-option標簽方式實現的下拉框
1、隨着Web網頁技術的發展，下拉框功能不僅僅可以使用 select 標簽實現，還可以使用其他的標簽實現該功能。
2、目前的話 我感覺比較常見的下拉框實現方式還是使用<ul>和<li>組合
⑴<ul>用於定義一個無序列表
⑵<li>標簽定義列表項目
3、前面介紹的Select類是專門針對於select下拉框的，因此在非select下拉框中可能並不適用。
因此對於非select下拉框，更多的還是需要通過常規的元素定位方法來操作：①先定位下拉框按鈕②在定位下拉框中的選項
4、錯誤的操作方式：
import time from selenium import webdriver from selenium.webdriver.support.select import Select # 獲取瀏覽器對象 driver = webdriver.Chrome() # 設置瀏覽器窗口大小 driver.maximize_window() # 進入頁面 driver.get('https://www.luffycity.com/signup') # 定位下拉框按鈕 selectTag = driver.find_element_by_xpath('//*[@id="__layout"]/div/div/div[1]/div/div[2]/div[1]/img[2]') select = Select(selectTag) select.select_by_index(1) """ # 可以看到Select類方法是不能用於非select標簽的 selenium.common.exceptions.UnexpectedTagNameException: Message: Select only works on <select> elements, not on <img> """
5、正確的操作方式代碼實例：
import time from selenium import webdriver # 獲取瀏覽器對象 driver = webdriver.Chrome() # 設置瀏覽器窗口大小 driver.maximize_window() # 進入頁面 driver.get('https://www.luffycity.com/signup') time.sleep(3) # 定位下拉框按鈕 selectTag = driver.find_element_by_xpath('//*[@id="__layout"]/div/div/div[1]/div/div[2]/div[1]/img[2]').click() # 定位下拉框元素並點擊 element = driver.find_element_by_xpath('//*[@id="__layout"]/div/div/div[1]/div/div[2]/div[1]/ul/li[3]') element.click() print(element) #<selenium.webdriver.remote.webelement.WebElement (session="c0e543f5da6db28befc06ec4aa7820b3", element="743018a3-16a9-430a-a19e-66d188ab9970")>
6、實例2
頁面下拉框實現方式如下：
python操作下拉框代碼如下：
import time from selenium.webdriver import ActionChains from selenium import webdriver # 實例化瀏覽器，訪問目標網頁，窗口最大化 driver = webdriver.Chrome() driver.get("https://www.eteams.cn") driver.maximize_window() driver.implicitly_wait(5) # 登錄 driver.find_element_by_id("username").send_keys("12345YH@163.com") driver.find_element_by_id("password").send_keys("123456") driver.find_element_by_xpath("//button[text()='登 錄']").click() # 進入任務頁面 driver.find_element_by_xpath("//a[@type='button']").click() driver.find_element_by_xpath("//li/a/span[text()='任務']").click() time.sleep(2) # 展開下拉框，直接點擊選項 action = ActionChains(driver) action.move_to_element(driver.find_element_by_xpath("//a[text()='視圖']")).perform() driver.find_element_by_xpath("//li[@data-useractionid='task_004000600_0005302']").click() time.sleep(2) # 退出 driver.quit()
拓展：使用F12定位下拉框中的元素
1、有一類元素不是直接顯示的頁面上的，而是需要點擊某些其他元素后才會顯示在頁面上，比如這里的下拉框。
2、這類元素會有一個特點：鼠標如果移開(沒在元素上)，這些元素就會消失：在頁面上一閃而過。因此在使用F12查找這類元素時，會非常困難。注意：雖然說可以手動在HTML中查找，但是這樣會很麻煩。
3、Chrome其實就有一個功能我們可以用用：在F12開發者工具中，Sources選項中有一個暫停按鈕。
4、實例：
①F12進入開發者頁面，並切換到Sources分頁。
②點擊下拉框按鈕：使其彈出下拉框元素，然后在雙擊快捷鍵F8暫停頁面；或者直接點擊下圖中的【暫停】按鈕以暫停暫停頁面。【還有一種方法是在Console分頁中執行JavaScript語句同樣可以達到暫停頁面的效果】
③暫停頁面后再通過元素選擇按鈕來選擇我們想要的元素(此時會自動跳轉到elements分頁) ；這樣就能很方便的找到我們想要的元素的信息。
