Add Custom Strategy Locators support to Playwright helper

Co-authored-by: kobenguyent <[email protected]>

Author: Copilot

lib/helper/Playwright.js

@@ -95,6 +95,7 @@ const pathSeparator = path.sep
  * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
  * @prop {object} [recordHar] - record HAR and will be saved to `output/har`. See more of [HAR options](https://playwright.dev/docs/api/class-browser#browser-new-context-option-record-har).
  * @prop {string} [testIdAttribute=data-testid] - locate elements based on the testIdAttribute. See more of [locate by test id](https://playwright.dev/docs/locators#locate-by-test-id).
+ * @prop {object} [customLocatorStrategies] - custom locator strategies. An object with keys as strategy names and values as JavaScript functions. Example: `{ byRole: (selector, root) => { return root.querySelector(\`[role="\${selector}\"]\`) } }`
  */
 const config = {}
 
@@ -343,6 +344,7 @@ class Playwright extends Helper {
     this.recordingWebSocketMessages = false
     this.recordedWebSocketMessagesAtLeastOnce = false
     this.cdpSession = null
+    this.customLocatorStrategies = config.customLocatorStrategies
 
     // override defaults with config
     this._setConfig(config)
@@ -468,6 +470,9 @@ class Playwright extends Helper {
       await playwright.selectors.register('__value', createValueEngine)
       await playwright.selectors.register('__disabled', createDisabledEngine)
       if (process.env.testIdAttribute) await playwright.selectors.setTestIdAttribute(process.env.testIdAttribute)
+      
+      // Register custom locator strategies
+      await this._registerCustomLocatorStrategies()
     } catch (e) {
       console.warn(e)
     }
@@ -861,6 +866,65 @@ class Playwright extends Helper {
     return this.browser
   }
 
+  _lookupCustomLocator(customStrategy) {
+    if (typeof this.customLocatorStrategies !== 'object') {
+      return null
+    }
+    const strategy = this.customLocatorStrategies[customStrategy]
+    return typeof strategy === 'function' ? strategy : null
+  }
+
+  _isCustomLocator(locator) {
+    const locatorObj = new Locator(locator)
+    if (locatorObj.isCustom()) {
+      const customLocator = this._lookupCustomLocator(locatorObj.type)
+      if (customLocator) {
+        return true
+      }
+      throw new Error('Please define "customLocatorStrategies" as an Object and the Locator Strategy as a "function".')
+    }
+    return false
+  }
+
+  _isCustomLocatorStrategyDefined() {
+    return this.customLocatorStrategies && Object.keys(this.customLocatorStrategies).length
+  }
+
+  async _registerCustomLocatorStrategies() {
+    if (this._isCustomLocatorStrategyDefined()) {
+      for (const [strategyName, strategyFunction] of Object.entries(this.customLocatorStrategies)) {
+        this.debugSection('Playwright', `registering custom locator strategy: ${strategyName}`)
+        
+        // Create a selector engine for this custom strategy
+        const engine = {
+          query(root, selector) {
+            try {
+              const customFn = strategyFunction
+              const result = customFn(selector, root)
+              return Array.isArray(result) ? result[0] : result
+            } catch (error) {
+              console.warn(`Error in custom locator '${strategyName}':`, error)
+              return null
+            }
+          },
+          
+          queryAll(root, selector) {
+            try {
+              const customFn = strategyFunction
+              const result = customFn(selector, root)
+              return Array.isArray(result) ? result : (result ? [result] : [])
+            } catch (error) {
+              console.warn(`Error in custom locator '${strategyName}':`, error)
+              return []
+            }
+          }
+        }
+        
+        await playwright.selectors.register(strategyName, () => engine)
+      }
+    }
+  }
+
   /**
    * Create a new browser context with a page. \
    * Usually it should be run from a custom helper after call of `_startBrowser()`
@@ -3431,6 +3495,7 @@ async function findElements(matcher, locator) {
   if (locator.react) return findReact(matcher, locator)
   if (locator.vue) return findVue(matcher, locator)
   if (locator.pw) return findByPlaywrightLocator.call(this, matcher, locator)
+  
   locator = new Locator(locator, 'css')
 
   return matcher.locator(buildLocatorString(locator)).all()
@@ -3440,6 +3505,7 @@ async function findElement(matcher, locator) {
   if (locator.react) return findReact(matcher, locator)
   if (locator.vue) return findVue(matcher, locator)
   if (locator.pw) return findByPlaywrightLocator.call(this, matcher, locator)
+  
   locator = new Locator(locator, 'css')
 
   return matcher.locator(buildLocatorString(locator)).first()