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

宏哥發表於2023-10-26
Python

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

相關文章