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

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,12 +423,29 @@ function buildBrowserNodeGraphFromActions(
             locator: getLocator(action.locator),
           },
         }
+      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,
+          multiple: nonEmpty.length > 1,
+          inputs: {
+            locator: getLocator(action.locator),
+          },
+        }
+      }
       case 'page.waitForNavigation':
       case 'page.close':
       case 'page.*':
       case 'locator.dblclick':
       case 'locator.type':
-      case 'locator.selectOption':
       case 'locator.hover':
       case 'locator.setChecked':
       case 'locator.tap':

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

@@ -0,0 +1,190 @@
+import { css } from '@emotion/react'
+import {
+  Button,
+  Flex,
+  IconButton,
+  Popover,
+  ScrollArea,
+  Select,
+  TextField,
+} from '@radix-ui/themes'
+import { PlusIcon, XIcon } from 'lucide-react'
+import { Fragment, useState } from 'react'
+
+import { SelectOptions } from '@/components/Browser/SelectOptions'
+import { FieldGroup } from '@/components/Form'
+import { LocatorSelectOptionAction } from '@/main/runner/schema'
+
+import { ValuePopoverBadge } from '../components'
+
+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'
+  return 'value'
+}
+
+function getMatchInput(entry: SelectOptionValue): string {
+  if (entry.label !== undefined) return entry.label
+  if (entry.index !== undefined) return String(entry.index)
+  return entry.value ?? ''
+}
+
+function toEntry(type: MatchType, input: string): SelectOptionValue {
+  switch (type) {
+    case 'value':
+      return { value: input }
+    case 'label':
+      return { label: input }
+    case 'index':
+      return { index: input === '' ? 0 : Number(input) }
+  }
+}
+
+interface SelectOptionValuesFormProps {
+  values: SelectOptionValue[]
+  onChange: (values: SelectOptionValue[]) => void
+}
+
+export function SelectOptionValuesForm({
+  values,
+  onChange,
+}: SelectOptionValuesFormProps) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+
+  const handleChangeType = (index: number, type: MatchType) => {
+    const current = values[index]
+    if (!current) return
+    const input = getMatchInput(current)
+    const next = [...values]
+    next[index] = toEntry(type, input)
+    onChange(next)
+  }
+
+  const handleChangeInput = (index: number, input: string) => {
+    const current = values[index]
+    if (!current) return
+    const type = getMatchType(current)
+    const next = [...values]
+    next[index] = toEntry(type, input)
+    onChange(next)
+  }
+
+  const handleAdd = () => {
+    onChange([...values, { value: '' }])
+  }
+
+  const handleRemove = (index: number) => {
+    onChange(values.filter((_, i) => i !== index))
+  }
+
+  const nonEmptyValues = values.filter(isNonEmptyValue)
+
+  return (
+    <Popover.Root open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+      <Popover.Trigger>
+        <ValuePopoverBadge
+          displayValue={
+            nonEmptyValues.length === 0 ? (
+              'option(s)'
+            ) : (
+              <SelectOptions options={nonEmptyValues} />
+            )
+          }
+          error={null}
+        />
+      </Popover.Trigger>
+      <Popover.Content align="start" size="1" width="360px">
+        <FieldGroup
+          name="options"
+          label="Options to select"
+          labelSize="1"
+          mb="0"
+        >
+          <Flex direction="column" gap="2">
+            <ScrollArea
+              css={css`
+                max-height: 200px;
+              `}
+            >
+              <Flex direction="column" gap="2" pr="3">
+                {values.map((entry, index) => (
+                  <Fragment key={index}>
+                    <Flex gap="2" align="center">
+                      <Select.Root
+                        size="1"
+                        value={getMatchType(entry)}
+                        onValueChange={(type: MatchType) =>
+                          handleChangeType(index, type)
+                        }
+                      >
+                        <Select.Trigger
+                          css={css`
+                            min-width: 80px;
+                          `}
+                        />
+                        <Select.Content>
+                          <Select.Item value="value">Value</Select.Item>
+                          <Select.Item value="label">Label</Select.Item>
+                          <Select.Item value="index">Index</Select.Item>
+                        </Select.Content>
+                      </Select.Root>
+                      <TextField.Root
+                        size="1"
+                        type={
+                          getMatchType(entry) === 'index' ? 'number' : 'text'
+                        }
+                        {...(getMatchType(entry) === 'index' ? { min: 0 } : {})}
+                        value={getMatchInput(entry)}
+                        onChange={(e) =>
+                          handleChangeInput(index, e.target.value)
+                        }
+                        placeholder={
+                          getMatchType(entry) === 'index'
+                            ? '0'
+                            : 'Enter text...'
+                        }
+                        css={css`
+                          flex: 1;
+                        `}
+                      />
+                      <IconButton
+                        aria-label="Remove option"
+                        size="1"
+                        variant="ghost"
+                        color="gray"
+                        onClick={() => handleRemove(index)}
+                      >
+                        <XIcon />
+                      </IconButton>
+                    </Flex>
+                  </Fragment>
+                ))}
+              </Flex>
+            </ScrollArea>
+            <Button
+              size="1"
+              variant="ghost"
+              color="gray"
+              onClick={handleAdd}
+              css={css`
+                align-self: flex-start;
+              `}
+            >
+              <PlusIcon /> Add option
+            </Button>
+          </Flex>
+        </FieldGroup>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}

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

@@ -0,0 +1,48 @@
+import { Grid } from '@radix-ui/themes'
+
+import { LocatorSelectOptionAction } from '@/main/runner/schema'
+
+import { LocatorForm } from '../../ActionForms/forms/LocatorForm'
+import { SelectOptionValuesForm } from '../../ActionForms/forms/SelectOptionValuesForm'
+import { WithEditorMetadata } from '../../types'
+
+interface SelectOptionActionBodyProps {
+  action: WithEditorMetadata<LocatorSelectOptionAction>
+  onChange: (action: WithEditorMetadata<LocatorSelectOptionAction>) => void
+}
+
+export function SelectOptionActionBody({
+  action,
+  onChange,
+}: SelectOptionActionBodyProps) {
+  const handleChangeLocator = (
+    locator: WithEditorMetadata<LocatorSelectOptionAction>['locator']
+  ) => {
+    onChange({ ...action, locator })
+  }
+
+  const handleChangeValues = (values: LocatorSelectOptionAction['values']) => {
+    onChange({ ...action, values })
+  }
+
+  return (
+    <Grid
+      columns="max-content minmax(0, max-content) max-content minmax(0, max-content) 1fr"
+      gap="2"
+      align="center"
+      width="100%"
+    >
+      Select
+      <SelectOptionValuesForm
+        values={action.values}
+        onChange={handleChangeValues}
+      />
+      in
+      <LocatorForm
+        state={action.locator}
+        onChange={handleChangeLocator}
+        suggestedRoles={['combobox', 'listbox', 'menu', 'radiogroup']}
+      />
+    </Grid>
+  )
+}

src/views/BrowserTestEditor/Actions/SelectOptionAction/index.ts

@@ -0,0 +1 @@
+export * from './SelectOptionActionBody'

src/views/BrowserTestEditor/Actions/index.ts

@@ -3,5 +3,6 @@ export * from './ClickAction'
 export * from './FillAction'
 export * from './GoToAction'
 export * from './PageReloadAction'
+export * from './SelectOptionAction'
 export * from './UncheckAction'
 export * from './WaitForAction'

src/views/BrowserTestEditor/EditableBrowserActionList.tsx

@@ -90,6 +90,13 @@ function NewActionMenu({ onAddAction }: NewActionMenuProps) {
         >
           Fill input
         </DropdownMenu.Item>
+        <DropdownMenu.Item
+          onClick={() => {
+            onAddAction('locator.selectOption')
+          }}
+        >
+          Select option
+        </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
           onClick={() => {