[Feature] Resolve <select> element based on label text

[3flex]

It would be amazing to have something similar to #3466 but for <select> elements.

<label for="pet-select">Choose a pet</label>
<select id="pet-select">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>

Then allow using await page.selectOption('text=Choose a pet', 'dog')

[ychaudhari]

Hi @yury-s,

Not sure why github is not formatting this message properly but...

I have a select (drop-down box) like this (note <div> after <label> and around <select>)

<label for="cityId">City</label>
<div class="css-class-1 css-class-2">
  <select name="cityId" id="cityId" data-testid="city">
	 <option value="">Please select...</option>
	 <option value="1001">Mumbai</option>
	 <option value="1006">Delhi</option>
  </select>
</div>

I've tried to select it using

await page.selectOption('"City"', 'Mumbai');

or

await page.selectOption('text=City', 'Mumbai');

or even

await page.selectOption('[data-testid=city]', 'Mumbai');

but no luck
for both text and data-testid,
he debug logs say that selection is successful

pw:api => page.selectOption started +26ms
pw:api waiting for selector "[data-testid=city]" +13ms
pw:api   selector resolved to visible <select id="cityId" name="cityId" data-t…>…</select> +257ms
pw:api <= page.selectOption succeeded +44ms

but the browser does not register the selection

What could I be missing here?

[yury-s]

It should be

 await page.selectOption('text=City', {label: 'Mumbai'});

By default the second parameter is matched against option.value which is the value attribute. So an alternative would be

await page.selectOption('text=City', '1001');

[ychaudhari]

Awesome! that works! Thanks @yury-s for the quick reply

[QAscoop]

Awesome! that works! Thanks @yury-s for the quick reply

Does label match works with regex?