internal(browser): Add Select Option action to Browser Test Editor

[going-confetti]

Description

• Add support for the Select option action
• ⚠️ This PR doesn't include any action options

How to Test

• Add a new Select option action
• Configure the locator and add some options to be selected
• Verify that the code is properly generated

Checklist

• I have performed a self-review of my code.
• I have added tests for my changes.
• I have commented on my code, particularly in hard-to-understand areas.

Related PR(s)/Issue(s)

---

Note

Medium Risk
Touches the browser test editor, action-to-test conversion, and codegen IR/emitter types, so regressions could impact generated scripts for select actions. Changes are additive and scoped, with minimal impact outside select-option handling.

Overview
Adds a new Select option action to the Browser Test Editor, including UI to configure one or more option matchers by value, label, or index.

Updates the browser test graph/types and action-to-test conversion to carry structured select values (deduped) and set multiple automatically.

Extends the browser codegen intermediate AST and scenario emitter with a new SelectOptionValueExpression so generated locator.selectOption(...) calls can emit either strings or { value, label, index } objects, and wires this through variable substitution and browser-scenario detection.

^{Reviewed by Cursor Bugbot for commit 51ba3a7. Bugbot is set up for automated code reviews on this repo. Configure here.}

[going-confetti]

This order is different from other actions, but feels more natural/easier to read IMO

[allansson]

Works great! UI feels good.

I think we should allow empty strings for value because it is valid HTML, but I'm happy to hear counter arguments.

[allansson]

value is allowed to be an empty string according to the HTML specification (but label is not).

Suggested change

	const nonEmpty = action.values.filter(
	(v) =>
	(v.value !== undefined && v.value !== '') ||
	(v.label !== undefined && v.label !== '') ||
	v.index !== undefined
	)
	const nonEmpty = action.values.filter(
	(v) =>
	(v.label !== undefined && v.label !== '') ||
	v.value !== undefined ||
	v.index !== undefined
	)

[allansson]

Maybe this is a dumb optimization, but we could dedupe the values for the user:

function getKey(v) {
  if (v.value !== undefined) {
    return `value:${v.value}`
  }

  if (v.label !== undefined) {
    return `label:${v.label}`
  }

  return `index:${v.index}`
}

const deduped = Object.values(keyBy(nonEmpty, getKey))

[going-confetti]

No, I think it's a good suggestion 👍

[going-confetti]

As noted by @allansson, empty values are not necessarily invalid, so SelectOptions needs to handle those in a better way. There should probably also be a better distinction between labels, values, and indexes. I'll try to create a separate PR for that change

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing nonEmpty filter before dedup allows invalid codegen
  • I filtered locator.selectOption entries to keep values/indexes and only non-empty labels before keyBy dedup so empty-label objects are no longer emitted in generated code.

Or push these changes by commenting:

@cursor push 8e43b1c30c

Preview (8e43b1c30c)

diff --git a/src/codegen/browser/test.ts b/src/codegen/browser/test.ts
--- a/src/codegen/browser/test.ts
+++ b/src/codegen/browser/test.ts
@@ -434,8 +434,14 @@
           },
         }
       case 'locator.selectOption': {
+        const nonEmpty = action.values.filter((v) => {
+          if (v.value !== undefined) return true
+          if (v.index !== undefined) return true
+          return v.label !== undefined && v.label.trim() !== ''
+        })
+
         const deduped = Object.values(
-          keyBy(action.values, (v) => {
+          keyBy(nonEmpty, (v) => {
             if (v.value !== undefined) return `value:${v.value}`
             if (v.label !== undefined) return `label:${v.label}`
             return `index:${v.index}`

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 51ba3a7. Configure here.}

[allansson]

LGTM! 👍

One small thing: maybe we should render value and label with quotes to make it clear if it's an empty value. We could also maybe use icons to indicate whether its a label, value or index.

But I think it's fine as it is and we can add polish later.

[going-confetti]

One small thing: maybe we should render value and label with quotes to make it clear if it's an empty value. We could also maybe use icons to indicate whether its a label, value or index.

But I think it's fine as it is and we can add polish later.

Yes, I did mention this implicitly in a comment above. I'll try to open a PR later today.