《最新出爐》系列初窺篇-Python+Playwright自動化測試-26-處理單選和多選按鈕-下篇

宏哥發表於2023-11-13
Python

1.簡介

今天這一篇宏哥主要是講解一下，如何使用Playwright來遍歷單選和多選按鈕。大致兩部分內容：一部分是宏哥在本地弄的一個小demo，另一部分，宏哥是利用JQueryUI網站裡的單選和多選按鈕進行實戰。

2.demo準備

2.1demo頁面的HTML程式碼

1.這裡宏哥為了省事節約時間就直接用上一篇中那個radio.html。如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試單選</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: 20px 300px 50px 300px;
            text-decoration:none;
            color: white;
        }
        #myAnchor
        {
          text-decoration:none;
          color: white;
        }
        #hg
        {
            margin: 20px 300px 50px 300px;
        }
    </style>
</head>
<body>
    <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
    <div id="hg">
        <div>
        <h3>核取方塊 checkbox</h3> 請選擇喜歡的打野英雄：<br>
        <label><input name="checkbox1" type="checkbox" value="李白"/>李白 </label><br>
        <label><input name="checkbox2" type="checkbox" value="韓信"/>韓信 </label><br>
        <label><input name="checkbox3" type="checkbox" value="公孫離" checked="checked"/>公孫離 </label><br>
        <label><input name="checkbox4" type="checkbox" value="露娜"/>露娜 </label><br>
        </div>
        <div>
            <h3>單選框 radio</h3> 選擇喜歡的打野英雄：<br>
            <label><input name="radio" type="radio" value="0" checked="checked"/>李白 </label><br>
            <label><input name="radio" type="radio" value="1"/>韓信 </label><br>
            <label><input name="radio" type="radio" value="2"/>露娜 </label><br>
            <label><input name="radio" type="radio" value="3"/>孫尚香 </label><br>
        </div>
    </div>
</body>
</html>

2.頁面效果，如下圖所示：

3.遍歷單選框

遍歷思路：

1.首先找到所有單選按鈕的共同點。

2.使用共同點來定位單選按鈕，將其放在變數中。

3.利用for迴圈將其從容其中一一遍歷出來。

3.1程式碼設計

根據上邊的遍歷思路進行程式碼設計。如下圖所示：

3.2參考程式碼

# coding=utf-8?

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

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-09-27
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-23-處理單選和多選按鈕-下篇
'''

# 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/radio.html")
    page.wait_for_timeout(3000)
    # 遍歷沒有選中的單選框（如果想遍歷所有的單選框去掉if條件即可）
    for radio in page.locator('[name="radio"]').all():
        if(not(radio.is_checked())):
            radio.click()
            page.wait_for_timeout(2000)
    # page.pause()
    browser.close()

3.3執行程式碼

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

2.執行程式碼後電腦端的瀏覽器的動作（因為李白預設選中，所以沒有遍歷，從韓信開始遍歷）。如下圖所示：

4.遍歷核取方塊

遍歷思路：

1.首先找到所有核取按鈕的共同點。

2.使用共同點來定位核取按鈕，將其放在變數中。

3.利用for迴圈將其從容其中一一遍歷出來。

4.1程式碼設計

根據上邊的遍歷思路進行程式碼設計。如下圖所示：

4.2參考程式碼

# coding=utf-8?

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

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-09-27
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-23-處理單選和多選按鈕-下篇
'''

# 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/radio.html")
    page.wait_for_timeout(3000)
    # 遍歷沒有選中的單選框（如果想遍歷所有的單選框去掉if條件即可）
    for radio in page.locator('[type="checkbox"]').all():
        if(not(radio.is_checked())):
            radio.click()
            page.wait_for_timeout(2000)
    # page.pause()
    browser.close()

4.3執行程式碼

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

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

5.JQueryUI網站

https://www.jq22.com/  這個是宏哥又找到的一個網站，不錯的，有原始碼。進入後可以搜尋你要演示的demo。

5.1被測網址

1.被測網址的地址：

為了方便演示，宏哥直接將其iframe中的url拿出來了，否則你的定位到iframe，然後才能定位裡邊的元素。這個坑宏哥之前遇到過一次。這裡再次提醒一下。

 https://www.jq22.com/demo/inputStyle201703310052

2.網頁如下圖：

5.2程式碼設計

宏哥這裡只演示單選的遍歷，複選的有興趣的童鞋可以自己試一下。根據demo中的遍歷思路進行程式碼設計。如下圖所示：

5.3參考程式碼

# coding=utf-8?

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

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

# 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.jq22.com/demo/inputStyle201703310052")
    page.wait_for_timeout(3000)
    # 遍歷沒有選中的單選框（如果想遍歷所有的單選框去掉if條件即可）
    for radio in page.locator('[name="hot"]').all():
        if(not(radio.is_checked())):
            radio.click()
            page.wait_for_timeout(2000)
    # page.pause()
    browser.close()

5.4執行程式碼

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

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

6.小結

今天主要是講解了如何遍歷單選和多選按鈕，掌握了其實非常簡單主要秘訣就是：要找到其共同屬性，然後挨個遍歷出來，缺點就是單選只能選中最後一個。多選就全部選中。

好了，今天時間也不早了，宏哥就講解和分享到這裡，感謝您耐心的閱讀，希望對您有所幫助。

相關文章