store all available locators

Author: going-confetti

src/codegen/browser/convertEventsToActions.ts

@@ -1,47 +1,68 @@
-import { AnyBrowserAction, ActionLocator } from '@/main/runner/schema'
+import { ActionLocator } from '@/main/runner/schema'
+import { BrowserTestAction, LocatorOptions } from '@/schemas/browserTest/v1'
 import {
   BrowserEvent,
   BrowserEventTarget,
   ElementSelector,
 } from '@/schemas/recording'
 import { exhaustive } from '@/utils/typescript'
 
-function toActionLocator(selector: ElementSelector): ActionLocator {
-  if (selector.role !== undefined) {
-    return {
-      type: 'role',
-      role: selector.role.role,
-      options: selector.role.name
-        ? { name: selector.role.name, exact: true }
-        : undefined,
-    }
-  }
+function toLocatorOptions(selector: ElementSelector): LocatorOptions {
+  const values: Partial<Record<ActionLocator['type'], ActionLocator>> = {}
 
-  if (selector.label !== undefined) {
-    return { type: 'label', label: selector.label }
+  values.css = { type: 'css', selector: selector.css }
+
+  if (selector.testId !== undefined && selector.testId.trim() !== '') {
+    values.testid = { type: 'testid', testId: selector.testId }
   }
 
   if (selector.alt !== undefined) {
-    return { type: 'alt', text: selector.alt }
+    values.alt = { type: 'alt', text: selector.alt }
+  }
+
+  if (selector.label !== undefined) {
+    values.label = { type: 'label', label: selector.label }
   }
 
   if (selector.placeholder !== undefined) {
-    return { type: 'placeholder', placeholder: selector.placeholder }
+    values.placeholder = {
+      type: 'placeholder',
+      placeholder: selector.placeholder,
+    }
   }
 
   if (selector.title !== undefined) {
-    return { type: 'title', title: selector.title }
+    values.title = { type: 'title', title: selector.title }
   }
 
-  if (selector.testId !== undefined && selector.testId.trim() !== '') {
-    return { type: 'testid', testId: selector.testId }
+  if (selector.role !== undefined) {
+    values.role = {
+      type: 'role',
+      role: selector.role.role,
+      options: selector.role.name
+        ? { name: selector.role.name, exact: true }
+        : undefined,
+    }
   }
 
-  return { type: 'css', selector: selector.css }
+  const current = pickBestLocatorType(selector)
+
+  return { current, values }
+}
+
+function pickBestLocatorType(selector: ElementSelector): ActionLocator['type'] {
+  if (selector.role !== undefined) return 'role'
+  if (selector.label !== undefined) return 'label'
+  if (selector.alt !== undefined) return 'alt'
+  if (selector.placeholder !== undefined) return 'placeholder'
+  if (selector.title !== undefined) return 'title'
+  if (selector.testId !== undefined && selector.testId.trim() !== '')
+    return 'testid'
+  return 'css'
 }
 
-function getLocator(target: BrowserEventTarget): ActionLocator {
-  return toActionLocator(target.selectors)
+function getLocatorOptions(target: BrowserEventTarget): LocatorOptions {
+  return toLocatorOptions(target.selectors)
 }
 
 function toClickModifiers(modifiers: {
@@ -58,7 +79,7 @@ function toClickModifiers(modifiers: {
   return result
 }
 
-function toAction(event: BrowserEvent): AnyBrowserAction | null {
+function toAction(event: BrowserEvent): BrowserTestAction | null {
   switch (event.type) {
     case 'navigate-to-page':
       if (event.source === 'implicit') {
@@ -76,7 +97,7 @@ function toAction(event: BrowserEvent): AnyBrowserAction | null {
 
       return {
         method: 'locator.click',
-        locator: getLocator(event.target),
+        locator: getLocatorOptions(event.target),
         ...(hasNonDefaultOptions && {
           options: {
             button: event.button,
@@ -89,42 +110,47 @@ function toAction(event: BrowserEvent): AnyBrowserAction | null {
     case 'input-change':
       return {
         method: 'locator.fill',
-        locator: getLocator(event.target),
+        locator: getLocatorOptions(event.target),
         value: event.value,
       }
 
     case 'check-change':
       return event.checked
-        ? { method: 'locator.check', locator: getLocator(event.target) }
-        : { method: 'locator.uncheck', locator: getLocator(event.target) }
+        ? {
+            method: 'locator.check',
+            locator: getLocatorOptions(event.target),
+          }
+        : {
+            method: 'locator.uncheck',
+            locator: getLocatorOptions(event.target),
+          }
 
     case 'radio-change':
       return {
         method: 'locator.check',
-        locator: getLocator(event.target),
+        locator: getLocatorOptions(event.target),
       }
 
     case 'select-change':
       return {
         method: 'locator.selectOption',
-        locator: getLocator(event.target),
+        locator: getLocatorOptions(event.target),
         values: event.selected.map((value) => ({ value })),
       }
 
     case 'submit-form':
       return {
         method: 'locator.click',
-        locator: getLocator(event.submitter),
+        locator: getLocatorOptions(event.submitter),
       }
 
     case 'assert':
-      // TODO: Add assertion support
       return null
 
     case 'wait-for':
       return {
         method: 'locator.waitFor',
-        locator: getLocator(event.target),
+        locator: getLocatorOptions(event.target),
         options: event.options,
       }
 
@@ -135,8 +161,8 @@ function toAction(event: BrowserEvent): AnyBrowserAction | null {
 
 export function convertEventsToActions(
   events: BrowserEvent[]
-): AnyBrowserAction[] {
-  const actions: AnyBrowserAction[] = []
+): BrowserTestAction[] {
+  const actions: BrowserTestAction[] = []
 
   for (const event of events) {
     const action = toAction(event)

src/codegen/browser/test.ts

@@ -1,15 +1,13 @@
 import { keyBy } from 'lodash-es'
 
+import { LocatorOptions } from '@/schemas/browserTest/v1'
 import {
   Assertion,
   BrowserEvent,
   BrowserEventTarget,
 } from '@/schemas/recording'
 import { exhaustive } from '@/utils/typescript'
-import {
-  BrowserActionInstance,
-  LocatorOptions,
-} from '@/views/BrowserTestEditor/types'
+import { BrowserActionInstance } from '@/views/BrowserTestEditor/types'
 
 import { isSelectorEqual, getNodeSelector, toNodeSelector } from './selectors'
 import {

src/main/runner/schema.ts

@@ -70,7 +70,7 @@ const GetByTextLocatorSchema = z.object({
   options: TextLocatorOptions,
 })
 
-const ActionLocatorSchema = z.discriminatedUnion('type', [
+export const ActionLocatorSchema = z.discriminatedUnion('type', [
   CssLocatorSchema,
   GetByRoleLocatorSchema,
   GetByTestIdLocatorSchema,
@@ -81,33 +81,33 @@ const ActionLocatorSchema = z.discriminatedUnion('type', [
   GetByTextLocatorSchema,
 ])
 
-const PageGotoActionSchema = z.object({
+export const PageGotoActionSchema = z.object({
   method: z.literal('page.goto'),
   url: z.string(),
   options: GenericOptions.optional(),
 })
 
-const PageReloadActionSchema = z.object({
+export const PageReloadActionSchema = z.object({
   method: z.literal('page.reload'),
   options: GenericOptions.optional(),
 })
 
-const PageWaitForNavigationActionSchema = z.object({
+export const PageWaitForNavigationActionSchema = z.object({
   method: z.literal('page.waitForNavigation'),
   options: GenericOptions.optional(),
 })
 
-const PageCloseActionSchema = z.object({
+export const PageCloseActionSchema = z.object({
   method: z.literal('page.close'),
 })
 
-const GenericPageActionSchema = z.object({
+export const GenericPageActionSchema = z.object({
   method: z.literal('page.*'),
   name: z.string(),
   args: z.array(z.unknown()),
 })
 
-const LocatorClickOptionSchema = z
+export const LocatorClickOptionSchema = z
   .object({
     button: safe(
       z.union([z.literal('left'), z.literal('middle'), z.literal('right')])
@@ -125,38 +125,38 @@ const LocatorClickOptionSchema = z
   })
   .passthrough()
 
-const LocatorClickActionSchema = z.object({
+export const LocatorClickActionSchema = z.object({
   method: z.literal('locator.click'),
   locator: ActionLocatorSchema,
   options: LocatorClickOptionSchema.optional(),
 })
 
-const LocatorDoubleClickActionSchema = z.object({
+export const LocatorDoubleClickActionSchema = z.object({
   method: z.literal('locator.dblclick'),
   locator: ActionLocatorSchema,
   options: LocatorClickOptionSchema.optional(),
 })
 
-const LocatorFillActionSchema = z.object({
+export const LocatorFillActionSchema = z.object({
   method: z.literal('locator.fill'),
   locator: ActionLocatorSchema,
   value: z.string(),
   options: GenericOptions.optional(),
 })
 
-const LocatorCheckActionSchema = z.object({
+export const LocatorCheckActionSchema = z.object({
   method: z.literal('locator.check'),
   locator: ActionLocatorSchema,
   options: GenericOptions.optional(),
 })
 
-const LocatorUncheckActionSchema = z.object({
+export const LocatorUncheckActionSchema = z.object({
   method: z.literal('locator.uncheck'),
   locator: ActionLocatorSchema,
   options: GenericOptions.optional(),
 })
 
-const LocatorSelectOptionActionSchema = z.object({
+export const LocatorSelectOptionActionSchema = z.object({
   method: z.literal('locator.selectOption'),
   locator: ActionLocatorSchema,
   values: z.array(
@@ -169,7 +169,7 @@ const LocatorSelectOptionActionSchema = z.object({
   options: GenericOptions.optional(),
 })
 
-const LocatorWaitForActionSchema = z.object({
+export const LocatorWaitForActionSchema = z.object({
   method: z.literal('locator.waitFor'),
   locator: ActionLocatorSchema,
   options: z
@@ -187,59 +187,59 @@ const LocatorWaitForActionSchema = z.object({
     .optional(),
 })
 
-const LocatorHoverActionSchema = z.object({
+export const LocatorHoverActionSchema = z.object({
   method: z.literal('locator.hover'),
   locator: ActionLocatorSchema,
   options: GenericOptions.optional(),
 })
 
-const LocatorSetCheckedActionSchema = z.object({
+export const LocatorSetCheckedActionSchema = z.object({
   method: z.literal('locator.setChecked'),
   locator: ActionLocatorSchema,
   checked: z.boolean(),
   options: GenericOptions.optional(),
 })
 
-const LocatorTypeActionSchema = z.object({
+export const LocatorTypeActionSchema = z.object({
   method: z.literal('locator.type'),
   locator: ActionLocatorSchema,
   text: z.string(),
   options: GenericOptions.optional(),
 })
 
-const LocatorPressActionSchema = z.object({
+export const LocatorPressActionSchema = z.object({
   method: z.literal('locator.press'),
   locator: ActionLocatorSchema,
   key: z.string(),
   options: GenericOptions.optional(),
 })
 
-const LocatorClearActionSchema = z.object({
+export const LocatorClearActionSchema = z.object({
   method: z.literal('locator.clear'),
   locator: ActionLocatorSchema,
   options: GenericOptions.optional(),
 })
 
-const LocatorTapActionSchema = z.object({
+export const LocatorTapActionSchema = z.object({
   method: z.literal('locator.tap'),
   locator: ActionLocatorSchema,
   options: GenericOptions.optional(),
 })
 
-const LocatorFocusActionSchema = z.object({
+export const LocatorFocusActionSchema = z.object({
   method: z.literal('locator.focus'),
   locator: ActionLocatorSchema,
   options: GenericOptions.optional(),
 })
 
-const GenericLocatorActionSchema = z.object({
+export const GenericLocatorActionSchema = z.object({
   method: z.literal('locator.*'),
   name: z.string(),
   locator: ActionLocatorSchema,
   args: z.array(z.unknown()),
 })
 
-const GenericBrowserContextActionSchema = z.object({
+export const GenericBrowserContextActionSchema = z.object({
   method: z.literal('browserContext.*'),
   name: z.string(),
   args: z.array(z.unknown()),