internal(browser): Add Click action support to Browser Test Editor

src/codegen/browser/test.ts

@@ -381,10 +381,24 @@ function buildBrowserNodeGraphFromActions(
           },
           options: action.options,
         }
+      case 'locator.click':
+        return {
+          type: 'click',
+          nodeId: crypto.randomUUID(),
+          button: 'left',
+          modifiers: {
+            ctrl: false,
+            shift: false,
+            alt: false,
+            meta: false,
+          },
+          inputs: {
+            locator: getLocator(action.locator),
+          },
+        }
       case 'page.waitForNavigation':
       case 'page.close':
       case 'page.*':
-      case 'locator.click':
       case 'locator.dblclick':
       case 'locator.fill':
       case 'locator.type':

src/views/BrowserTestEditor/Actions/ClickAction/ClickActionBody.tsx

@@ -0,0 +1,31 @@
+import { Grid } from '@radix-ui/themes'
+
+import { LocatorClickAction } from '@/main/runner/schema'
+
+import { LocatorForm } from '../../ActionForms/forms/LocatorForm'
+import { WithEditorMetadata } from '../../types'
+
+interface ClickActionBodyProps {
+  action: WithEditorMetadata<LocatorClickAction>
+  onChange: (action: WithEditorMetadata<LocatorClickAction>) => void
+}
+
+export function ClickActionBody({ action, onChange }: ClickActionBodyProps) {
+  const handleChangeLocator = (
+    locator: WithEditorMetadata<LocatorClickAction>['locator']
+  ) => {
+    onChange({ ...action, locator })
+  }
+
+  return (
+    <Grid
+      columns="max-content minmax(0, max-content) 1fr"
+      gap="2"
+      align="center"
+      width="100%"
+    >
+      Click
+      <LocatorForm state={action.locator} onChange={handleChangeLocator} />
+    </Grid>
+  )
+}

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

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

src/views/BrowserTestEditor/Actions/index.ts

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

src/views/BrowserTestEditor/EditableBrowserActionList.tsx

@@ -76,6 +76,13 @@ function NewActionMenu({ onAddAction }: NewActionMenuProps) {
         </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
+        <DropdownMenu.Item
+          onClick={() => {
+            onAddAction('locator.click')
+          }}
+        >
+          Click element
+        </DropdownMenu.Item>
         <DropdownMenu.Item
           onClick={() => {
             onAddAction('page.goto')

src/views/BrowserTestEditor/actionEditorRegistry.tsx

@@ -2,17 +2,20 @@ import { Code } from '@radix-ui/themes'
 import {
   CircleQuestionMarkIcon,
   GlobeIcon,
+  MousePointerClickIcon,
   RefreshCwIcon,
   TimerIcon,
 } from 'lucide-react'
 import { ReactElement, ReactNode } from 'react'
 
 import {
+  ClickActionBody,
   GoToActionBody,
   PageReloadActionBody,
   WaitForActionBody,
 } from './Actions'
 import { BrowserActionInstance } from './types'
+import { createDefaultLocatorOptions } from './utils'
 
 type ActionByMethod<M extends BrowserActionInstance['method']> = Extract<
   BrowserActionInstance,
@@ -53,6 +56,17 @@ const notImplementedCreate = <M extends BrowserActionInstance['method']>(
 }
 
 const actionEditors: ActionEditorRegistry = {
+  'locator.click': {
+    icon: <MousePointerClickIcon aria-hidden="true" />,
+    render: ({ action, onChange }) => (
+      <ClickActionBody action={action} onChange={onChange} />
+    ),
+    create: () => ({
+      id: crypto.randomUUID(),
+      method: 'locator.click',
+      locator: createDefaultLocatorOptions(),
+    }),
+  },
   'page.goto': {
     icon: <GlobeIcon aria-hidden="true" />,
     render: ({ action, onChange }) => (
@@ -80,15 +94,7 @@ const actionEditors: ActionEditorRegistry = {
     create: () => ({
       id: crypto.randomUUID(),
       method: 'locator.waitFor',
-      locator: {
-        current: 'css',
-        values: {
-          css: {
-            type: 'css',
-            selector: '',
-          },
-        },
-      },
+      locator: createDefaultLocatorOptions(),
     }),
   },
 }

src/views/BrowserTestEditor/utils.ts

@@ -0,0 +1,13 @@
+import { LocatorOptions } from './types'
+
+export function createDefaultLocatorOptions(): LocatorOptions {
+  return {
+    current: 'css',
+    values: {
+      css: {
+        type: 'css',
+        selector: '',
+      },
+    },
+  }
+}