internal(browser): Add support for fill action to Browser Test Editor (#1157)

Author: going-confetti

src/codegen/browser/test.ts

@@ -396,11 +396,19 @@ function buildBrowserNodeGraphFromActions(
             locator: getLocator(action.locator),
           },
         }
+      case 'locator.fill':
+        return {
+          type: 'type-text',
+          nodeId: crypto.randomUUID(),
+          value: action.value,
+          inputs: {
+            locator: getLocator(action.locator),
+          },
+        }
       case 'page.waitForNavigation':
       case 'page.close':
       case 'page.*':
       case 'locator.dblclick':
-      case 'locator.fill':
       case 'locator.type':
       case 'locator.check':
       case 'locator.uncheck':

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

@@ -0,0 +1,33 @@
+import { Popover, TextArea } from '@radix-ui/themes'
+import { useState } from 'react'
+
+import { FieldGroup } from '@/components/Form'
+
+import { ValuePopoverBadge } from '../components'
+
+interface FillValueFormProps {
+  value: string
+  onChange: (value: string) => void
+}
+
+export function FillValueForm({ value, onChange }: FillValueFormProps) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+
+  return (
+    <Popover.Root open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+      <Popover.Trigger>
+        <ValuePopoverBadge displayValue={`"${value}"`} />
+      </Popover.Trigger>
+      <Popover.Content align="start" size="1" width="300px">
+        <FieldGroup name="value" label="Value" labelSize="1" mb="0">
+          <TextArea
+            size="1"
+            name="value"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </FieldGroup>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}

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

@@ -45,11 +45,13 @@ const LOCATOR_TYPES: Record<ActionLocator['type'], string> = {
 interface LocatorFormProps {
   state: LocatorOptions
   onChange: (value: LocatorOptions) => void
+  suggestedRoles?: string[]
 }
 
 export function LocatorForm({
   state: { current, values },
   onChange,
+  suggestedRoles,
 }: LocatorFormProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const [touchedTypes, setTouchedTypes] = useState(
@@ -142,6 +144,7 @@ export function LocatorForm({
             errors={validation.fieldErrors}
             onChange={handleLocatorChange}
             onBlur={handleFieldBlur}
+            suggestedRoles={suggestedRoles}
           />
         </Grid>
       </Popover.Content>
@@ -154,13 +157,15 @@ interface LocatorFieldsFormProps {
   errors?: Record<string, string>
   onChange: (locator: ActionLocator) => void
   onBlur?: () => void
+  suggestedRoles?: string[]
 }
 
 function LocatorFieldsForm({
   locator,
   errors,
   onChange,
   onBlur,
+  suggestedRoles,
 }: LocatorFieldsFormProps) {
   switch (locator.type) {
     case 'role':
@@ -170,6 +175,7 @@ function LocatorFieldsForm({
           errors={errors}
           onChange={onChange}
           onBlur={onBlur}
+          suggestedRoles={suggestedRoles}
         />
       )
     case 'css':

src/views/BrowserTestEditor/ActionForms/forms/locators/GetByRoleForm.tsx

@@ -6,7 +6,7 @@ import { ActionLocator } from '@/main/runner/schema'
 import { ComboBox, TextFieldWithExactToggle } from '../../components'
 import { toFieldErrors } from '../utils'
 
-const ROLE_OPTIONS = [
+const DEFAULT_ROLES = [
   'button',
   'link',
   'checkbox',
@@ -17,7 +17,11 @@ const ROLE_OPTIONS = [
   'combobox',
   'listbox',
   'option',
-].map((role) => ({ value: role, label: role }))
+]
+
+function toRoleOptions(roles: string[]) {
+  return roles.map((role) => ({ value: role, label: role }))
+}
 
 type RoleLocator = Extract<ActionLocator, { type: 'role' }>
 
@@ -26,13 +30,15 @@ interface GetByRoleFormProps {
   errors?: Record<string, string>
   onChange: (locator: ActionLocator) => void
   onBlur?: () => void
+  suggestedRoles?: string[]
 }
 
 export function GetByRoleForm({
   locator,
   errors,
   onChange,
   onBlur,
+  suggestedRoles,
 }: GetByRoleFormProps) {
   return (
     <Flex direction="column" gap="2" align="stretch">
@@ -46,7 +52,7 @@ export function GetByRoleForm({
         <ComboBox
           id="role"
           value={locator.role}
-          options={ROLE_OPTIONS}
+          options={toRoleOptions(suggestedRoles ?? DEFAULT_ROLES)}
           onChange={(value) => {
             onChange({ ...locator, role: value.trim() })
             onBlur?.()

src/views/BrowserTestEditor/Actions/FillAction/FillActionBody.tsx

@@ -0,0 +1,44 @@
+import { Grid } from '@radix-ui/themes'
+
+import { LocatorFillAction } from '@/main/runner/schema'
+
+import { FillValueForm } from '../../ActionForms/forms/FillValueForm'
+import { LocatorForm } from '../../ActionForms/forms/LocatorForm'
+import { WithEditorMetadata } from '../../types'
+
+const FILL_ROLES = ['textbox', 'searchbox', 'combobox']
+
+interface FillActionBodyProps {
+  action: WithEditorMetadata<LocatorFillAction>
+  onChange: (action: WithEditorMetadata<LocatorFillAction>) => void
+}
+
+export function FillActionBody({ action, onChange }: FillActionBodyProps) {
+  const handleChangeLocator = (
+    locator: WithEditorMetadata<LocatorFillAction>['locator']
+  ) => {
+    onChange({ ...action, locator })
+  }
+
+  const handleChangeValue = (value: string) => {
+    onChange({ ...action, value })
+  }
+
+  return (
+    <Grid
+      columns="max-content minmax(0, max-content) minmax(0, max-content) 1fr"
+      gap="2"
+      align="center"
+      width="100%"
+    >
+      Fill
+      <LocatorForm
+        state={action.locator}
+        onChange={handleChangeLocator}
+        suggestedRoles={FILL_ROLES}
+      />
+      with
+      <FillValueForm value={action.value} onChange={handleChangeValue} />
+    </Grid>
+  )
+}

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

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

src/views/BrowserTestEditor/Actions/index.ts

@@ -1,4 +1,5 @@
 export * from './ClickAction'
+export * from './FillAction'
 export * from './GoToAction'
 export * from './PageReloadAction'
 export * from './WaitForAction'

src/views/BrowserTestEditor/EditableBrowserActionList.tsx

@@ -83,6 +83,13 @@ function NewActionMenu({ onAddAction }: NewActionMenuProps) {
         >
           Click element
         </DropdownMenu.Item>
+        <DropdownMenu.Item
+          onClick={() => {
+            onAddAction('locator.fill')
+          }}
+        >
+          Fill input
+        </DropdownMenu.Item>
         <DropdownMenu.Item
           onClick={() => {
             onAddAction('page.goto')

src/views/BrowserTestEditor/actionEditorRegistry.tsx

@@ -4,12 +4,14 @@ import {
   GlobeIcon,
   MousePointerClickIcon,
   RefreshCwIcon,
+  TextCursorInputIcon,
   TimerIcon,
 } from 'lucide-react'
 import { ReactElement, ReactNode } from 'react'
 
 import {
   ClickActionBody,
+  FillActionBody,
   GoToActionBody,
   PageReloadActionBody,
   WaitForActionBody,
@@ -67,6 +69,18 @@ const actionEditors: ActionEditorRegistry = {
       locator: createDefaultLocatorOptions(),
     }),
   },
+  'locator.fill': {
+    icon: <TextCursorInputIcon aria-hidden="true" />,
+    render: ({ action, onChange }) => (
+      <FillActionBody action={action} onChange={onChange} />
+    ),
+    create: () => ({
+      id: crypto.randomUUID(),
+      method: 'locator.fill',
+      value: '',
+      locator: createDefaultLocatorOptions(),
+    }),
+  },
   'page.goto': {
     icon: <GlobeIcon aria-hidden="true" />,
     render: ({ action, onChange }) => (