Trabalhando com elementos select

Select lists have special behaviors compared to other elements.

The Select object will now give you a series of commands that allow you to interact with a <select> element.

If you are using Java or .NET make sure that you’ve properly required the support package in your code. See the full code from GitHub in any of the examples below.

Note that this class only works for HTML elements select and option. It is possible to design drop-downs with JavaScript overlays using div or li, and this class will not work for those.

Types

Select methods may behave differently depending on which type of <select> element is being worked with.

Single select

This is the standard drop-down object where one and only one option may be selected.

<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

This select list allows selecting and deselecting more than one option at a time. This only applies to <select> elements with the multiple attribute.

<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>

Create class

First locate a <select> element, then use it to initialize a Select object. Note that as of Selenium 4.5, you can’t create a Select object if the <select> element is disabled.

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

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

List options

There are two lists that can be obtained:

All options

Get a list of all options in the <select> element:

        List<WebElement> optionList = select.getOptions();
View full example on GitHub
    option_list = select.options
View full example on GitHub
            IList<IWebElement> optionList = select.Options;
View full example on GitHub
    option_list = select.options
View full example on GitHub
View full example on GitHub
    val optionList = select.getOptions()
View full example on GitHub

Selected options

Get a list of selected options in the <select> element. For a standard select list this will only be a list with one element, for a multiple select list it can contain zero or many elements.

        List<WebElement> selectedOptionList = select.getAllSelectedOptions();
View full example on GitHub
    selected_option_list = select.all_selected_options
View full example on GitHub
            IList<IWebElement> selectedOptionList = select.AllSelectedOptions;
View full example on GitHub
    selected_option_list = select.selected_options
View full example on GitHub
    }
View full example on GitHub
    val selectedOptionList = select.getAllSelectedOptions()
View full example on GitHub

Select option

The Select class provides three ways to select an option. Note that for multiple select type Select lists, you can repeat these methods for each element you want to select.

Text

Select the option based on its visible text

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

Value

Select the option based on its value attribute

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

Index

Select the option based on its position in the list

        select.selectByIndex(3);
View full example on GitHub
    select.select_by_index(3)
View full example on GitHub
            select.SelectByIndex(3);
View full example on GitHub
    select.select_by(:index, 3)
View full example on GitHub
    assert.equal(true, await twoElement.isSelected())
View full example on GitHub
    select.selectByIndex(3)
View full example on GitHub

Disabled options

Selenium v4.5

Options with a disabled attribute may not be selected.

    <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");
        });
View full example on GitHub
    with pytest.raises(NotImplementedError):
        select.select_by_value('disabled')
View full example on GitHub
            Assert.ThrowsException<InvalidOperationException>(() => select.SelectByValue("disabled"));
View full example on GitHub
    expect {
      select.select_by(:value, 'disabled')
    }.to raise_exception(Selenium::WebDriver::Error::UnsupportedOperationError)
View full example on GitHub
    const select = await new Select(selectElement)

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

De-select option

Only multiple select type select lists can have options de-selected. You can repeat these methods for each element you want to select.

        select.deselectByValue("eggs");
View full example on GitHub
    select.deselect_by_value('eggs')
View full example on GitHub
            select.DeselectByValue("eggs");
View full example on GitHub
    select.deselect_by(:value, 'eggs')
View full example on GitHub
    assert.equal(true, await gravyElement.isSelected())
View full example on GitHub
    select.deselectByValue("eggs")
View full example on GitHub
Última modificação November 17, 2023: Upgrade to Docsy 0 7 2 (#1529) (48f4361690)