add wait for timeout action to editor

Author: allansson

src/codegen/estree/expressions.ts

@@ -38,12 +38,16 @@ export function string(value: string): ts.StringLiteral {
 
 export function literal({
   value,
-}: NodeOptions<ts.Literal, 'value'>): ts.Literal {
+}: NodeOptions<ts.Literal, 'value'>): ts.Expression {
   switch (typeof value) {
     case 'string':
       return string(value)
 
     case 'number':
+      if (isNaN(value)) {
+        return identifier('NaN')
+      }
+
       return {
         ...baseProps,
         type: NodeType.Literal,

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

@@ -0,0 +1,79 @@
+import { Popover, TextField } from '@radix-ui/themes'
+import { useState } from 'react'
+
+import { FieldGroup } from '@/components/Form'
+
+import { ValuePopoverBadge } from '../components'
+
+import { toFieldErrors } from './utils'
+
+interface TimeoutForm {
+  timeout: number
+  onChange: (timeout: number) => void
+}
+
+export function TimeoutForm({ timeout, onChange }: TimeoutForm) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const [isTouched, setIsTouched] = useState(false)
+
+  const error = validateTimeout(timeout)
+
+  return (
+    <Popover.Root
+      open={isPopoverOpen}
+      onOpenChange={(open) => {
+        setIsPopoverOpen(open)
+        if (!open) {
+          setIsTouched(true)
+        }
+      }}
+    >
+      <Popover.Trigger>
+        <ValuePopoverBadge
+          displayValue={
+            <>{isNaN(timeout) ? 'Enter a timeout' : `${timeout} ms`}</>
+          }
+          error={error}
+        />
+      </Popover.Trigger>
+      <Popover.Content align="start" size="1" width="300px">
+        <FieldGroup
+          name="timeout"
+          label="Timeout (ms)"
+          labelSize="1"
+          mb="0"
+          errors={toFieldErrors('timeout', isTouched ? error : undefined)}
+        >
+          <TextField.Root
+            size="1"
+            name="timeout"
+            type="number"
+            value={isNaN(timeout) ? '' : timeout}
+            onChange={(e) => {
+              const trimmed = e.target.value.trim()
+
+              if (!trimmed) {
+                onChange(NaN)
+
+                return
+              }
+
+              onChange(Number(trimmed))
+            }}
+            onBlur={() => setIsTouched(true)}
+          />
+        </FieldGroup>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}
+
+function validateTimeout(value: number) {
+  if (isNaN(value)) {
+    return 'Timeout must be a number'
+  }
+
+  if (value < 0) {
+    return 'Timeout must be >= 0'
+  }
+}

src/views/BrowserTestEditor/Actions/WaitForTimeoutAction/WaitForTimeoutActionBody.tsx

@@ -0,0 +1,27 @@
+import { Grid } from '@radix-ui/themes'
+
+import { PageWaitForTimeoutAction } from '@/main/runner/schema'
+
+import { TimeoutForm } from '../../ActionForms/forms/TimeoutForm'
+import { WithEditorMetadata } from '../../types'
+
+interface WaitForTimeoutActionBodyProps {
+  action: WithEditorMetadata<PageWaitForTimeoutAction>
+  onChange: (action: WithEditorMetadata<PageWaitForTimeoutAction>) => void
+}
+
+export function WaitForTimeoutActionBody({
+  action,
+  onChange,
+}: WaitForTimeoutActionBodyProps) {
+  const handleTimeoutChange = (timeout: number) => {
+    onChange({ ...action, timeout })
+  }
+
+  return (
+    <Grid columns="max-content auto max-content" gap="2" align="center">
+      Wait for
+      <TimeoutForm timeout={action.timeout} onChange={handleTimeoutChange} />
+    </Grid>
+  )
+}

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

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

src/views/BrowserTestEditor/Actions/index.ts

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

src/views/BrowserTestEditor/EditableBrowserActionList.tsx

@@ -106,14 +106,20 @@ function NewActionMenu({ onAddAction }: NewActionMenuProps) {
           Uncheck input
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
-
         <DropdownMenu.Item
           onClick={() => {
             onAddAction('locator.waitFor')
           }}
         >
           Wait for element
         </DropdownMenu.Item>
+        <DropdownMenu.Item
+          onClick={() => {
+            onAddAction('page.waitForTimeout')
+          }}
+        >
+          Wait for timeout
+        </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
           onClick={() => {

src/views/BrowserTestEditor/actionEditorRegistry.tsx

@@ -1,6 +1,7 @@
 import { Code } from '@radix-ui/themes'
 import {
   CircleQuestionMarkIcon,
+  ClockIcon,
   GlobeIcon,
   MousePointerClickIcon,
   RefreshCwIcon,
@@ -19,6 +20,7 @@ import {
   PageReloadActionBody,
   UncheckActionBody,
   WaitForActionBody,
+  WaitForTimeoutActionBody,
 } from './Actions'
 import { BrowserActionInstance } from './types'
 import { createDefaultLocatorOptions } from './utils'
@@ -150,6 +152,17 @@ const actionEditors: ActionEditorRegistry = {
       method: 'page.reload',
     }),
   },
+  'page.waitForTimeout': {
+    icon: <ClockIcon aria-hidden="true" />,
+    render: ({ action, onChange }) => (
+      <WaitForTimeoutActionBody action={action} onChange={onChange} />
+    ),
+    create: () => ({
+      id: crypto.randomUUID(),
+      method: 'page.waitForTimeout',
+      timeout: 1000,
+    }),
+  },
   'locator.waitFor': {
     icon: <TimerIcon aria-hidden="true" />,
     render: ({ action, onChange }) => (