internal(browser): Add Check/Uncheck action to Browser Test Editor (#1163)

Author: going-confetti

src/codegen/browser/test.ts

@@ -396,6 +396,24 @@ function buildBrowserNodeGraphFromActions(
             locator: getLocator(action.locator),
           },
         }
+      case 'locator.check':
+        return {
+          type: 'check',
+          nodeId: crypto.randomUUID(),
+          checked: true,
+          inputs: {
+            locator: getLocator(action.locator),
+          },
+        }
+      case 'locator.uncheck':
+        return {
+          type: 'check',
+          nodeId: crypto.randomUUID(),
+          checked: false,
+          inputs: {
+            locator: getLocator(action.locator),
+          },
+        }
       case 'locator.fill':
         return {
           type: 'type-text',
@@ -410,8 +428,6 @@ function buildBrowserNodeGraphFromActions(
       case 'page.*':
       case 'locator.dblclick':
       case 'locator.type':
-      case 'locator.check':
-      case 'locator.uncheck':
       case 'locator.selectOption':
       case 'locator.hover':
       case 'locator.setChecked':

src/views/BrowserTestEditor/Actions/CheckAction/CheckActionBody.tsx

@@ -0,0 +1,33 @@
+import { Grid } from '@radix-ui/themes'
+
+import { LocatorCheckAction } from '@/main/runner/schema'
+
+import { LocatorForm } from '../../ActionForms/forms/LocatorForm'
+import { WithEditorMetadata } from '../../types'
+
+const CHECK_ROLES = ['checkbox', 'radio', 'switch']
+
+interface CheckActionBodyProps {
+  action: WithEditorMetadata<LocatorCheckAction>
+  onChange: (action: WithEditorMetadata<LocatorCheckAction>) => void
+}
+
+export function CheckActionBody({ action, onChange }: CheckActionBodyProps) {
+  const handleChangeLocator = (
+    locator: WithEditorMetadata<LocatorCheckAction>['locator']
+  ) => {
+    onChange({ ...action, locator })
+  }
+
+  return (
+    <Grid
+      columns="max-content minmax(0, max-content) 1fr"
+      gap="2"
+      align="center"
+      width="100%"
+    >
+      Check input
+      <LocatorForm state={action.locator} suggestedRoles={CHECK_ROLES} onChange={handleChangeLocator} />
+    </Grid>
+  )
+}

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

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

src/views/BrowserTestEditor/Actions/UncheckAction/UncheckActionBody.tsx

@@ -0,0 +1,36 @@
+import { Grid } from '@radix-ui/themes'
+
+import { LocatorUncheckAction } from '@/main/runner/schema'
+
+import { LocatorForm } from '../../ActionForms/forms/LocatorForm'
+import { WithEditorMetadata } from '../../types'
+
+const UNCHECK_ROLES = ['checkbox', 'radio', 'switch']
+
+interface UncheckActionBodyProps {
+  action: WithEditorMetadata<LocatorUncheckAction>
+  onChange: (action: WithEditorMetadata<LocatorUncheckAction>) => void
+}
+
+export function UncheckActionBody({
+  action,
+  onChange,
+}: UncheckActionBodyProps) {
+  const handleChangeLocator = (
+    locator: WithEditorMetadata<LocatorUncheckAction>['locator']
+  ) => {
+    onChange({ ...action, locator })
+  }
+
+  return (
+    <Grid
+      columns="max-content minmax(0, max-content) 1fr"
+      gap="2"
+      align="center"
+      width="100%"
+    >
+      Uncheck input
+      <LocatorForm state={action.locator} suggestedRoles={UNCHECK_ROLES} onChange={handleChangeLocator} />
+    </Grid>
+  )
+}

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

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

src/views/BrowserTestEditor/Actions/index.ts

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

src/views/BrowserTestEditor/EditableBrowserActionList.tsx

@@ -90,20 +90,38 @@ function NewActionMenu({ onAddAction }: NewActionMenuProps) {
         >
           Fill input
         </DropdownMenu.Item>
+        <DropdownMenu.Separator />
         <DropdownMenu.Item
           onClick={() => {
-            onAddAction('page.goto')
+            onAddAction('locator.check')
           }}
         >
-          Navigate to URL
+          Check input
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          onClick={() => {
+            onAddAction('locator.uncheck')
+          }}
+        >
+          Uncheck input
         </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+
         <DropdownMenu.Item
           onClick={() => {
             onAddAction('locator.waitFor')
           }}
         >
           Wait for element
         </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item
+          onClick={() => {
+            onAddAction('page.goto')
+          }}
+        >
+          Navigate to URL
+        </DropdownMenu.Item>
         <DropdownMenu.Item
           onClick={() => {
             onAddAction('page.reload')

src/views/BrowserTestEditor/actionEditorRegistry.tsx

@@ -4,16 +4,20 @@ import {
   GlobeIcon,
   MousePointerClickIcon,
   RefreshCwIcon,
+  SquareCheckBigIcon,
+  SquareIcon,
   TextCursorInputIcon,
   TimerIcon,
 } from 'lucide-react'
 import { ReactElement, ReactNode } from 'react'
 
 import {
+  CheckActionBody,
   ClickActionBody,
   FillActionBody,
   GoToActionBody,
   PageReloadActionBody,
+  UncheckActionBody,
   WaitForActionBody,
 } from './Actions'
 import { BrowserActionInstance } from './types'
@@ -58,6 +62,44 @@ const notImplementedCreate = <M extends BrowserActionInstance['method']>(
 }
 
 const actionEditors: ActionEditorRegistry = {
+  'locator.check': {
+    icon: <SquareCheckBigIcon aria-hidden="true" />,
+    render: ({ action, onChange }) => (
+      <CheckActionBody action={action} onChange={onChange} />
+    ),
+    create: () => ({
+      id: crypto.randomUUID(),
+      method: 'locator.check',
+      locator: {
+        current: 'role',
+        values: {
+          role: {
+            type: 'role',
+            role: 'checkbox',
+          },
+        },
+      },
+    }),
+  },
+  'locator.uncheck': {
+    icon: <SquareIcon aria-hidden="true" />,
+    render: ({ action, onChange }) => (
+      <UncheckActionBody action={action} onChange={onChange} />
+    ),
+    create: () => ({
+      id: crypto.randomUUID(),
+      method: 'locator.uncheck',
+      locator: {
+        current: 'role',
+        values: {
+          role: {
+            type: 'role',
+            role: 'checkbox',
+          },
+        },
+      },
+    }),
+  },
   'locator.click': {
     icon: <MousePointerClickIcon aria-hidden="true" />,
     render: ({ action, onChange }) => (
@@ -78,7 +120,15 @@ const actionEditors: ActionEditorRegistry = {
       id: crypto.randomUUID(),
       method: 'locator.fill',
       value: '',
-      locator: createDefaultLocatorOptions(),
+      locator: {
+        current: 'role',
+        values: {
+          role: {
+            type: 'role',
+            role: 'textbox',
+          },
+        },
+      },
     }),
   },
   'page.goto': {