feat(browser): Add support for waiting for Element to appear (#941)

Author: going-confetti

extension/src/frontend/view/ElementInspector/ElementInspector.tsx

@@ -19,6 +19,7 @@ import { ElementPopover } from './ElementPopover'
 import { AssertionEditor } from './assertions/AssertionEditor'
 import { AssertionData } from './assertions/types'
 import { useElementHighlight } from './hooks'
+import { WaitForData } from './waitConditions/types'
 
 function getHeader(assertion: AssertionData | null) {
   switch (assertion?.type) {
@@ -107,6 +108,24 @@ export function ElementInspector({ onClose }: ElementInspectorProps) {
     setAssertion(null)
   }
 
+  const handleAddWaitFor = (data: WaitForData) => {
+    client.send({
+      type: 'record-events',
+      events: [
+        {
+          type: 'wait-for',
+          eventId: nanoid(),
+          timestamp: Date.now(),
+          tab: getTabId(),
+          target: data.target,
+          options: data.options,
+        },
+      ],
+    })
+
+    onClose()
+  }
+
   if (element === null) {
     return null
   }
@@ -157,7 +176,11 @@ export function ElementInspector({ onClose }: ElementInspectorProps) {
       onOpenChange={handleOpenChange}
     >
       {assertion === null && (
-        <ElementMenu element={element} onSelectAssertion={setAssertion} />
+        <ElementMenu
+          element={element}
+          onSelectAssertion={setAssertion}
+          onAddWaitFor={handleAddWaitFor}
+        />
       )}
 
       {assertion !== null && (

extension/src/frontend/view/ElementInspector/ElementMenu.tsx

@@ -4,6 +4,7 @@ import {
   CheckSquareIcon,
   EyeIcon,
   TextCursorInputIcon,
+  TimerIcon,
   TypeIcon,
 } from 'lucide-react'
 import { ComponentProps, ReactNode } from 'react'
@@ -20,6 +21,7 @@ import {
 } from './ElementMenu.utils'
 import { AssertionData, CheckAssertionData } from './assertions/types'
 import { TrackedElement } from './utils'
+import { WaitForData } from './waitConditions/types'
 
 function ToolbarRoot(props: ComponentProps<typeof Toolbar.Root>) {
   return (
@@ -185,9 +187,14 @@ function RoleAssertions({ role, input, onAddAssertion }: RoleCategoryProps) {
 interface ElementMenuProps {
   element: TrackedElement
   onSelectAssertion: (data: AssertionData) => void
+  onAddWaitFor: (data: WaitForData) => void
 }
 
-export function ElementMenu({ element, onSelectAssertion }: ElementMenuProps) {
+export function ElementMenu({
+  element,
+  onSelectAssertion,
+  onAddWaitFor,
+}: ElementMenuProps) {
   const associatedElement = findAssociatedControl(element)
 
   const handleAddVisibilityAssertion = () => {
@@ -206,6 +213,12 @@ export function ElementMenu({ element, onSelectAssertion }: ElementMenuProps) {
     })
   }
 
+  const handleAddWaitFor = () => {
+    onAddWaitFor({
+      target: element.target,
+    })
+  }
+
   return (
     <ToolbarRoot
       size="1"
@@ -233,6 +246,11 @@ export function ElementMenu({ element, onSelectAssertion }: ElementMenuProps) {
           <TypeIcon /> <div>Add text assertion</div>
         </ToolbarButton>
       </MenuSection>
+      <MenuSection heading="Timing">
+        <ToolbarButton onClick={handleAddWaitFor}>
+          <TimerIcon /> <div>Wait for element</div>
+        </ToolbarButton>
+      </MenuSection>
     </ToolbarRoot>
   )
 }

extension/src/frontend/view/ElementInspector/waitConditions/types.ts

@@ -0,0 +1,9 @@
+import { BrowserEventTarget } from '@/schemas/recording'
+
+export interface WaitForData {
+  target: BrowserEventTarget
+  options?: {
+    state?: 'visible' | 'hidden' | 'attached' | 'detached'
+    timeout?: number
+  }
+}

extension/src/frontend/view/ToolBox/index.tsx

@@ -140,7 +140,7 @@ export function ToolBox({
           value={tool ?? ''}
           onValueChange={handleToolChange}
         >
-          <ToolBoxTooltip content="Pick an element to add assertions to it">
+          <ToolBoxTooltip content="Pick an element to add assertions or wait conditions to it">
             <Toolbar.ToggleItem value="inspect">
               <SquareDashedMousePointerIcon />
             </Toolbar.ToggleItem>

src/codegen/browser/__snapshots__/browser/wait-for-statement.ts

@@ -0,0 +1,20 @@
+// Generated by Grafana k6 Studio (0.0.0-vitest) on 2023-10-01T00:00:00.000Z
+
+import { browser } from "k6/browser";
+
+export const options = {
+  scenarios: {
+    default: {
+      executor: "shared-iterations",
+      options: { browser: { type: "chromium" } },
+    },
+  },
+};
+
+export default async function () {
+  const page = await browser.newPage();
+
+  await page
+    .getByTitle("Submit your form", { exact: true })
+    .waitFor({ timeout: 5000, state: "hidden" });
+}

src/codegen/browser/code/options.ts

@@ -43,6 +43,8 @@ function isBrowserScenario(scenario: ir.Scenario) {
       case 'FillTextExpression':
       case 'CheckExpression':
       case 'SelectOptionsExpression':
+      case 'WaitForExpression':
+      case 'WaitForOptionsExpression':
       case 'WaitForNavigationExpression':
         return true
 

src/codegen/browser/code/scenario.ts

@@ -10,6 +10,7 @@ import {
   fromArrayLiteral,
   fromObjectLiteral,
   ObjectBuilder,
+  literal,
 } from '@/codegen/estree'
 import { mapNonEmpty } from '@/utils/list'
 import { exhaustive } from '@/utils/typescript'
@@ -328,6 +329,41 @@ function emitExpectExpression(
   }
 }
 
+function emitWaitForExpression(
+  context: ScenarioContext,
+  expression: ir.WaitForExpression
+): ts.Expression {
+  const target = emitExpression(context, expression.target)
+  const args =
+    expression.options !== null
+      ? [emitExpression(context, expression.options)]
+      : []
+
+  return new ExpressionBuilder(target)
+    .member('waitFor')
+    .call(args)
+    .await(context)
+    .done()
+}
+
+function emitWaitForOptionsExpression(
+  _context: ScenarioContext,
+  expression: ir.WaitForOptionsExpression
+): ts.Expression {
+  const timeout = typeof expression.timeout !== 'undefined' && {
+    timeout: literal({ value: expression.timeout }),
+  }
+
+  const state = typeof expression.state !== 'undefined' && {
+    state: string(expression.state),
+  }
+
+  return fromObjectLiteral({
+    ...timeout,
+    ...state,
+  })
+}
+
 function emitWaitForNavigationExpression(
   context: ScenarioContext,
   expression: ir.WaitForNavigationExpression
@@ -416,6 +452,12 @@ function emitExpression(
     case 'ExpectExpression':
       return emitExpectExpression(context, expression)
 
+    case 'WaitForExpression':
+      return emitWaitForExpression(context, expression)
+
+    case 'WaitForOptionsExpression':
+      return emitWaitForOptionsExpression(context, expression)
+
     case 'WaitForNavigationExpression':
       return emitWaitForNavigationExpression(context, expression)
 

src/codegen/browser/codegen.test.ts

@@ -1132,3 +1132,41 @@ it('should emit a getByTitle locator', async ({ expect }) => {
     '__snapshots__/browser/locators/get-by-title.ts'
   )
 })
+
+it('should emit a waitFor statement', async ({ expect }) => {
+  const script = await emitScript({
+    defaultScenario: {
+      nodes: [
+        {
+          type: 'page',
+          nodeId: 'page',
+        },
+        {
+          type: 'locator',
+          nodeId: 'locator',
+          selector: {
+            type: 'title',
+            text: 'Submit your form',
+          },
+          inputs: { page: { nodeId: 'page' } },
+        },
+        {
+          type: 'wait-for',
+          nodeId: 'wait-for',
+          inputs: {
+            locator: { nodeId: 'locator' },
+          },
+          options: {
+            timeout: 5000,
+            state: 'hidden',
+          },
+        },
+      ],
+    },
+    scenarios: {},
+  })
+
+  await expect(script).toMatchFileSnapshot(
+    '__snapshots__/browser/wait-for-statement.ts'
+  )
+})

src/codegen/browser/intermediate/ast.ts

@@ -97,6 +97,18 @@ export interface SelectOptionsExpression {
   multiple: boolean
 }
 
+export interface WaitForOptionsExpression {
+  type: 'WaitForOptionsExpression'
+  timeout?: number
+  state?: 'attached' | 'detached' | 'visible' | 'hidden'
+}
+
+export interface WaitForExpression {
+  type: 'WaitForExpression'
+  target: Expression
+  options: Expression | null
+}
+
 export interface WaitForNavigationExpression {
   type: 'WaitForNavigationExpression'
   target: Expression
@@ -178,6 +190,8 @@ export type Expression =
   | CheckExpression
   | SelectOptionsExpression
   | ExpectExpression
+  | WaitForExpression
+  | WaitForOptionsExpression
   | WaitForNavigationExpression
   | PromiseAllExpression
 

src/codegen/browser/intermediate/context.ts

@@ -75,6 +75,11 @@ function buildScenarioGraph(scenario: model.Scenario) {
         connectPrevious(graph, node)
         break
 
+      case 'wait-for':
+        graph.connect(node.nodeId, node.inputs.locator.nodeId, null)
+        connectPrevious(graph, node)
+        break
+
       default:
         return exhaustive(node)
     }