使用選取列表元素

與其他元素相比,選取列表具有特殊的行為。

Select 物件現在將為您提供一系列命令,讓您與 <select> 元素互動。

如果您使用 Java 或 .NET,請確保您已在程式碼中正確引入支援套件。請參閱以下任何範例中 GitHub 上的完整程式碼。

請注意,此類別僅適用於 HTML 元素 `select` 和 `option`。可以使用 JavaScript 覆蓋層使用 `div` 或 `li` 設計下拉式選單,但此類別不適用於這些。

類型

Select 方法的行為可能會因正在使用的 <select> 元素類型而異。

單選

這是標準的下拉式物件,其中只能選取一個選項。

<select name="selectomatic">
    <option selected="selected" id="non_multi_option" value="one">One</option>
    <option value="two">Two</option>
    <option value="four">Four</option>
    <option value="still learning how to count, apparently">Still learning how to count, apparently</option>
</select>

多選

此選取列表允許一次選取和取消選取多個選項。這僅適用於具有 `multiple` 屬性的 `<select>` 元素。

<select name="multi" id="multi" multiple="multiple">
    <option selected="selected" value="eggs">Eggs</option>
    <option value="ham">Ham</option>
    <option selected="selected" value="sausages">Sausages</option>
    <option value="onion gravy">Onion gravy</option>
</select>

建立類別

首先找到 `<select>` 元素,然後使用它來初始化一個 `Select` 物件。請注意,從 Selenium 4.5 開始,如果 `<select>` 元素被停用,您將無法建立 `Select` 物件。

        WebElement selectElement = driver.findElement(By.name("selectomatic"));
        Select select = new Select(selectElement);
    select_element = driver.find_element(By.NAME, 'selectomatic')
    select = Select(select_element)
            var selectElement = driver.FindElement(By.Name("selectomatic"));
            var select = new SelectElement(selectElement);
    select_element = driver.find_element(name: 'selectomatic')
    select = Selenium::WebDriver::Support::Select.new(select_element)

  it('Select an option', async function () {
    val selectElement = driver.findElement(By.name("selectomatic"))
    val select = Select(selectElement)

列出選項

有兩個列表可以取得

所有選項

取得 `<select>` 元素中所有選項的列表

        List<WebElement> optionList = select.getOptions();
    option_list = select.options
            IList<IWebElement> optionList = select.Options;
    option_list = select.options
    val optionList = select.getOptions()

已選取選項

取得 `<select>` 元素中已選取選項的列表。對於標準選取列表,這只會是一個包含一個元素的列表;對於多選列表,它可以包含零個或多個元素。

        List<WebElement> selectedOptionList = select.getAllSelectedOptions();
    selected_option_list = select.all_selected_options
            IList<IWebElement> selectedOptionList = select.AllSelectedOptions;
    selected_option_list = select.selected_options
    val selectedOptionList = select.getAllSelectedOptions()

選取選項

Select 類別提供了三種選取選項的方式。請注意,對於多選類型的 Select 列表,您可以針對要選取的每個元素重複這些方法。

文字

根據其可見文字選取選項

        select.selectByVisibleText("Four");
    select.select_by_visible_text('Four')
            select.SelectByText("Four");
    select.select_by(:text, 'Four')
    const countElement = await driver.findElement(By.css("option[value='still learning how to count, apparently']"))
    select.selectByVisibleText("Four")

根據其值屬性選取選項

        select.selectByValue("two");
    select.select_by_value('two')
            select.SelectByValue("two");
    select.select_by(:value, 'two')
    assert.equal(true, await fourElement.isSelected())
    select.selectByValue("two")

索引

根據其在列表中的位置選取選項

        select.selectByIndex(3);
    select.select_by_index(3)
            select.SelectByIndex(3);
    select.select_by(:index, 3)
    assert.equal(true, await twoElement.isSelected())
    select.selectByIndex(3)

停用選項

Selenium v4.5

具有 `disabled` 屬性的選項可能無法被選取。

    <select name="single_disabled">
      <option id="sinlge_disabled_1" value="enabled">Enabled</option>
      <option id="sinlge_disabled_2" value="disabled" disabled="disabled">Disabled</option>
    </select>
        Assertions.assertThrows(UnsupportedOperationException.class, () -> {
            select.selectByValue("disabled");
        });
    with pytest.raises(NotImplementedError):
        select.select_by_value('disabled')
            Assert.ThrowsException<InvalidOperationException>(() => select.SelectByValue("disabled"));
    expect {
      select.select_by(:value, 'disabled')
    }.to raise_exception(Selenium::WebDriver::Error::UnsupportedOperationError)
    const select = await new Select(selectElement)

    await assert.rejects(async () => {
      await select.selectByValue("disabled")
    Assertions.assertThrows(UnsupportedOperationException::class.java) {
      select.selectByValue("disabled")
    }

取消選取選項

只有多選類型的選取列表才能取消選取選項。您可以針對要選取的每個元素重複這些方法。

        select.deselectByValue("eggs");
    select.deselect_by_value('eggs')
            select.DeselectByValue("eggs");
    select.deselect_by(:value, 'eggs')
    assert.equal(true, await gravyElement.isSelected())
    select.deselectByValue("eggs")
上次修改時間:2023 年 11 月 17 日: 升級至 Docsy 0 7 2 (#1529) (48f43616907)