bug(core): select option with html whitespaces

packages/injected/src/injectedScript.ts

@@ -786,16 +786,18 @@ export class InjectedScript {
     let remainingOptionsToSelect = optionsToSelect.slice();
     for (let index = 0; index < options.length; index++) {
       const option = options[index];
+      const normalizedOptionLabel = normalizeWhiteSpace(option.label);
       const filter = (optionToSelect: Node | { valueOrLabel?: string, value?: string, label?: string, index?: number }) => {
         if (optionToSelect instanceof Node)
           return option === optionToSelect;
+        const matchesLabel = (label: string) => label === option.label || normalizeWhiteSpace(label) === normalizedOptionLabel;
         let matches = true;
         if (optionToSelect.valueOrLabel !== undefined)
-          matches = matches && (optionToSelect.valueOrLabel === option.value || optionToSelect.valueOrLabel === option.label);
+          matches = matches && (optionToSelect.valueOrLabel === option.value || matchesLabel(optionToSelect.valueOrLabel));
         if (optionToSelect.value !== undefined)
           matches = matches && optionToSelect.value === option.value;
         if (optionToSelect.label !== undefined)
-          matches = matches && optionToSelect.label === option.label;
+          matches = matches && matchesLabel(optionToSelect.label);
         if (optionToSelect.index !== undefined)
           matches = matches && optionToSelect.index === index;
         return matches;

tests/assets/input/select.html

@@ -20,6 +20,7 @@
       <option value="violet">Violet</option>
       <option value="white" id="whiteOption">White</option>
       <option value="yellow">Yellow</option>
+      <option value="html">&nbsp;HTML</option>
     </select>
     <script>
       window.result = {

tests/page/expect-to-have-accessible.spec.ts

@@ -29,6 +29,13 @@ test('toHaveAccessibleName', async ({ page }) => {
 
   await page.setContent(`<button>foo&nbsp;bar\nbaz</button>`);
   await expect(page.locator('button')).toHaveAccessibleName('foo bar baz');
+
+  await page.setContent(`
+    <select>
+      <option>&nbsp;HTML</option>
+    </select>
+  `);
+  await expect(page.locator('option')).toHaveAccessibleName('HTML');
 });
 
 test('toHaveAccessibleDescription', async ({ page }) => {

tests/page/page-select-option.spec.ts

@@ -48,6 +48,13 @@ it('should select single option by label', async ({ page, server }) => {
   expect(await page.evaluate(() => window['result'].onChange)).toEqual(['indigo']);
 });
 
+it('should select single option by label with html whitespace', async ({ page, server }) => {
+  await page.goto(server.PREFIX + '/input/select.html');
+  await page.selectOption('select', { label: 'HTML' });
+  expect(await page.evaluate(() => window['result'].onInput)).toEqual(['html']);
+  expect(await page.evaluate(() => window['result'].onChange)).toEqual(['html']);
+});
+
 it('should select single option by handle', async ({ page, server }) => {
   await page.goto(server.PREFIX + '/input/select.html');
   await page.selectOption('select', await page.$('[id=whiteOption]'));

tests/page/selectors-role.spec.ts

@@ -497,6 +497,15 @@ test('should support name', async ({ page }) => {
   ]);
 });
 
+test('should support option name with html whitespace', async ({ page }) => {
+  await page.setContent(`
+    <select>
+      <option value="html">&nbsp;HTML</option>
+    </select>
+  `);
+  await expect(page.getByRole('option', { name: 'HTML' })).toHaveCount(1);
+});
+
 test('errors', async ({ page }) => {
   const e0 = await page.$('role=[bar]').catch(e => e);
   expect(e0.message).toContain(`Role must not be empty`);