Support string-`label`s in `locator.selectOption`

[olegbespalov]

What?

While working on fixing panic from grafana/xk6-browser#1415 (PR grafana/xk6-browser#1552) we figured out that the locator.selectOption also currently doesn't support selecting by label if it's a string input, the cases like:

<select name="numbers" id="numbers-options" multiple>
	<option value="zero">Zero</option>
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
	<option value="four">Four</option>
	<option value="five">Five</option>
</select>

await options.selectOption(['Two', 'Four']); // labels
await options.selectOption('Five'); // label

The playwright does support that https://playwright.dev/docs/api/class-locator#locator-select-option

Workaround

As the workaround for now (if grafana/xk6-browser#1552 merged) you could use object definition, like:

import { browser } from 'k6/browser';

export const options = {
	scenarios: {
		browser: {
			executor: 'shared-iterations',
			options: {
  			   browser: {
  				   type: 'chromium',
  			   },
  			},
		},
	},
};
export default async function () {
	const page = await browser.newPage();
	await page.goto('https://test.k6.io/browser.php');
	const options = page.locator('#numbers-options');

	await options.selectOption([{label:'One'}, {label:'Three'}]); // multiply labels
	await page.screenshot({ path: 'screenshots.png' });
}

Why?

It's expected to also be able to select options by label.

[navyanihitha]

Hi @ankur22 , @olegbespalov . Interested to work on this issue, Wanted to check if I could contribute to this

[ankur22]

@navyanihitha, sure, please go ahead and open a PR 😄