wip

Author: going-confetti

src/codegen/browser/code/options.ts

@@ -57,6 +57,7 @@ function isBrowserScenario(scenario: ir.Scenario) {
       case 'Identifier':
       case 'StringLiteral':
       case 'NullLiteral':
+      case 'SelectOptionValueExpression':
       case 'PromiseAllExpression':
         return false
 

src/codegen/browser/code/scenario.ts

@@ -298,6 +298,16 @@ function emitSelectOptionsExpression(
     .done()
 }
 
+function emitSelectOptionValueExpression(
+  expression: ir.SelectOptionValueExpression
+): ts.Expression {
+  return fromObjectLiteral({
+    value: expression.value,
+    label: expression.label,
+    index: expression.index,
+  })
+}
+
 function emitExpectExpression(
   context: ScenarioContext,
   expression: ir.ExpectExpression
@@ -527,6 +537,9 @@ function emitExpression(
     case 'CheckExpression':
       return emitCheckExpression(context, expression)
 
+    case 'SelectOptionValueExpression':
+      return emitSelectOptionValueExpression(expression)
+
     case 'SelectOptionsExpression':
       return emitSelectOptionsExpression(context, expression)
 

src/codegen/browser/intermediate/ast.ts

@@ -116,6 +116,13 @@ export interface CheckExpression {
   checked: boolean
 }
 
+export interface SelectOptionValueExpression {
+  type: 'SelectOptionValueExpression'
+  value?: string
+  label?: string
+  index?: number
+}
+
 export interface SelectOptionsExpression {
   type: 'SelectOptionsExpression'
   locator: Expression
@@ -218,6 +225,7 @@ export type Expression =
   | ClickOptionsExpression
   | FillTextExpression
   | CheckExpression
+  | SelectOptionValueExpression
   | SelectOptionsExpression
   | ExpectExpression
   | WaitForExpression

src/codegen/browser/intermediate/index.ts

@@ -288,10 +288,19 @@ function emitSelectOptionsNode(
     expression: {
       type: 'SelectOptionsExpression',
       locator,
-      selected: node.selected.map((value) => ({
-        type: 'StringLiteral',
-        value,
-      })),
+      selected: node.selected.map((value) => {
+        if (typeof value === 'string') {
+          return {
+            type: 'StringLiteral',
+            value,
+          }
+        }
+
+        return {
+          type: 'SelectOptionValueExpression',
+          ...value,
+        }
+      }),
       multiple: node.multiple,
     },
   })

src/codegen/browser/intermediate/variables.ts

@@ -170,6 +170,9 @@ function substituteExpression(
         locator: substituteExpression(node.locator, substitutions),
       }
 
+    case 'SelectOptionValueExpression':
+      return node
+
     case 'SelectOptionsExpression':
       return {
         type: 'SelectOptionsExpression',

src/codegen/browser/test.ts

@@ -423,18 +423,24 @@ function buildBrowserNodeGraphFromActions(
             locator: getLocator(action.locator),
           },
         }
-      case 'locator.selectOption':
+      case 'locator.selectOption': {
+        const nonEmpty = action.values.filter(
+          (v) =>
+            (v.value !== undefined && v.value !== '') ||
+            (v.label !== undefined && v.label !== '') ||
+            v.index !== undefined
+        )
+        const selected = nonEmpty.length > 0 ? nonEmpty : ['']
         return {
           type: 'select-options',
           nodeId: crypto.randomUUID(),
-          selected: action.values.map(
-            (v) => v.value ?? v.label ?? String(v.index ?? '')
-          ),
-          multiple: action.values.length > 1,
+          selected,
+          multiple: nonEmpty.length > 1,
           inputs: {
             locator: getLocator(action.locator),
           },
         }
+      }
       case 'page.waitForNavigation':
       case 'page.close':
       case 'page.*':

src/codegen/browser/types.ts

@@ -70,7 +70,7 @@ export interface TypeTextNode extends NodeBase {
 
 export interface SelectOptionsNode extends NodeBase {
   type: 'select-options'
-  selected: string[]
+  selected: (string | { value?: string; label?: string; index?: number })[]
   multiple: boolean
   inputs: {
     previous?: NodeRef

src/views/BrowserTestEditor/ActionForms/forms/SelectOptionValuesForm.tsx

@@ -21,6 +21,12 @@ type SelectOptionValue = LocatorSelectOptionAction['values'][number]
 
 type MatchType = 'value' | 'label' | 'index'
 
+function isNonEmptyValue(entry: SelectOptionValue): boolean {
+  if (entry.label !== undefined) return entry.label !== ''
+  if (entry.index !== undefined) return true
+  return (entry.value ?? '') !== ''
+}
+
 function getMatchType(entry: SelectOptionValue): MatchType {
   if (entry.label !== undefined) return 'label'
   if (entry.index !== undefined) return 'index'
@@ -54,6 +60,14 @@ export function SelectOptionValuesForm({
   onChange,
 }: SelectOptionValuesFormProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const [isTouched, setIsTouched] = useState(false)
+
+  const handlePopoverOpenChange = (open: boolean) => {
+    setIsPopoverOpen(open)
+    if (!open) {
+      setIsTouched(true)
+    }
+  }
 
   const handleChangeType = (index: number, type: MatchType) => {
     const current = values[index]
@@ -81,14 +95,24 @@ export function SelectOptionValuesForm({
     onChange(values.filter((_, i) => i !== index))
   }
 
+  const nonEmptyValues = values.filter(isNonEmptyValue)
+
   return (
-    <Popover.Root open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+    <Popover.Root open={isPopoverOpen} onOpenChange={handlePopoverOpenChange}>
       <Popover.Trigger>
         <ValuePopoverBadge
           displayValue={
-            values.length === 0 ? '(none)' : <SelectOptions options={values} />
+            nonEmptyValues.length === 0 ? (
+              'option(s)'
+            ) : (
+              <SelectOptions options={nonEmptyValues} />
+            )
+          }
+          error={
+            isTouched && nonEmptyValues.length === 0
+              ? 'At least one option is required'
+              : null
           }
-          error={values.length === 0 ? 'At least one option is required' : null}
         />
       </Popover.Trigger>
       <Popover.Content align="start" size="1" width="360px">

src/views/BrowserTestEditor/Actions/SelectOptionAction/SelectOptionActionBody.tsx

@@ -33,16 +33,16 @@ export function SelectOptionActionBody({
       width="100%"
     >
       Select
-      <LocatorForm
-        state={action.locator}
-        onChange={handleChangeLocator}
-        suggestedRoles={['combobox', 'listbox']}
-      />
-      with
       <SelectOptionValuesForm
         values={action.values}
         onChange={handleChangeValues}
       />
+      in
+      <LocatorForm
+        state={action.locator}
+        onChange={handleChangeLocator}
+        suggestedRoles={['combobox', 'listbox', 'menu', 'radiogroup']}
+      />
     </Grid>
   )
 }

src/views/BrowserTestEditor/actionEditorRegistry.tsx

@@ -142,7 +142,15 @@ const actionEditors: ActionEditorRegistry = {
       id: crypto.randomUUID(),
       method: 'locator.selectOption',
       values: [{ value: '' }],
-      locator: createDefaultLocatorOptions(),
+      locator: {
+        current: 'role',
+        values: {
+          role: {
+            type: 'role',
+            role: 'combobox',
+          },
+        },
+      },
     }),
   },
   'page.goto': {