1.簡介
在實際自動化測試過程中，我們也避免不了會遇到下拉框選擇的測試，因此宏哥在這裏直接分享和介紹一下，希望小夥伴或者童鞋們在以後工作中遇到可以有所幫助。今天，我們講下playwright的下拉框怎麼處理，在使用selenium定位的過程中，我們可以選擇使用selenium的Select類定位操作選擇框（比較複雜），但是在playwright中真的炒雞方便。
2.什麼是下拉選擇框
下拉框是一種常見的用戶交互界面控件，一般用於向用戶顯示多項可選項，並從中讓用戶選擇一個最佳答案。用戶可以從下拉框內的給定列表中選擇一項，從而輸入對應內容，可以讓Web設計師快速實現可空白集成以及簡便操作，簡化用戶輸入。
下拉框可以有不同的佈局和表現形式。例如，普通的下拉框由複選框和滾動條組成，可以用來讓用戶在多個選擇項中進行選擇。也可以使用下拉框來處理大數據，使搜索變得更快。還有一種下拉框佈局容納輸入框，提高用戶輸入效率。
下拉框有很多種優點。首先，它可以美化Web界面和節省空間，將多項選擇以垂直形式呈現，節省空間。其次，它可以幫助保護用戶免受錯誤輸入，只能從列表內選擇，從而避免用戶輸入錯誤的數據，如拼寫錯誤的文本。此外，下拉框可以簡化用戶C（Control）操作，提高操作效率，更容易操作和反映用戶意圖。
更重要的是，下拉框可以幫助減少用戶輸入時間，並減少干擾，避免用戶在全部文本選項中搜索。特別是在輸入大量資料時，可以減少完成這項任務所需的時間，從而提高用戶對網頁的使用體驗。
總之，下拉框在網頁設計中經常使用，它具有很多優點，可以美化Web界面，提高用戶的輸入效率，減少用戶的輸入時間，幫助用戶更好地控制後臺系統，並降低錯誤錄入的可能性。
3.Select用法
在Playwright中使用locator.select_option()選擇元素中的一個或多個選項。我們可以指定選項value，或label選擇並且可以選擇多個選項。官方使用示例如下：
# Single selection matching the value page.get_by_label('Choose a color').select_option('blue') # Single selection matching the label page.get_by_label('Choose a color').select_option(label='Blue') # Multiple selected items page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])
3.1select元素示例
1.準備測試練習select.html，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試Select</title>
<style type="text/css">
.button1 {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 28px;
margin-bottom: 100px;
text-decoration:none;
color: white;
}
#myAnchor
{
text-decoration:none;
color: white;
}
</style>
</head>
<body>
<button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
快遞郵寄地址：
<select id="select_id" name="select_name" class ="select_cls">
<option value="0">請選擇</option>
<option value="1">山西</option>
<option value="2">陝西</option>
<option value="3">山東</option>
<option value="4">四川</option>
<option value="5">河北</option>
</select>省_XXX_市_ XXX_街道
</body>
</html>
2.頁面效果，如下圖所示：
3.2仿照官方示例
# single selection matching the value or label element.select_option("1") # single selection matching the label element.select_option(label="山東") # select_name selection for 0, 1 and second option element.select_option(value=["0","1", "2", "3","4","5"])
3.3操作select選擇框
3.3.1語法
第一種方法：通過page對象直接調用，如下：
page.select_option(selector,value) # 通過value選擇 page.select_option(selector,index) # 通過index選擇 page.select_option(selector,label) # 通過label選擇
以上方法是：使用selector選擇器，先定位元素
第一種通過value選擇，顧名思義，可以通過我們的選擇框的value元素進行選擇
第二種通過index選擇，意思是我們可以通過下標來選擇
第三種通過label選擇，意思是我們可以通過選項值來選擇
第二種方法：先定位select元素，再定位選項，如下：
select = page.get_by_label("選擇:") select.select_option(label="forth")
4.牛刀小試
4.1先定位select元素，再定位選項
首先宏哥準備一個測試demo的html，因爲在線的不好找或者不滿足要演示的要求。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試Select</title> <style type="text/css"> .button1 { background-color: #f44336; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 28px; margin-bottom: 100px; text-decoration:none; color: white; } #myAnchor { text-decoration:none; color: white; } </style> </head> <body> <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br> <label>快遞郵寄地址： <select id="select_id" name="select_name" class ="select_cls"> <option value="0">請選擇</option> <option value="1">山西</option> <option value="2">陝西</option> <option value="3">山東</option> <option value="4">四川</option> <option value="5">河北</option> </select>省_XXX_市_ XXX_街道 </label> </body> </html>
4.1.1根據選項名稱定位
1.參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-09-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-21-處理select下拉框 ''' # 3.導入模塊 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("C:/Users/DELL/Desktop/test/select.html") page.wait_for_timeout(3000) select = page.get_by_label("快遞郵寄地址：") option = select.select_option("山西") print(option) page.pause() browser.close()
2.運行代碼
（1）運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
4.1.2根據index索引定位
1.參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-09-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-21-處理select下拉框 ''' # 3.導入模塊 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("C:/Users/DELL/Desktop/test/select.html") page.wait_for_timeout(3000) select = page.get_by_label("快遞郵寄地址：") option = select.select_option(index=3) print(option) page.pause() browser.close()
2.運行代碼
（1）運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
4.1.3根據lable標籤定位
1.參考代碼
（1）select的html元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試Select</title> <style type="text/css"> .button1 { background-color: #f44336; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 28px; margin-bottom: 100px; text-decoration:none; color: white; } #myAnchor { text-decoration:none; color: white; } </style> </head> <body> <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br> <label>快遞郵寄地址： <select id="select_id" name="select_name" class ="select_cls"> <option value="0" label="零">請選擇</option> <option value="1" label="第一">山西</option> <option value="2" label="第二">陝西</option> <option value="3" label="第三">山東</option> <option value="4" label="第四">四川</option> <option value="5" label="第五">河北</option> </select>省_XXX_市_ XXX_街道 </label> </body> </html>
（2）定位操作
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-09-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-21-處理select下拉框 ''' # 3.導入模塊 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("C:/Users/DELL/Desktop/test/select.html") page.wait_for_timeout(3000) select = page.get_by_label("快遞郵寄地址：") option = select.select_option(label="第五") print(option) page.pause() browser.close()
2.運行代碼
（1）運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
4.2通過page對象直接調用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試Select</title> <style type="text/css"> .button1 { background-color: #f44336; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 28px; margin-bottom: 100px; text-decoration:none; color: white; } #myAnchor { text-decoration:none; color: white; } </style> </head> <body> <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br> 快遞郵寄地址： <select id="select" name="select_name" class ="select_cls"> <option value="0" >請選擇</option> <option value="1" >山西</option> <option value="2" >陝西</option> <option value="3" >山東</option> <option value="4" >四川</option> <option value="5" >河北</option> </select>省_XXX_市_ XXX_街道 </body> </html>
4.2.1通過value定位
1.參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-09-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-21-處理select下拉框 ''' # 3.導入模塊 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("C:/Users/DELL/Desktop/test/select.html") page.wait_for_timeout(3000) option = page.select_option("#select","3") print(option) page.pause() browser.close()
2.運行代碼
（1）運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
4.2.2通過索引定位
1.參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-09-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-21-處理select下拉框 ''' # 3.導入模塊 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("C:/Users/DELL/Desktop/test/select.html") page.wait_for_timeout(3000) option = page.select_option("#select",index=5) print(option) page.pause() browser.close()
2.運行代碼
（1）運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
4.2.3通過lable定位
1.參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-09-13 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-21-處理select下拉框 ''' # 3.導入模塊 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("C:/Users/DELL/Desktop/test/select.html") page.wait_for_timeout(3000) option = page.select_option("#select","山西") print(option) page.pause() browser.close()
2.運行代碼
（1）運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
5.小結
好了，今天時間也不早了，宏哥就講解和分享到這裏，感謝您耐心的閱讀，希望對您有所幫助。
5.1小坑
額，最後耽誤大家一點時間處理上一篇宏哥給大家挖的坑。不知道你們有沒有發現，自從運行了上一篇中的非無恆模式啓動瀏覽器代碼以後，再次運行無痕模式啓動瀏覽器時，會一直（偶爾一次可能不報錯）報如下錯誤：
playwright._impl._api_types.Error: spawn UNKNOWN
這個錯誤的原因就是：沒有安裝playwright的瀏覽器導致的。宏哥奇了怪了啊，之前早就搭建環境安裝好了，這裏又報錯沒有安裝。
找了半天沒有找到原因，宏哥直接暴力解決問題，將之前安裝瀏覽器的目錄全部刪除，在Docs命令窗口運行以下命令重新安裝一下，完美解決了。
playwright install ## 或者 python -m playwright install