Finding the value of a select option element using Wallaby.Query

Questions / Help
1

I’m writing a Wallaby test for a select element that looks something like this:

<select id="status-select" name="status">
   <option selected="" value="b9259ffd-a2de-488f-85f0-567d1e9a7159">new</option>  
   <option value="f56f5249-0920-4747-8e89-e8b07ba1a5e8">assigned</option>
</select>

The value attributes on the options are auto-assigned each time by the back-end system. So in order to be able to call Wallaby.Browser.set_value/3, I need to first query the page to find the current value for the option. My code to do that is:

value_fixture = Browser.find(
  session, 
  Query.css("#status-select > option:nth-child(2)", visible: false)
)
|> Element.attr("value")

If I execute the query expression in the browser console with a document.querySelectorAll(), it finds the right element for me.

image

But Wallaby doesn’t:

** (Wallaby.QueryError) Expected to find 1 invisible element that matched
the css ‘#status-select > option:nth-child(2)’, but 0 invisible elements were found.

Is there some other way to query the options of a select using Wallaby that I should be using?

2

web drivers sometimes work in mysterious ways, did you try without visible: false?

3

Argh. PEBCaK!

My fixture set-up had a bug, so the page that Wallaby was seeing didn’t actually have the set of statuses it should have have, and so the :nth-child() sub-expression was failing.

Doh.

1 Like
4

A couple questions.

  1. What are you trying to test, exactly? I ask because you’re not interacting with the option element as a user would, but rather querying for its value. Depending on what you’re trying to test (just that the values are presented as options), you may be able to move this test out of wallaby entirely.
  2. If the intent is to have the webdriver select a particular option as a user would, my tests that interaction with select/option elements use click(css("option[value=theValueIWantToSelect]"))
5

The goal is to be able to select an option in a select element, where the value attribute of the option can only be known at run time. In your example:

click(css("option[value=theValueIWantToSelect]"))

the actual value of theValueIWantToSelect will change each time the page is built. Hence the first step in writing the test is to query the page to get the current value of the option’s value attribute, and then to use that value in a call to Browser.set_value, which emulates the user’s interaction. Or, indeed, call click as in your example.

6

One final note for future reference: although it’s not (afaics), mentioned in the docs, but when setting the value of a select element, Wallaby.Browser.set_value/3 needs the text of the option to select, not the value.