internal(browser): Add wait for element action (#1093)

Author: going-confetti

src/codegen/browser/__snapshots__/browser/locators/get-by-role.ts

@@ -15,7 +15,7 @@ export default async function () {
   const page = await browser.newPage();
 
   try {
-    await page.getByRole("button", { name: "Submit", exact: true }).click();
+    await page.getByRole("button", { name: "Submit" }).click();
   } finally {
     await page?.close();
   }

src/codegen/browser/code/options.ts

@@ -36,6 +36,7 @@ function isBrowserScenario(scenario: ir.Scenario) {
       case 'GotoExpression':
       case 'ReloadExpression':
       case 'NewRoleLocatorExpression':
+      case 'RoleLocatorOptionsExpression':
       case 'NewLabelLocatorExpression':
       case 'NewCssLocatorExpression':
       case 'NewAltTextLocatorExpression':

src/codegen/browser/code/scenario.ts

@@ -56,14 +56,35 @@ function emitNewRoleLocatorExpression(
 ): ts.Expression {
   const page = emitExpression(context, expression.page)
   const role = emitExpression(context, expression.role)
-  const name = emitExpression(context, expression.name)
+
+  const options =
+    expression.options !== null
+      ? [emitExpression(context, expression.options)]
+      : []
 
   return new ExpressionBuilder(page)
     .member('getByRole')
-    .call([role, fromObjectLiteral({ name, exact: true })])
+    .call([role, ...options])
     .done()
 }
 
+function emitRoleLocatorOptionsExpression(
+  context: ScenarioContext,
+  expression: ir.RoleLocatorOptionsExpression
+): ts.Expression {
+  if (!expression.name) {
+    return emitExpression(context, { type: 'NullLiteral' })
+  }
+
+  const name = expression.name.value
+  const exact = expression.name.exact
+
+  return ObjectBuilder.from({
+    ...(name && { name }),
+    ...(exact && { exact }),
+  })
+}
+
 function emitNewLabelLocatorExpression(
   context: ScenarioContext,
   expression: ir.NewLabelLocatorExpression
@@ -433,6 +454,9 @@ function emitExpression(
     case 'NewRoleLocatorExpression':
       return emitNewRoleLocatorExpression(context, expression)
 
+    case 'RoleLocatorOptionsExpression':
+      return emitRoleLocatorOptionsExpression(context, expression)
+
     case 'NewLabelLocatorExpression':
       return emitNewLabelLocatorExpression(context, expression)
 

src/codegen/browser/codegen.test.ts

@@ -962,7 +962,7 @@ it('should emit a getByRole locator', async ({ expect }) => {
           selector: {
             type: 'role',
             role: 'button',
-            name: 'Submit',
+            name: { value: 'Submit' },
           },
           inputs: { page: { nodeId: 'page' } },
         },

src/codegen/browser/intermediate/ast.ts

@@ -57,11 +57,19 @@ export interface NewTitleLocatorExpression {
   page: Expression
 }
 
+export interface RoleLocatorOptionsExpression {
+  type: 'RoleLocatorOptionsExpression'
+  name?: {
+    value: string
+    exact?: boolean
+  }
+}
+
 export interface NewRoleLocatorExpression {
   type: 'NewRoleLocatorExpression'
   role: Expression
-  name: Expression
   page: Expression
+  options: Expression | null
 }
 
 export interface GotoExpression {
@@ -187,6 +195,7 @@ export type Expression =
   | NewPageExpression
   | ClosePageExpression
   | NewRoleLocatorExpression
+  | RoleLocatorOptionsExpression
   | NewLabelLocatorExpression
   | NewPlaceholderLocatorExpression
   | NewTitleLocatorExpression

src/codegen/browser/intermediate/index.ts

@@ -70,13 +70,18 @@ function emitLocatorNode(context: IntermediateContext, node: m.LocatorNode) {
           type: 'StringLiteral',
           value: node.selector.role,
         },
-        name: {
-          type: 'StringLiteral',
-          // getByRole creates an internal selector, e.g. internal:role=link[name='Hello's] that is passed
-          // to the browser. Since the string literal value is wrapped in single quotes, we need to escape
-          // any single quotes in the name. Bug report: https://github.com/grafana/k6/issues/5360
-          value: node.selector.name.replaceAll("'", "\\'"),
-        },
+        options: node.selector.name
+          ? {
+              type: 'RoleLocatorOptionsExpression',
+              name: {
+                // getByRole creates an internal selector, e.g. internal:role=link[name='Hello's] that is passed
+                // to the browser. Since the string literal value is wrapped in single quotes, we need to escape
+                // any single quotes in the name. Bug report: https://github.com/grafana/k6/issues/5360
+                value: node.selector.name.value.replaceAll("'", "\\'"),
+                exact: node.selector.name.exact || undefined,
+              },
+            }
+          : null,
         page,
       })
       break

src/codegen/browser/intermediate/variables.ts

@@ -53,6 +53,8 @@ function substituteExpression(
     case 'NullLiteral':
     case 'NewPageExpression':
     case 'ClickOptionsExpression':
+    case 'WaitForOptionsExpression':
+    case 'RoleLocatorOptionsExpression':
       return node
 
     case 'ClosePageExpression':
@@ -71,8 +73,10 @@ function substituteExpression(
       return {
         type: 'NewRoleLocatorExpression',
         role: substituteExpression(node.role, substitutions),
-        name: substituteExpression(node.name, substitutions),
         page: substituteExpression(node.page, substitutions),
+        options: node.options
+          ? substituteExpression(node.options, substitutions)
+          : null,
       }
 
     case 'NewLabelLocatorExpression':
@@ -187,9 +191,6 @@ function substituteExpression(
           : null,
       }
 
-    case 'WaitForOptionsExpression':
-      return node
-
     case 'WaitForNavigationExpression':
       return {
         type: 'WaitForNavigationExpression',

src/codegen/browser/selectors.ts

@@ -1,3 +1,4 @@
+import { ActionLocator } from '@/main/runner/schema'
 import { ElementSelector } from '@/schemas/recording'
 import {
   GetByAltTextNodeSelector,
@@ -21,7 +22,9 @@ function getRoleSelector(
   return {
     type: 'role',
     role: selectors.role.role,
-    name: selectors.role.name,
+    name: selectors.role.name
+      ? { value: selectors.role.name, exact: true }
+      : undefined,
   }
 }
 
@@ -109,6 +112,67 @@ export function getNodeSelector(selector: ElementSelector): NodeSelector {
   )
 }
 
+export function toNodeSelector(locator: ActionLocator): NodeSelector {
+  switch (locator.type) {
+    case 'css':
+      return {
+        type: 'css',
+        selector: locator.selector,
+      }
+
+    case 'role':
+      return {
+        type: 'role',
+        role: locator.role,
+        name: locator.options?.name
+          ? {
+              value: locator.options.name,
+              exact: locator.options.exact,
+            }
+          : undefined,
+      }
+
+    case 'testid':
+      return {
+        type: 'test-id',
+        testId: locator.testId,
+      }
+
+    case 'alt':
+      return {
+        type: 'alt',
+        text: locator.text,
+      }
+
+    case 'label':
+      return {
+        type: 'label',
+        text: locator.label,
+      }
+
+    case 'placeholder':
+      return {
+        type: 'placeholder',
+        text: locator.placeholder,
+      }
+
+    case 'title':
+      return {
+        type: 'title',
+        text: locator.title,
+      }
+
+    case 'text':
+      return {
+        type: 'text',
+        text: locator.text,
+      }
+
+    default:
+      return exhaustive(locator)
+  }
+}
+
 export function isSelectorEqual(a: NodeSelector, b: NodeSelector): boolean {
   switch (a.type) {
     case 'css':
@@ -118,7 +182,12 @@ export function isSelectorEqual(a: NodeSelector, b: NodeSelector): boolean {
       return b.type === 'test-id' && a.testId === b.testId
 
     case 'role':
-      return b.type === 'role' && a.role === b.role && a.name === b.name
+      return (
+        b.type === 'role' &&
+        a.role === b.role &&
+        a.name?.value === b.name?.value &&
+        a.name?.exact === b.name?.exact
+      )
 
     case 'alt':
       return b.type === 'alt' && a.text === b.text

src/codegen/browser/test.ts

@@ -1,12 +1,15 @@
-import { AnyBrowserAction } from '@/main/runner/schema'
 import {
   Assertion,
   BrowserEvent,
   BrowserEventTarget,
 } from '@/schemas/recording'
 import { exhaustive } from '@/utils/typescript'
+import {
+  BrowserActionInstance,
+  LocatorOptions,
+} from '@/views/BrowserTestEditor/types'
 
-import { isSelectorEqual, getNodeSelector } from './selectors'
+import { isSelectorEqual, getNodeSelector, toNodeSelector } from './selectors'
 import {
   TestNode,
   PageNode,
@@ -287,8 +290,11 @@ function buildBrowserNodeGraphFromEvents(events: BrowserEvent[]) {
   return nodes
 }
 
-function buildBrowserNodeGraphFromActions(browserActions: AnyBrowserAction[]) {
+function buildBrowserNodeGraphFromActions(
+  browserActions: BrowserActionInstance[]
+) {
   const nodes: TestNode[] = []
+  let previousLocatorNode: LocatorNode | null = null
 
   let currentPage: PageNode | undefined = undefined
 
@@ -307,7 +313,46 @@ function buildBrowserNodeGraphFromActions(browserActions: AnyBrowserAction[]) {
     return toNodeRef(currentPage)
   }
 
-  function toNode(action: AnyBrowserAction): TestNode {
+  function getLocator({ current, values }: LocatorOptions): NodeRef {
+    const currentLocator = values[current]
+    if (!currentLocator) {
+      throw new Error(
+        `Current locator of type "${current}" not found in locator values.`
+      )
+    }
+
+    // Group sequential locators together, so that we reuse the same locator
+    // multiple actions have occurred on the same element, e.g:
+    // ```
+    // const input = page.locator("input")
+    //
+    // await input.focus()
+    // await input.type("Hello")
+    // await input.press("Enter")
+
+    const selector = toNodeSelector(currentLocator)
+
+    if (
+      previousLocatorNode === null ||
+      !isSelectorEqual(selector, previousLocatorNode.selector) ||
+      previousLocatorNode.inputs.page.nodeId !== getPage().nodeId
+    ) {
+      previousLocatorNode = {
+        type: 'locator',
+        nodeId: crypto.randomUUID(),
+        selector,
+        inputs: {
+          page: getPage(),
+        },
+      }
+
+      nodes.push(previousLocatorNode)
+    }
+
+    return toNodeRef(previousLocatorNode)
+  }
+
+  function toNode(action: BrowserActionInstance): TestNode {
     switch (action.method) {
       case 'page.goto':
         return {
@@ -320,6 +365,22 @@ function buildBrowserNodeGraphFromActions(browserActions: AnyBrowserAction[]) {
           },
         }
       case 'page.reload':
+        return {
+          type: 'reload',
+          nodeId: crypto.randomUUID(),
+          inputs: {
+            page: getPage(),
+          },
+        }
+      case 'locator.waitFor':
+        return {
+          type: 'wait-for',
+          nodeId: crypto.randomUUID(),
+          inputs: {
+            locator: getLocator(action.locator),
+          },
+          options: action.options,
+        }
       case 'page.waitForNavigation':
       case 'page.close':
       case 'page.*':
@@ -330,7 +391,6 @@ function buildBrowserNodeGraphFromActions(browserActions: AnyBrowserAction[]) {
       case 'locator.check':
       case 'locator.uncheck':
       case 'locator.selectOption':
-      case 'locator.waitFor':
       case 'locator.hover':
       case 'locator.setChecked':
       case 'locator.tap':
@@ -366,7 +426,7 @@ export function convertEventsToTest({ browserEvents }: Recording): Test {
 export function convertActionsToTest({
   browserActions,
 }: {
-  browserActions: AnyBrowserAction[]
+  browserActions: BrowserActionInstance[]
 }): Test {
   return {
     defaultScenario: {