北京-宏哥

不負時代沉睡的人心潮澎湃熱血流過動脈別讓夢想帶著遺憾醒來總有人被世界淘汰總有人被記載在這爾虞我詐的舞臺挺過來初心仍在坎坷不算失敗不負時代人生沒有彩排 Oh 起落都精彩磨難用雙手推開全力去對待豁出去才痛快看我和命運誰厲害有一天我會卷土重來創造新的未來遍地狼藉會被黃沙掩埋總有人被世界淘汰總有人被記載在這爾虞我詐的舞臺挺過來初心仍在坎坷不算失敗不負時代人生沒有彩排 Oh 起落都精彩磨難用雙手推開全力去對待豁出去才痛快看我和命運誰厲害

《剛剛問世》系列初窺篇-Java+Playwright自動化測試-30- 操作單選和多選按鈕 - 番外篇（詳細教程）

1.簡介

前邊幾篇文章是宏哥自己在本地弄了一個單選和多選的demo，給小伙伴或童鞋們演示了一下如何使用playwright來處理單選按鈕和多選按鈕進行自動化測試，想必大家都已經掌握的八九不離十了吧。這一篇其實也很簡單，主要是分兩部分內容來講解和分享的。一部分，宏哥是利用JQueryUI網站里的單選和多選按鈕進行實戰，主要是循環遍歷，對前邊內容進行梳理和回顧。另一部分就是宏哥在網上找了一個問卷調查例子，運用前邊所學的知識趁熱打鐵地給小伙伴或童鞋們來演示一下。前邊的文章中的一些單選和多選的基本概念都介紹了，這里就不做贅述了。直接上項目進行實戰。

2.JQueryUI網站

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

2.1被測網址

1.被測網址的地址：

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

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

2.網頁如下圖：

2.2代碼設計

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

2.3參考代碼

package com.bjhg.playwright;

import java.util.List;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公眾號:北京宏哥（微信搜索，關注宏哥，提前解鎖更多測試干貨）
 * 
 * 《剛剛問世》系列初窺篇-Java+Playwright自動化測試-28- 操作單選和多選按鈕 - 中篇（詳細教程）
 *
 * 2025年01月26日
 */
public class Test_Radio {
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
              //1.使用chromium瀏覽器，# 瀏覽器配置，設置以GUI模式啟動Chrome瀏覽器（要查看瀏覽器UI，在啟動瀏覽器時傳遞 headless=false 標志。您還可以使用 slowMo 來減慢執行速度。
              Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
              //2.創建context
              BrowserContext context = browser.newContext();
              //創建page
              Page page = context.newPage();
              //3.瀏覽器訪問demo
              page.navigate("https://www.jq22.com/demo/inputStyle201703310052");
              //4.定位所有單選按鈕
              List<Locator> radios = page.locator("[name='hot']").all();
              //遍歷單選按鈕
              for(Locator radio:radios){
                 //判斷單選按鈕是否選中，不選中才點擊
                 if(!radio.isChecked()){
                     //點擊單選按鈕
                     radio.click(); 
                 }
              }
              System.out.println("Test Pass");
              //5.關閉page
              page.close();
              //6.關閉browser
              browser.close();
        }
    }
}

2.4運行代碼

1.運行代碼，右鍵Run As->Java Application，就可以看到控制臺輸出，如下圖所示：

2.運行代碼后電腦端的瀏覽器的動作（可以看到單選按鈕挨個都被點到了）。如下圖所示：

3.項目實戰

3.1問卷調查

1.測試問卷調查的地址：

https://www.sojump.com/m/2792226.aspx/

2.問卷頁面，如下圖所示：

3.2答題思路

自動化測試答題思路，其實和前邊單選多選的遍歷差不多，具體思路如下：

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

2.使用共同點來定位單選和多選按鈕，將其放在容器中。

3.利用for循環將其（單選和多選按鈕）從容器中一一遍歷出來，并進行逐個click。

3.3代碼設計

根據答題中的遍歷思路進行代碼設計如下圖所示：

3.4參考代碼

package com.bjhg.playwright;

import java.util.List;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公眾號:北京宏哥（微信搜索，關注宏哥，提前解鎖更多測試干貨）
 * 
 * 《剛剛問世》系列初窺篇-Java+Playwright自動化測試-28- 操作單選和多選按鈕 - 中篇（詳細教程）
 *
 * 2025年01月29日
 */
public class Test_Radio {
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
              //1.使用chromium瀏覽器，# 瀏覽器配置，設置以GUI模式啟動Chrome瀏覽器（要查看瀏覽器UI，在啟動瀏覽器時傳遞 headless=false 標志。您還可以使用 slowMo 來減慢執行速度。
              Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
              //2.創建context
              BrowserContext context = browser.newContext();
              //創建page
              Page page = context.newPage();
              //3.瀏覽器訪問demo
              page.navigate("https://www.sojump.com/m/2792226.aspx");
              Thread.sleep(1000);
              //4.定位所有單選按鈕
              List<Locator> radios = page.locator("http://*/div[@id='divQuestion']/fieldset/div/div/div/span/input/../a").all();
              //遍歷單選按鈕
              for(Locator radio:radios){
                //點擊單選按鈕
                  radio.click();
              }
              System.out.println("Test Pass");
              //5.關閉page
              page.close();
              //6.關閉browser
              browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}