ability to compose selectors, api layer

packages/selenium-ide/src/browser/windows/PlaybackWindow/preload/locator-builders.ts

@@ -24,13 +24,23 @@ type LocatorFunction = (e: HTMLElement, ctx?: any) => string | null
 export default class LocatorBuilders {
   constructor(window: Window) {
     this.window = window
+    window.sideAPI.recorder.onLocatorOrderChanged.addListener(
+      LocatorBuilders.setPreferredOrder
+    )
+    this.setLocatorsOrderFromState()
   }
+
   window: Window
   detach() {}
   static order: string[] = []
   static builderMap: Record<string, LocatorFunction> = {}
   static _preferredOrder: string[] = []
 
+  async setLocatorsOrderFromState() {
+    const orderedLocators = await this.window.sideAPI.recorder.getLocatorOrder()
+    LocatorBuilders.setPreferredOrder(orderedLocators)
+  }
+
   buildWith(name: string, e: HTMLElement, opt_contextNode?: any) {
     return LocatorBuilders.builderMap[name].call(this, e, opt_contextNode)
   }
@@ -69,7 +79,7 @@ export default class LocatorBuilders {
         loopEl = loopEl.parentElement
       }
     }
-    
+
     for (let i = 0; i < LocatorBuilders.order.length; i++) {
       let finderName = LocatorBuilders.order[i]
       try {

packages/selenium-ide/src/main/session/controllers/Recorder/index.ts

@@ -130,7 +130,6 @@ export default class RecorderController extends BaseController {
       activate,
       fieldName
     )
-
   }
 
   async getWinHandleId(): Promise<string> {

packages/side-api/src/commands/recorder/getLocatorOrder.ts

@@ -0,0 +1 @@
+export type Shape = () => Promise<string[]>

packages/side-api/src/commands/recorder/index.ts

@@ -12,6 +12,8 @@ import type { Shape as SetWindowHandle } from './setWindowHandle'
 import type { Shape as SelectElement } from './selectElement'
 import type { Shape as Start } from './start'
 import type { Shape as Stop } from './stop'
+import type { Shape as GetLocatorOrder } from './getLocatorOrder'
+import type { Shape as OnLocatorOrderChanged } from './onLocatorOrderChanged'
 
 import * as getFrameLocation from './getFrameLocation'
 import * as onFrameDeleted from './onFrameDeleted'
@@ -27,6 +29,8 @@ import * as setWindowHandle from './setWindowHandle'
 import * as getWinHandleId from './getWinHandleId'
 import * as start from './start'
 import * as stop from './stop'
+import * as getLocatorOrder from './getLocatorOrder'
+import * as onLocatorOrderChanged from './onLocatorOrderChanged'
 
 export const commands = {
   getFrameLocation,
@@ -43,6 +47,8 @@ export const commands = {
   getWinHandleId,
   start,
   stop,
+  getLocatorOrder,
+  onLocatorOrderChanged,
 }
 
 /**
@@ -64,4 +70,6 @@ export type Shape = {
   getWinHandleId: GetWinHandleId
   start: Start
   stop: Stop
+  getLocatorOrder: GetLocatorOrder
+  onLocatorOrderChanged: OnLocatorOrderChanged
 }

packages/side-api/src/commands/recorder/onLocatorOrderChanged.ts

@@ -0,0 +1,19 @@
+import { BaseListener, EventMutator } from '../../types/base'
+
+export type OnLocatorOrderChanged = [string[]]
+
+/**
+ * Runs whenever the order of locators is changed
+ */
+export type Shape = BaseListener<OnLocatorOrderChanged>
+
+export const mutator: EventMutator<OnLocatorOrderChanged> = (
+  session,
+  [locators]
+) => ({
+  ...session,
+  state: {
+    ...session.state,
+    locators,
+  },
+})

packages/side-api/src/models/state/index.ts

@@ -80,12 +80,13 @@ export interface StateShape {
   breakpoints: string[]
   commands: CommandTypes
   editor: EditorStateShape
-  userPrefs: UserPrefs
+  locators: string[]
   logs: string[]
   logPath: string
   playback: PlaybackStateShape
   recorder: RecorderStateShape
   status: 'idle' | 'paused' | 'playing' | 'recording'
+  userPrefs: UserPrefs
 }
 
 export const state: StateShape = {
@@ -94,12 +95,27 @@ export const state: StateShape = {
   breakpoints: [],
   commands: {},
   editor: defaultEditorState,
-  userPrefs: defaultUserPrefs,
+  locators: [
+    'css:data-test-id',
+    'id',
+    'linkText',
+    'name',
+    'css:data-attr',
+    'css:finder',
+    'xpath:link',
+    'xpath:img',
+    'xpath:attributes',
+    'xpath:idRelative',
+    'xpath:href',
+    'xpath:position',
+    'xpath:innerText',
+  ],
   logs: [],
   logPath: '',
   playback: defaultPlaybackState,
   recorder: defaultRecorderState,
   status: 'idle',
+  userPrefs: defaultUserPrefs,
 }
 
 export * from './command'