《剛剛問世》系列初窺篇(pian)-Java+Playwright自(zi)動(dong)化測(ce)試-24- 操作Select下拉選擇框 - 上篇(pian)（詳細教程）

1.簡介

在(zai)實際自動化(hua)測試過程(cheng)中(zhong)，我們(men)(men)也(ye)避免不了會遇到下(xia)(xia)拉(la)框(kuang)(kuang)選擇的測試，因此宏哥在(zai)這里直(zhi)接分享和介紹一(yi)下(xia)(xia)，希望小伙伴(ban)或者童鞋們(men)(men)在(zai)以后工作(zuo)中(zhong)遇到可以有(you)所(suo)幫助。今天，我們(men)(men)講下(xia)(xia)playwright的下(xia)(xia)拉(la)框(kuang)(kuang)怎么(me)處(chu)理，在(zai)使用(yong)selenium定(ding)位(wei)的過程(cheng)中(zhong)，我們(men)(men)可以選擇使用(yong)selenium的Select類定(ding)位(wei)操作(zuo)選擇框(kuang)(kuang)（比(bi)較復雜），但是(shi)在(zai)playwright中(zhong)真的炒雞(ji)方便,而且我們(men)(men)在(zai)Python語言(yan)中(zhong)已(yi)經體驗過其便利(li)之(zhi)處(chu)，今天跟隨宏哥來看一(yi)下(xia)(xia)java語言(yan)中(zhong)是(shi)如何通過playwright處(chu)理下(xia)(xia)拉(la)選擇框(kuang)(kuang)的。

2.什么是下拉選擇框

下(xia)拉框(kuang)是一種常見的用(yong)戶(hu)交互(hu)界面控件，一般用(yong)于向用(yong)戶(hu)顯示(shi)多項(xiang)(xiang)可選(xuan)項(xiang)(xiang)，并從(cong)中讓用(yong)戶(hu)選(xuan)擇(ze)一個最(zui)佳(jia)答案。用(yong)戶(hu)可以從(cong)下(xia)拉框(kuang)內的給定(ding)列表中選(xuan)擇(ze)一項(xiang)(xiang)，從(cong)而輸入對(dui)應(ying)內容，可以讓Web設計師快速實現可空白集成以及簡(jian)(jian)便操作，簡(jian)(jian)化用(yong)戶(hu)輸入。

下(xia)拉(la)框可以(yi)有(you)不同的布局(ju)和(he)表現形式。例如，普(pu)通的下(xia)拉(la)框由復選框和(he)滾動(dong)條組成，可以(yi)用來讓用戶在多個選擇項中進(jin)行選擇。也可以(yi)使用下(xia)拉(la)框來處理大數據，使搜索變(bian)得更快(kuai)。還有(you)一種下(xia)拉(la)框布局(ju)容納輸入框，提(ti)高用戶輸入效率。

下拉框有很多(duo)種優點。首先，它(ta)可以(yi)美化Web界面和(he)節省空間，將多(duo)項選擇以(yi)垂直形式呈(cheng)現，節省空間。其次，它(ta)可以(yi)幫助保護用戶免受錯誤輸入(ru)，只(zhi)能從列(lie)表內選擇，從而避免用戶輸入(ru)錯誤的(de)數據，如拼寫(xie)錯誤的(de)文本(ben)。此外，下拉框可以(yi)簡化用戶C（Control）操作(zuo)(zuo)，提高操作(zuo)(zuo)效(xiao)率，更(geng)容(rong)易操作(zuo)(zuo)和(he)反映用戶意圖。

更(geng)重(zhong)要(yao)的(de)是(shi)，下(xia)拉框(kuang)可(ke)以幫助減少(shao)用(yong)(yong)戶(hu)輸(shu)入時間，并減少(shao)干擾，避免用(yong)(yong)戶(hu)在全部文本選(xuan)項中搜索。特別(bie)是(shi)在輸(shu)入大量資料時，可(ke)以減少(shao)完成這項任務所需(xu)的(de)時間，從而(er)提高用(yong)(yong)戶(hu)對網頁的(de)使用(yong)(yong)體驗。

總(zong)之，下拉框(kuang)在網(wang)頁(ye)設(she)計(ji)中經常使(shi)用，它具有很多優點(dian)，可以美化Web界(jie)面，提(ti)高用戶的輸入(ru)效率(lv)，減少用戶的輸入(ru)時(shi)間，幫(bang)助用戶更好地控制后(hou)臺系統，并降(jiang)低錯誤錄(lu)入(ru)的可能(neng)性(xing)。

3.Select用法

在Playwright中使用locator.selectOption()選擇元素中的一個或多個選項。我們可以指定選項value，或label選擇并且可以選擇多個選項。官方使用示例如下：

// Single selection matching the value or label
page.getByLabel("Choose a color").selectOption("blue");

// Single selection matching the label
page.getByLabel("Choose a color").selectOption(new SelectOption().setLabel("Blue"));

// Multiple selected items
page.getByLabel("Choose multiple colors").selectOption(new String[] {"red", "green", "blue"});

3.1select元素demo

1.準備測試練(lian)習select.html，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試Select</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-bottom: 100px;
            text-decoration:none;
            color: white;
        }
        #myAnchor
        {
          text-decoration:none;
          color: white;
        }
    </style>
</head>
<body>
 <button class="button1"><a id="myAnchor" href="//www.xtjzw.net/du-hong/">北京-宏哥</a></button></br>
    快遞郵寄地址：
    <select id="select_id" name="select_name" class ="select_cls">
        <option value="0">請選擇</option>
        <option value="1">山西</option>
        <option value="2">陜西</option>
        <option value="3">山東</option>
        <option value="4">四川</option>
        <option value="5">河北</option>
    </select>省_XXX_市_ XXX_街道
</body>
</html>

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

3.2仿照官方示例

# single selection matching the value or label

element.selectOption("1");

# single selection matching the label

element.selectOption(new SelectOption().setLabel("山東"));

# select_name selection for 0, 1 and second option

element.selectOption(new String[] {"0", "1", "2","3", "4", "5"});

3.3操作select選擇框

3.3.1語法

第一種方法：通過(guo)page對象(xiang)直接調用，如下：

page.selectOption(selector,value);        # 通過value選擇
page.selectOption(selector,index);        # 通過index選擇
page.selectOption(selector,label);        # 通過label選擇

以上方法(fa)是：使用(yong)selector選擇器，先(xian)定位元素

第一種通過value選擇，顧名思義，可以通過我們的選擇框的value元素進行選擇

第二種通過index選擇，意思是我們可以通過下標來選擇

第三種通過label選擇，意思是我們可以通過選項值來選擇

第(di)二種方法：先定位select元素，再(zai)定位選項，如下：

select = page.getByLabel("選擇:");
select.selectOption(new SelectOption().setLabel("forth"));

4.牛刀小試

4.1先定位select元素，再定位選項

首(shou)先宏哥準備(bei)一個(ge)測試demo的html，因為在線的不好找或者不滿足要演示的要求。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試Select</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-bottom: 100px;
            text-decoration:none;
            color: white;
        }
        #myAnchor
        {
          text-decoration:none;
          color: white;
        }
    </style>
</head>
<body>
 <button class="button1"><a id="myAnchor" href="//www.xtjzw.net/du-hong/">北京-宏哥</a></button></br>
    <label>快遞郵寄地址：
        <select id="select_id" name="select_name" class ="select_cls">
            <option value="0">請選擇</option>
            <option value="1">山西</option>
            <option value="2">陜西</option>
            <option value="3">山東</option>
            <option value="4">四川</option>
            <option value="5">河北</option>
        </select>省_XXX_市(shi)_ XXX_街道(dao)
    </label>
</body>
</html>

4.1.1根據選項名稱定位

根據前(qian)邊的(de)理論(lun)知識進行(xing)選項名稱定(ding)位。

4.1.1.1代碼設計

4.1.1.2參考代碼

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 北京-宏哥
 * 
 * @公眾號:北京宏哥（微(wei)信搜索，關注宏哥，提前(qian)解(jie)鎖更多測(ce)試(shi)干貨）
 * 
 * 《剛剛問(wen)世》系列初窺篇(pian)-Java+Playwright自動化測(ce)試(shi)-24- 操作Select下拉選(xuan)擇框 - 上(shang)篇(pian)（詳細教程）
 *
 * 2024年10月25日
 */
public class Test_Select {
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
              //1.使(shi)用chromium瀏覽(lan)器(qi)，# 瀏覽(lan)器(qi)配置(zhi)(zhi)，設(she)置(zhi)(zhi)以GUI模(mo)式啟動(dong)Chrome瀏覽(lan)器(qi)（要查看(kan)瀏覽(lan)器(qi)UI，在啟動(dong)瀏覽(lan)器(qi)時傳遞 headless=false 標志(zhi)。您還可以使(shi)用 slowMo 來減慢執行速度。
              Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
              //2.創建context
              BrowserContext context = browser.newContext();
              //創建(jian)page
              Page page = context.newPage();
              //3.瀏覽器訪問demo
              page.navigate("file:///E:/Desktop/test/select.html");
              //4.選項名(ming)稱(cheng)定位
              Locator select = page.getByLabel("快遞郵寄地址：");
              List<String> option = select.selectOption("山西");
              System.out.println(option);
              System.out.println("Test Pass");
              //關閉page
              page.close();
              //關閉browser
              browser.close();
        }
    }
}

4.1.1.3運行代碼

1.運行代碼，右鍵Run As->Java Application，就可以看到控(kong)制(zhi)臺輸(shu)出(chu)，如(ru)下圖(tu)所示：

2.運行代(dai)碼后電腦端的瀏覽器(qi)的動作(zuo)（下拉選擇(ze)框選擇(ze)了“山西”）。如下圖所示：

4.1.2根據index索引定位

根據前邊的理論知識進行index索引定位。

4.1.2.1代碼設計

4.1.2.2參考代碼

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;
import com.microsoft.playwright.options.SelectOption;

/**
 * @author 北京-宏哥
 * 
 * @公眾號:北京宏哥（微信搜索，關注宏哥，提前解鎖更多測(ce)試(shi)干貨）
 * 
 * 《剛剛問世》系列(lie)初窺篇(pian)-Java+Playwright自動化測(ce)試(shi)-24- 操作Select下(xia)拉選擇框 - 上篇(pian)（詳(xiang)細(xi)教程）
 *
 * 2024年10月(yue)25日
 */
public class Test_Select {
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
              //1.使(shi)用(yong)chromium瀏(liu)(liu)覽(lan)器(qi)，# 瀏(liu)(liu)覽(lan)器(qi)配置，設置以(yi)GUI模式啟動Chrome瀏(liu)(liu)覽(lan)器(qi)（要查看瀏(liu)(liu)覽(lan)器(qi)UI，在啟動瀏(liu)(liu)覽(lan)器(qi)時傳遞 headless=false 標志。您還可以(yi)使(shi)用(yong) 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.瀏覽器訪問(wen)demo
              page.navigate("file:///E:/Desktop/test/select.html");
              //4.根據index索引定位
              Locator select = page.getByLabel("快遞郵寄地址：");
              List<String> option = select.selectOption(new SelectOption().setIndex(3));
              System.out.println(option);
              System.out.println("Test Pass");
              //關(guan)閉page
              page.close();
              //關閉browser
              browser.close();
        }
    }
}

4.1.2.3運行代碼

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

2.運(yun)行(xing)代碼后電腦端的(de)瀏覽(lan)器的(de)動作(zuo)（下拉選擇框(kuang)選擇index=3，也就是“山(shan)東”）。如下圖(tu)所示：

4.1.3根據label標簽定位

根據前邊的理論知識進行label標簽定位。

4.1.3.1代碼設計

4.1.3.2參考代碼

（1）select的html元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試Select</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-bottom: 100px;
            text-decoration:none;
            color: white;
        }
        #myAnchor
        {
          text-decoration:none;
          color: white;
        }
    </style>
</head>
<body>
 <button class="button1"><a id="myAnchor" href="//www.xtjzw.net/du-hong/">北京-宏哥</a></button></br>
    <label>快遞郵寄地址：
        <select id="select_id" name="select_name" class ="select_cls">
            <option value="0" label="零">請選擇</option>
            <option value="1" label="第一">山西</option>
            <option value="2" label="第二">陜西</option>
            <option value="3" label="第三">山東</option>
            <option value="4" label="第四">四川</option>
            <option value="5" label="第五">河北</option>
        </select>省_XXX_市_ XXX_街道
    </label>
</body>
</html>

（2）定位操作

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;
import com.microsoft.playwright.options.SelectOption;

/**
 * @author 北(bei)京(jing)-宏(hong)哥
 * 
 * @公眾號:北(bei)京(jing)宏(hong)哥（微信(xin)搜索(suo)，關注宏(hong)哥，提前(qian)解鎖(suo)更(geng)多測試干貨）
 * 
 * 《剛剛問世》系(xi)列初窺篇-Java+Playwright自(zi)動化(hua)測試-24- 操(cao)作Select下(xia)拉(la)選擇(ze)框 - 上篇（詳細(xi)教程）
 *
 * 2024年10月25日
 */
public class Test_Select {
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
              //1.使用chromium瀏(liu)(liu)覽器(qi)，# 瀏(liu)(liu)覽器(qi)配置，設置以GUI模式啟(qi)動Chrome瀏(liu)(liu)覽器(qi)（要查看瀏(liu)(liu)覽器(qi)UI，在啟(qi)動瀏(liu)(liu)覽器(qi)時傳遞 headless=false 標志。您(nin)還可(ke)以使用 slowMo 來(lai)減慢執行速度。
              Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
              //2.創建context
              BrowserContext context = browser.newContext();
              //創建page
              Page page = context.newPage();
              //3.瀏覽器(qi)訪問demo
              page.navigate("file:///E:/Desktop/test/select.html");
              //4.根據(ju)label標簽定位
              Locator select = page.getByLabel("快遞郵寄地址：");
              List<String> option = select.selectOption(new SelectOption().setLabel("第五"));
              System.out.println(option);
              System.out.println("Test Pass");
              //關閉page
              page.close();
              //關閉browser
              browser.close();
        }
    }
}

4.1.3.3運行代碼

1.運行代(dai)碼，右鍵(jian)Run As->Java Application，就可以(yi)看到控(kong)制(zhi)臺(tai)輸出，如下圖(tu)所(suo)示：

2.運行代碼后電腦端的瀏覽器的動作(zuo)。如下圖所示：

5.小結

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

posted @ 2025-07-29 16:06 北京-宏哥閱讀(327) 評論(0) 收藏舉報

刷新頁面返回頂部

中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

北京-宏哥

《剛剛問世》系列初窺篇(pian)-Java+Playwright自(zi)動(dong)化測(ce)試-24- 操作Select下拉選擇框 - 上篇(pian)（詳細教程）

1.簡介

2.什么是下拉選擇框

3.Select用法

3.1select元素demo

3.2仿照官方示例

3.3操作select選擇框

3.3.1語法

4.牛刀小試

4.1先定位select元素，再定位選項

4.1.1根據選項名稱定位

4.1.1.1代碼設計

4.1.1.2參考代碼

4.1.1.3運行代碼

4.1.2根據index索引定位

4.1.2.1代碼設計

4.1.2.2參考代碼

4.1.2.3運行代碼

4.1.3根據label標簽定位

4.1.3.1代碼設計

4.1.3.2參考代碼

4.1.3.3運行代碼

5.小結

公告

中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

北京-宏哥

《剛剛問世》系列初窺篇(pian)-Java+Playwright自(zi)動(dong)化測(ce)試-24- 操作Select下拉選擇框 - 上篇(pian)（詳細教程）

1.簡介

2.什么是下拉選擇框

3.Select用法

3.1select元素demo

3.2仿照官方示例

3.3操作select選擇框

3.3.1語法

4.牛刀小試

4.1先定位select元素，再定位選項

4.1.1根據選項名稱定位

4.1.1.1代碼設計

4.1.1.2參考代碼

4.1.1.3運行代碼

4.1.2根據index索引定位

4.1.2.1代碼設計

4.1.2.2參考代碼

4.1.2.3運行代碼

4.1.3根據label標簽定位

4.1.3.1代碼設計

4.1.3.2參考代碼

4.1.3.3運行代碼

5.小結

公告

《剛剛問世》系列初窺篇(pian)-Java+Playwright自(zi)動(dong)化測(ce)試-24- 操作Select下拉選擇框 - 上篇(pian)（詳細教程）