《最新出爐》系列初窺篇-Python+Playwright自動化測試-23-處理select下拉框-下篇

1.簡介

上一篇中宏哥主要講解和分享了一下，我們常見或者傳統的select下拉框的操作，但是近幾年又出現了了一種新的select下拉框，其和我們傳統的select下拉框完全不一樣，那麼我們如何使用playwright對其進行定位操作了。宏哥今天就來講解和分享一下僅供大家參考，不喜勿噴。

2.新的select

宏哥發現隨着技術的更新換代，現在好多下拉選擇都很少用以前那種的方式，而是採用一種類似pop彈出的效果，直接彈出一個一個頁面選擇，如下圖所示：

12306網站：

快遞：

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.1操作select選擇框

3.1.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.牛刀小試

宏哥這裏就宏哥這裏就以12306網站爲例查詢北京到上海的列車信息。給小夥伴們或者童鞋們來打個樣。但是實際操作中發現利用select操作的方法有點繁瑣，還是用常規方法非常簡單。

具體步驟：
1.首先訪問12306網站。

2.定位到出發地，點擊，彈出選項，定位要選擇的選項，點擊即可。

3.定位到到達地，點擊，彈出選項，定位要選擇的選項，點擊即可。

4.日期默認查詢當天的，宏哥這裏不定位，後期會專門講解定位日期控件的。

5.點擊查詢按鈕，查詢車次信息。

4.1代碼設計

4.2參考代碼

# coding=utf-8🔥

# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行

# 2.註釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2023-09-13
@author: 北京-宏哥   QQ交流羣：705269076
公衆號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-22-處理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("https://www.12306.cn")
    page.wait_for_timeout(3000)
    #定位出發地
    page.click("#fromStationText")
    page.wait_for_timeout(3000)
    page.locator("ul").locator("[data='BJP']").click()
    # option = page.select_option("[data='BJP']","北京")
    # 定位到達地
    page.click("#toStationText")
    page.wait_for_timeout(3000)
    page.locator("ul").locator("[data='SHH']").click()
    # print(option)
    page.wait_for_timeout(3000)
    # print(option)
    #日期默認查詢當天的，宏哥這裏不定位，後期會專門講解定位日期控件的
    #定位查詢按鈕並點擊
    page.click("#search_one")
    page.wait_for_timeout(5000)
    # page.pause()
    browser.close()

4.3運行代碼

1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：

5.小結

 今天分享這種新的select下拉選擇和傳統的select下拉不同，因此用Playwright提供的處理方法就會有問題也比較複雜，因此宏哥在處理時候，沒有用其提供的處理方法，反而用常規的處理方法非常簡單。所以在實際工作中我們要靈活的運用各種方法，不要一味地死搬硬套、要懂得變通。好了，今天時間也不早了，宏哥就講解和分享到這裏，感謝您耐心的閱讀，希望對您有所幫助。當然了，有興趣地可以參考宏哥的文章，自己實踐一下那個快遞的下拉選擇框。