《剛(gang)剛(gang)問世(shi)》系列初窺(kui)篇-Java+Playwright自動化測試-30- 操作單選和(he)多選按鈕 - 番外篇（詳細教程(cheng)）
1.簡介
前邊幾(ji)篇文(wen)章是(shi)宏(hong)哥自己在本地弄了一(yi)(yi)(yi)個單選(xuan)(xuan)(xuan)(xuan)和(he)(he)多(duo)選(xuan)(xuan)(xuan)(xuan)的(de)demo，給(gei)小(xiao)伙伴或童鞋們(men)演示了一(yi)(yi)(yi)下(xia)如何(he)使用(yong)playwright來(lai)(lai)處(chu)理(li)單選(xuan)(xuan)(xuan)(xuan)按(an)鈕和(he)(he)多(duo)選(xuan)(xuan)(xuan)(xuan)按(an)鈕進(jin)(jin)行(xing)自動(dong)化(hua)測試，想(xiang)必(bi)大(da)家都已經掌握的(de)八九不(bu)離(li)十了吧(ba)。這一(yi)(yi)(yi)篇其(qi)實(shi)也很簡單，主(zhu)要是(shi)分兩部分內容來(lai)(lai)講(jiang)解和(he)(he)分享的(de)。一(yi)(yi)(yi)部分，宏(hong)哥是(shi)利用(yong)JQueryUI網(wang)站(zhan)里的(de)單選(xuan)(xuan)(xuan)(xuan)和(he)(he)多(duo)選(xuan)(xuan)(xuan)(xuan)按(an)鈕進(jin)(jin)行(xing)實(shi)戰(zhan)(zhan)，主(zhu)要是(shi)循環(huan)遍歷(li)，對前邊內容進(jin)(jin)行(xing)梳(shu)理(li)和(he)(he)回顧。另一(yi)(yi)(yi)部分就是(shi)宏(hong)哥在網(wang)上找了一(yi)(yi)(yi)個問卷調(diao)查例子，運用(yong)前邊所學的(de)知識趁(chen)熱(re)打鐵(tie)地給(gei)小(xiao)伙伴或童鞋們(men)來(lai)(lai)演示一(yi)(yi)(yi)下(xia)。前邊的(de)文(wen)章中的(de)一(yi)(yi)(yi)些單選(xuan)(xuan)(xuan)(xuan)和(he)(he)多(duo)選(xuan)(xuan)(xuan)(xuan)的(de)基(ji)本概念都介(jie)紹(shao)了，這里就不(bu)做贅(zhui)述了。直接上項(xiang)目進(jin)(jin)行(xing)實(shi)戰(zhan)(zhan)。
2.JQueryUI網站
這個是宏哥又找到的一個網站，不錯的，有(you)源碼。進入后可(ke)以搜索(suo)你要演示的demo。
2.1被測網址
1.被測網址(zhi)的(de)地址(zhi)：
為了方便演示，宏哥直(zhi)接將(jiang)其(qi)iframe中(zhong)的url拿出來了，否(fou)則你的定位到iframe，然后才能定位里邊的元素。這個(ge)坑宏哥之前遇(yu)到過一次。這里再次提醒(xing)一下。
2.網頁如下圖：
2.2代碼設計
宏哥這(zhe)里只演示(shi)單選的遍歷，復選的有興趣的童鞋可(ke)以自己(ji)試一下(xia)。根據(ju)demo中的遍歷思路進行代碼設計。如下(xia)圖所(suo)示(shi)：
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 北(bei)京(jing)-宏(hong)哥(ge) * * @公眾號(hao):北(bei)京(jing)宏(hong)哥(ge)（微信搜索，關注(zhu)宏(hong)哥(ge)，提前(qian)解(jie)鎖(suo)更多測試(shi)干貨） * * 《剛剛問世》系列(lie)初(chu)窺(kui)篇-Java+Playwright自(zi)動(dong)化測試(shi)-28- 操作單選和多選按鈕 - 中(zhong)篇（詳細教(jiao)程） * * 2025年01月(yue)26日 */ public class Test_Radio { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { //1.使(shi)用chromium瀏覽(lan)(lan)器(qi)，# 瀏覽(lan)(lan)器(qi)配置(zhi)，設置(zhi)以(yi)GUI模(mo)式啟動Chrome瀏覽(lan)(lan)器(qi)（要查看瀏覽(lan)(lan)器(qi)UI，在啟動瀏覽(lan)(lan)器(qi)時傳(chuan)遞 headless=false 標志。您(nin)還可以(yi)使(shi)用 slowMo 來(lai)減慢執行速度。 Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000)); //2.創(chuang)建context BrowserContext context = browser.newContext(); //創建page Page page = context.newPage(); //3.瀏覽器訪問demo page.navigate("//www.jq22.com/demo/inputStyle201703310052"); //4.定位(wei)所有單選按鈕 List<Locator> radios = page.locator("[name='hot']").all(); //遍歷(li)單(dan)選按鈕 for(Locator radio:radios){ //判(pan)斷單選按鈕是(shi)否選中，不選中才(cai)點擊 if(!radio.isChecked()){ //點擊單選按鈕(niu) radio.click(); } } System.out.println("Test Pass"); //5.關閉page page.close(); //6.關閉browser browser.close(); } } }
2.4運行代碼
1.運行代碼(ma)，右(you)鍵Run As->Java Application，就可以看到控制(zhi)臺輸出(chu)，如下(xia)圖所示：
2.運行代碼(ma)后電腦端的瀏覽器的動作（可(ke)以看到單(dan)選按(an)鈕(niu)挨個都被點(dian)到了）。如下(xia)圖(tu)所示：
3.項目實戰
3.1問卷調查
1.測試問卷調查的地址：
2.問卷頁面，如下圖所示：
3.2答題思路
自動化測試答(da)題思路，其實和(he)前(qian)邊單選多選的(de)遍歷差不多，具體(ti)思路如下：
1.首先(xian)找(zhao)到所有(you)單選(xuan)和多選(xuan)按鈕的共同(tong)點。
2.使用共(gong)同點(dian)來定位單選(xuan)和(he)多選(xuan)按鈕，將其放在容器(qi)中。
3.利用for循環將其（單(dan)選和多選按(an)鈕）從容器中一(yi)一(yi)遍歷出(chu)來(lai)，并(bing)進(jin)行逐個click。
3.3代碼設計
根據答題(ti)中的遍歷思(si)路進(jin)行代碼設計(ji)如下圖所(suo)示：
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 北(bei)京-宏哥 * * @公眾號:北(bei)京宏哥（微(wei)信搜(sou)索，關注宏哥，提前解鎖更多測(ce)試干貨） * * 《剛剛問世(shi)》系(xi)列(lie)初窺(kui)篇(pian)-Java+Playwright自動化測(ce)試-28- 操作單(dan)選和多選按鈕 - 中(zhong)篇(pian)（詳細教程(cheng)） * * 2025年01月29日(ri) */ public class Test_Radio { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { //1.使用chromium瀏(liu)覽器(qi)，# 瀏(liu)覽器(qi)配置(zhi)，設置(zhi)以GUI模式啟(qi)動Chrome瀏(liu)覽器(qi)（要查看瀏(liu)覽器(qi)UI，在(zai)啟(qi)動瀏(liu)覽器(qi)時傳遞 headless=false 標志。您還可(ke)以使用 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.瀏覽(lan)器(qi)訪問(wen)demo page.navigate("//www.sojump.com/m/2792226.aspx"); Thread.sleep(1000); //4.定位所有單選按(an)鈕 List<Locator> radios = page.locator("//*/div[@id='divQuestion']/fieldset/div/div/div/span/input/../a").all(); //遍(bian)歷單選按鈕 for(Locator radio:radios){ //點擊(ji)單選(xuan)按鈕(niu) radio.click(); } System.out.println("Test Pass"); //5.關閉(bi)page page.close(); //6.關閉browser browser.close(); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }
3.5運行代碼
1.運行(xing)代碼，右鍵(jian)Run As->Java Application，就可以(yi)看到控制(zhi)臺輸(shu)出(chu)，如下圖所示：
2.運行代(dai)碼后電腦端的(de)瀏覽器的(de)動(dong)作（可(ke)以看到所有題目的(de)單選(xuan)和多選(xuan)全部點(dian)擊一遍）。如下(xia)圖所示：
4.小結
4.1畫蛇添足
實踐過程中，宏哥(ge)遇到一個報錯，原就是畫蛇添足，多寫一段代碼：判斷(duan)按鈕是否選中，結果(guo)導致報錯：
Exception in thread "main" com.microsoft.playwright.PlaywrightException: Error {
message='Error: Not a checkbox or radio button
意思是(shi)：不(bu)是(shi)單選或(huo)者多(duo)選按鈕，宏哥F12查看果(guo)然不(bu)是(shi)，是(shi)一(yi)個(ge)input標簽，如下圖所示：
因此需要將那(nei)個判斷是否選(xuan)中的代碼取消之后，代碼成功運行。
今天其實(shi)就(jiu)是對(dui)前邊單選(xuan)和(he)多(duo)選(xuan)循環的(de)一次總結(jie)和(he)實(shi)踐。其他(ta)的(de)也(ye)(ye)沒(mei)有新的(de)東西。好了(le)，今天時間也(ye)(ye)不早(zao)了(le)，宏哥就(jiu)講解和(he)分(fen)享到這里，感謝您耐心的(de)閱讀，希望對(dui)您有所幫助。
感謝您花時間閱讀此篇文章,如果您覺得這篇文章你學到了東西也是為了犒勞下博主的碼字不易不妨打賞一下吧，讓博主能喝上一杯咖啡，在此謝過了！
如果您覺得閱讀本文對您有幫助，請點一下左下角 “推薦” 按鈕，您的 將是我最大的寫作動力！另外您也可以選擇 【 關注我 】 ，可以很方便找到我！
本文版權歸作者和博客園共有，來源網址： //www.xtjzw.net/du-hong 歡迎各位轉載，但是未經作者本人同意，轉載文章之后必須在文章頁面明顯位置給出作者和原文連接，否則保留追究法律責任的權利！
公眾號(關注宏哥) 微(wei)信群(掃碼進群)   客服微(wei)信
