《最新出爐》系列初窺篇-Python+Playwright自動化測試-28-處理日曆時間控制元件-上篇

1.簡介

我們在實際工作中，有可能遇到有些web產品，網頁上有一些時間選擇，然後支援按照不同時間段範圍去篩選資料，例如：我們預定火車票或者預定酒店，需要選擇發車日期或者酒店的入住與退房時間。宏哥早在之前的12306選出發站就簡單的提到過，只不過是一帶而過，今天就展開詳細介紹一下。網頁上日曆控制元件一般，是一個文字輸入框，滑鼠點選，就會彈出日曆介面，可以選擇具體日期。這一篇，宏哥就來介紹一下日曆控制元件是如何用Playwright實現自動化。

2.JQueryUI網站

2.1被測網址

1.被測網址的地址：

https://jqueryui.com/resources/demos/checkboxradio/default.html

2.網頁如下圖：

3.思路一

宏哥這裡提供兩種思路，第一種：比較簡單將其看作是文字輸入框，直接按照日期格式輸入就可以了（馬上光棍節了，宏哥直接輸入23年的光棍節，湊巧啊，java+selenium的日曆時間控制元件篇也剛好要到雙十一了）。

3.1程式碼設計

根據第一種思路進行程式碼設計如下圖所示：

3.2參考程式碼

# coding=utf-8?

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

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-11-07
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-28-處理日曆時間控制元件-上篇
'''

# 3.匯入模組
from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("http://jqueryui.com/resources/demos/datepicker/default.html")
    page.wait_for_timeout(5000)
    page.locator("#datepicker").fill("2023-11-11")
    page.wait_for_timeout(5000)
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

3.3執行程式碼

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

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

4.思路二

第二種：透過元素定位，和手工操作一樣，將日期一步一步選擇點選出來。

4.1程式碼設計

根據第二種思路進行程式碼設計如下圖所示：

4.2參考程式碼

# coding=utf-8?

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

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-11-07
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-28-處理日曆時間控制元件-上篇
'''

# 3.匯入模組
from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("http://jqueryui.com/resources/demos/datepicker/default.html")
    page.wait_for_timeout(5000)
    # 點選輸入框
    page.locator("#datepicker").click()
    # 點選下一個月
    page.locator("//*[@id='ui-datepicker-div']/div/a[@data-handler='next']").click()
    page.wait_for_timeout(1000)
    # xpath定義第二行第六個元素，可能每個月排序不一樣，所以不一定點選的就是11日（2023 - 11 - 11）
    page.locator("//*[@id='ui-datepicker-div']/table/tbody/tr[2]/td[7]/a").click()
    page.wait_for_timeout(5000)
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

4.3執行程式碼