selectOptions by option content

https://github.com/testing-library/user-event#selectoptionselement-values

Users do not interact with <select/> elements by the option value because it is not visible. Users typically select by the text content of each option that they can see.

This is possibly a separate issue, but the current example in the readme is unclear about whether the option content or the value is used to select because the values and content are the same.

<option data-testid="val1" value="1">
  1
</option>

userEvent.selectOptions(getByTestId("select-multiple"), ["1", "3"]);

While the example is unclear, there is some text: The values parameter can be either an array of values or a singular scalar value.

[kentcdodds]

I think this PR handles this best, so I’ll go ahead and close this.

[andypearson]

Hello, I come from Ruby and Rails land, where the syntax for selecting an option using Capybara looks like this:

page.select 'March', from: 'Month'

The option is selected based on the visible text of the <option> not the value.

Docs for this method are here: https://www.rubydoc.info/github/jnicklas/capybara/Capybara%2FNode%2FActions:select

I was, therefore, expecting userEvent.selectOptions to work in a similar fashion and have just spent a good long while trying to work out why my test wasn’t working 😃

I would agree with @jsphstls that the default behaviour should be selecting by the <option> text, and “special” behaviour should be supported by passing in option nodes directly.

Additionally, if you do something like:

userEvent.selectOptions(getByLabelText("Month"), "Monday")

You don’t get a warning that the option value doesn’t exist in the <select>, which meant it wasn’t obvious to work out that “nothing” was being selected when I called selectOptions.