在執行Selenium自動瀏覽器測試時，很多時候需要處理下拉菜單。下拉菜單通常用於表單中，在節省空間和防止用戶在表單中選擇錯誤的選項時非常有用。因此在測試任何網站或訪問表單時，如何使用Selenium處理下拉列表顯得尤為重要。
為了對下拉菜單執行操作，可以在Selenium WebdriverIO中使用Select類。在本文中，演示如何使用Select來處理下拉菜單。
下拉菜單的不同類型
通常會在網站上找到兩種主要的下拉菜單。
- 正常下拉菜單
- 自定義下拉菜單
正常的下拉菜單是我們在Selenium中處理訪問表單時經常遇到的下拉菜單。識別正常的下拉菜單很容易，只需在瀏覽器中打開element標簽，然后查看該下拉HTML標簽即可。HTML標記應為<selcet>，id應為dropdown。
正常下拉列表
<select id="dropdown">
<option value="" disabled="disabled" selected="selected">Please select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
自定義下拉菜單
由於使用<selcet>的樣式選項不多，因此開發人員可以使用自定義下拉菜單。正如我們所討論的，自定義下拉列表不是使用<selcet>標記開發的，而是使用<div>標記或基於前端框架的其他一些自定義標記開發的。
<div class="fsw_inputBox travelFor inactiveWidget ">
<label data-cy="travellingFor" for="travelFor">
<span class="lbl_input latoBold appendBottom10">Travelling For</span><input data-cy="travelFor" id="travelFor" type="text" class="hsw_inputField font20" readonly="" value="">
<div class="code latoBold font14 blackText makeRelative">
<p></p>
<p class="font14 greyText">Select a Reason (optional)</p>
</div>
</label>
</div>
現在，了解了這兩個下拉菜單之間的區別。在Selenium測試自動化中，自定義下拉列表是根據開發人員定義的事件進行處理的，而常規下拉列表則由稱為Select類的特殊Selenium類對象進行處理。
處理下拉菜單
處理WebDriverIO中的下拉菜單非常簡單！沒有像Java或任何其他編程語言這樣的單獨的類對象。在這里，WebDriverIO下拉列表也可以通過簡單的選擇器訪問。
在正常下拉菜單中使用給定的HTML示例，您可以使用以下使用ID選擇器的語法查找下拉菜單對象。
Const drp = $("#dropdown");
下拉菜單有兩個選項。
- 單值下拉
- 多值下拉
訪問單個或多個值下拉菜單沒有區別，只是多個值下拉菜單允許用戶從下拉選項中選擇多個值。
WebDriverIO在下拉菜單上提供以下操作。
selectByIndex()selectByVisibleText()selectByAttribute()
selectByIndex
可以通過提供值的索引來選擇值的下拉列表。索引不過是下拉值的位置。索引始終從0開始。因此，第一個值被視為第0個索引。
句法：
$("selector").selectByIndex(index)
如果要選擇選項1，則可以使用以下代碼。
$("#dropdown").selectByIndex(0)
注意：當下拉列表值隨着值索引的頻繁變化而動態變化時，避免使用selectByIndex()。
selectByVisibleText
另一個選項是selectByVisibleText()。使用此選項非常安全，因為我們需要使用下拉值中顯示的下拉可見文本。
我們可以使用選項1或選項2作為選擇
句法：
$("Selector").selectByVisibleText(text)
如果要使用selectByVisibleText()選擇選項2，則使用下面的代碼；
$("#dropdown").selectByVisibleText("Option 2")
注意：使用selectByVisibleText()時，請保持可見文本不變，否則該元素將無法識別。
selectByAttribute
與其他用於Selenium測試自動化的框架相比，selectByAttribute()是非常靈活的東西。通常，在其他Selenium測試自動化框架中，您將使用selectByValue()選項，該選項允許用戶僅使用value屬性選擇下拉列表。但是，WebDriverIO提供了使用任何屬性的功能，並且其值存在於下拉列表中。
句法：
$("Selector").selectByAttribute(attribute, value)
在這里，屬性參數可以是
$("#dropdown").selectByAttribute("value", "1")
如果考慮普通的HTML下拉代碼，則只能看到一個value屬性。如果提供了任何其他屬性，那么也可以使用它。
多值下拉
如果您看到<select>標簽具有multiple="true"屬性，則此下拉列表具有選擇多個選項的功能。當您使多個值下拉列表自動化時，必須多次調用上述方法。當然也可以自定義方法實現這些功能，很可能需要借助JavaScript，這個有機會再講。
- 公眾號FunTester首發，更多原創文章：FunTester420+原創文章，歡迎關注、交流，禁止第三方擅自轉載。