1.簡介
今天這一篇宏哥主要是講解一下，如何使用list容器來遍歷單選按鈕。大致兩部分內容：一部分是宏哥在本地弄的一個小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.頁面效果，如下圖所示：
2.2單選遍歷
遍歷思路：
1.首先找到所有單選按鈕的共同點。
2.使用共同點來定位單選按鈕，將其放在list容器中。
3.利用for循環將其從容其中一一遍歷出來。
2.3代碼設計
根據上邊的遍歷思路進行代碼設計如下圖所示：
2.4參考代碼
package lessons; import java.util.List; import java.util.concurrent.TimeUnit; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * 《手把手教你》系列技巧篇（三十四）-java+ selenium自動化測試-單選和多選按鈕操作-中篇（詳解教程） * * 2021年10月20日 */ public class operatRadio { @Test public void testRadio() { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); WebDriver driver =null; driver =new ChromeDriver(); driver.get("file:///C:/Users/DELL/Desktop/test/radio.html"); try{ driver.manage().window().maximize(); driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); List<WebElement> dx = driver.findElements(By.name("radio")); //將name屬性為radio的所有單選按鈕對象，存儲到一個list容器中 //使用for循環遍歷list容器中的每一個單選按鈕，查找value=2的單選按鈕 for ( WebElement d : dx ){ //如果查詢到此按鈕沒有被選中，則單擊選擇 if ( d.getAttribute("value").equals("2")){ if ( !d.isSelected()) d.click(); } } Thread.sleep(2000); }catch (Exception e) { e.printStackTrace(); }finally { driver.quit(); } } }
2.5運行代碼
1.運行代碼，右鍵Run AS->Junit Test，控制台輸出，如下圖所示：
2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：
3.JQueryUI網站
3.1被測網址
1.被測網址的地址：
https://jqueryui.com/resources/demos/checkboxradio/default.html
2.網頁如下圖：
3.2代碼設計
根據demo中的遍歷思路進行代碼設計如下圖所示：
3.3參考代碼
package lessons; import java.util.List; import java.util.concurrent.TimeUnit; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * 《手把手教你》系列技巧篇（三十四）-java+ selenium自動化測試-單選和多選按鈕操作-中篇（詳解教程） * * 2021年10月20日 */ public class operatRadio { @Test public void testRadio() { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); WebDriver driver =null; driver =new ChromeDriver(); driver.get("https://jqueryui.com/resources/demos/checkboxradio/default.html"); try{ driver.manage().window().maximize(); Thread.sleep(2000); driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); List<WebElement> dx = driver.findElements(By.xpath("//*/div/fieldset[1]/label/span[1]")); //將name屬性為radio的所有單選按鈕對象，存儲到一個list容器中 //使用for循環遍歷list容器中的每一個單選按鈕 for ( WebElement d : dx ){ //按遍歷順序依次點擊按鈕 d.click(); Thread.sleep(1000); } }catch (Exception e) { e.printStackTrace(); }finally { // driver.quit(); } } }
3.4運行代碼
1.運行代碼，右鍵Run AS->Junit Test，控制台輸出，如下圖所示：
2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：
4.小結
好了時間不早了，今天就分享到這里！！！