@skyramp/skyramp 1.2.18 → 1.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyramp/skyramp",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "description": "module for leveraging skyramp cli functionality",
   "scripts": {
     "lint": "eslint 'src/**/*.js' 'src/**/*.ts' --fix",

package/src/classes/SmartPlaywright.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function newSkyrampPlaywrightPage(page: any): any;

package/src/classes/SmartPlaywright.js

@@ -0,0 +1,326 @@
+/*
+const lib = require('../lib');
+const koffi = require('koffi');
+
+const responseType = koffi.struct({
+  response: 'char*',
+  error: 'char*',
+});
+
+const improvePlaywrightSelectorWrapper = lib.func('improvePlywrightSelectorWrapper', responseType, ['string']);
+
+async function improvePlaywrightSelectorWithLlm(originalSelector, errorMessage, domContext, pageTitle, pageURL) {
+    const requestData = {
+        "original_selector": originalSelector,
+        "error_message": errorMessage,
+        "dom_context": domContext,
+        "page_title": pageTitle,
+        "page_url": pageURL
+    };
+    const request = JSON.stringify(requestData);
+
+    return new Promise((resolve, reject) => {
+        improvePlaywrightSelectorWrapper.async(request, (err, res) => {
+            if (err) {
+                reject(err);
+            } else if (res) {
+                if (res.error != null) {
+                    reject(res.error);
+                } else if (res.response != null) {
+                    const response = JSON.parse(res.response);
+                    resolve(response["suggestions"] ?? null);
+                } else {
+                    reject(new Error('failed'));
+                }
+            } else {
+                reject(new Error('failed'));
+            }
+        });
+    });
+}
+*/
+
+function debug(...args) {
+    if (process.env.SKYRAMP_DEBUG == "true") {
+        console.log(...args);
+    }
+}
+
+class SkyrampPlaywrightLocator {
+    constructor(skyrampPage, locator, prevLocator, args, options, hydration) {
+        this._skyrampPage = skyrampPage
+        this._locator = locator
+        this._previousLocator = prevLocator
+        this._args = args
+        this._options = options
+        this._hydration = hydration || false
+        return new Proxy(this, {
+          get(wrapper, prop, receiver) {
+            // First, check if the property exists on the wrapper.
+            if (Reflect.has(wrapper, prop)) {
+              return Reflect.get(wrapper, prop, receiver);
+            }
+
+            // Otherwise, forward the call to the original object (`target`).
+            const value = Reflect.get(wrapper._locator, prop, wrapper._locator);
+
+            // If the property is a function, bind it to the original object.
+            // This ensures the correct `this` context is used when the method is called.
+            if (typeof value === 'function') {
+              return value.bind(wrapper._locator);
+            }
+
+            return value;
+          }
+        });
+    }
+
+    isHydration() {
+        return this._hydration
+    }
+
+    isPrevHydration() {
+        return this._previousLocator && this._previousLocator.isHydration()
+    }
+
+    shouldAttemptImprovement(errorMessage, errorType) {
+        const improvementKeywords = [
+            "timeout",
+            "not found",
+            "no element",
+            "not visible",
+            "not attached",
+            "selector resolved to hidden",
+            "element is not enabled",
+        ];
+
+        if (errorType != null) {
+            const playwrightErrorTypes = [
+                "TimeoutError",
+                "Error",
+                "LocatorAssertionError"
+            ];
+            if (playwrightErrorTypes.some(errType => errorType.name.endsWith(errType))) {
+                return true;
+            }
+        }
+
+        let errorLower = errorMessage.toLowerCase();
+        return improvementKeywords.some(keyword => errorLower.includes(keyword));
+    }
+
+    isSelectorMethod(methodName) {
+        // Check if a method uses selectors that can be improved.
+        const selectorMethods = [
+            'click', 'fill', 'type', 'press', 'check', 'uncheck', 'select_option',
+            'hover', 'focus', 'blur', 'scroll_into_view_if_needed', 'screenshot',
+            'text_content', 'inner_text', 'inner_html', 'get_attribute', 'is_visible',
+            'is_enabled', 'is_checked', 'is_disabled', 'is_editable', 'is_hidden'
+        ]
+        return selectorMethods.includes(methodName)
+    }
+
+    async execute() {
+        debug(`execute ${ this._locator} with ${this.execParam} ${this.execArgs}`)
+        const func = this._locator[this.execFname];
+        return func.call(this._locator, this.execParam, this.execArgs);
+    }
+
+    // this is the function that does smart selector retry
+    async SmartRetryWithFallback(fname, param, ...args) {
+        this.execFname = fname;
+        this.execParam = param;
+        this.execArgs = args;
+
+        let locatorCount = await this._locator.count();
+        debug(`handling ${ fname } of ${ this._locator }, count = ${ locatorCount }`)
+        this.locatorCount = locatorCount
+
+        // if locator exists, DOM is available
+        if (locatorCount == 1) {
+            // we try action, this will most likely succeed
+            // if it fails, there could be potentially a hydration issue we can retry after a little wait time
+            return this.execute()
+            .catch(error => {
+                if (error.name == "TimeoutError") {
+                    return this.execute()
+                        .catch(error => {
+                            throw new Error("Potential hydration. Please add enough waitForTimeout() or use hydration flag", error);
+                        });
+                }
+                throw error;
+            });
+        } else if (locatorCount > 0) {
+            // TODO
+            debug("multiple locators identified")
+        } else {
+            // if locator does not exist, we need to consider two cases
+            // one is if any actions that required hydration did not work
+            // second, if locator id is not correct
+            try {
+                // check if last step has potential hydration 
+                if (this._previousLocator && (this.isPrevHydration() || this._previousLocator.locatorCount == 0)) {
+                    debug(`previous action ${this._previousLocator} is potentially associated with hydration`);
+                    // wait for a short time to finish hydration
+                    await this._skyrampPage._page.waitForTimeout(1500);
+                    // then re-execute the previous locator
+                    await this._previousLocator.execute();
+                    // then execute the current one
+                    return await this.execute();
+                }  else {
+                    // previous action may not be associated with hydration
+                    // but we still try
+                    return await this.execute();
+                }
+            } catch (error) {
+                if (error.name == "TimeoutError") {
+                    return this.execute()
+                    .catch(error => {
+                        throw new Error("Potential hydration. Please add enough waitForTimeout() or use hydration flag", error);
+                    });
+                } else {
+                    // TODO
+                    throw error;
+                }
+            }
+        }
+    }
+
+    async click(...args) {
+        return this.SmartRetryWithFallback("click", null, ...args)
+    }
+
+    async fill(text, ...args) {
+        return this.SmartRetryWithFallback("fill", text, ...args)
+    }
+
+    async type(text, ...args) {
+        return this.SmartRetryWithFallback("type", text, ...args)
+    }
+
+    async press(key, ...args) {
+        return this.SmartRetryWithFallback("press", key, ...args)
+    }
+
+    async check(...args) {
+        return this.SmartRetryWithFallback("check", null, ...args)
+    }
+
+    async uncheck(...args) {
+        return this.SmartRetryWithFallback("check", null, ...args)
+    }
+
+    async selectOption(value, ...args) {
+        return this.SmartRetryWithFallback("selectOption", value, ...args)
+    }
+
+    async hover(...args) {
+        return this.SmartRetryWithFallback("hover", null, ...args)
+    }
+
+    async textContent(...args) {
+        return this.SmartRetryWithFallback("textContent", null, ...args)
+    }
+
+    async isVisible(...args) {
+        return this.SmartRetryWithFallback("isVisible", null, ...args)
+    }
+}
+
+class SkyrampPlaywrightPage {
+  constructor(page) {
+    this._page = page;
+    return new Proxy(this, {
+      // The `get` trap is the key to forwarding.
+      // This will foraward any methods not implemented in this struct
+      // to be handled by the original class (i.e., playwright page object)
+      get(wrapper, prop, receiver) {
+        // First, check if the property exists on the wrapper.
+        if (Reflect.has(wrapper, prop)) {
+          return Reflect.get(wrapper, prop, receiver);
+        }
+
+        // Otherwise, forward the call to the original object (`target`).
+        const value = Reflect.get(wrapper._page, prop, wrapper._page);
+
+        // If the property is a function, bind it to the original object.
+        // This ensures the correct `this` context is used when the method is called.
+        if (typeof value === 'function') {
+          return value.bind(wrapper._page);
+        }
+
+        return value;
+      }
+    });
+  }
+
+  pushLocator(locator) {
+      if (this.locators == undefined ) {
+        this.locators = [];
+      }
+      this.locators.push(locator);
+  }
+
+  getLastLocator() {
+      if (this.locators == undefined) {
+          return null
+      }
+
+      if (this.locators.length == 0) {
+          return null
+      }
+      return this.locators.at(-1)
+  }
+
+  newSkyrampPlaywrightLocator(originalLocator, param, options) {
+      let prevLocator = this.getLastLocator()
+      const hydration = options && (options.hydration || false)
+      debug("intercepting", originalLocator)
+      let newLocator = new SkyrampPlaywrightLocator(this, originalLocator, prevLocator, [param], options, hydration);
+      this.pushLocator(newLocator)
+      return newLocator
+  }
+
+  getByRole(role, options) {
+      const originalLocator = this._page.getByRole(role, options);
+      return this.newSkyrampPlaywrightLocator(originalLocator, role, options)
+  }
+
+  getByText(text, options) {
+      const originalLocator = this._page.getByText(text, options);
+      return this.newSkyrampPlaywrightLocator(originalLocator, text, options)
+  }
+
+  getByLabel(label, options) {
+      const originalLocator = this._page.getByLabel(label, options);
+      return this.newSkyrampPlaywrightLocator(originalLocator, label, options)
+  }
+
+  getByTestId(testId, options) {
+      const originalLocator = this._page.getByTestId(testId);
+      return this.newSkyrampPlaywrightLocator(originalLocator, testId, options)
+  }
+
+  getByTitle(title, options) {
+      const originalLocator = this._page.getByTitle(title, options);
+      return this.newSkyrampPlaywrightLocator(originalLocator, title, options)
+  }
+
+  getByPlaceholder(placeholder, options) {
+      const originalLocator = this._page.getByPlaceholder(placeholder, options);
+      return this.newSkyrampPlaywrightLocator(originalLocator, placeholder, options)
+  }
+
+  getByAltText(alt, options) {
+      const originalLocator = this._page.getByAltText(alt, options);
+      return this.newSkyrampPlaywrightLocator(originalLocator, alt, options)
+  }
+}
+
+function newSkyrampPlaywrightPage(page) {
+    return new SkyrampPlaywrightPage(page);
+}
+
+module.exports = {
+    newSkyrampPlaywrightPage,
+};

package/src/index.d.ts

@@ -18,3 +18,4 @@ export * from './classes/LoadTestConfig';
 export * from './classes/AsyncTestStatus';
 export * from './utils';
 export * from './function';
+export * from './classes/SmartPlaywright';

package/src/index.js

@@ -19,6 +19,7 @@ const AsyncTestStatus = require('./classes/AsyncTestStatus');
 const MockV2 = require('./classes/MockV2');
 const { getValue, checkSchema, iterate } = require('./utils');
 const { checkStatusCode } = require('./function');
+const { newSkyrampPlaywrightPage } = require('./classes/SmartPlaywright');
 
 module.exports = {
   SkyrampClient,
@@ -45,4 +46,5 @@ module.exports = {
   checkStatusCode,
   checkSchema,
   iterate,
+  newSkyrampPlaywrightPage,
 }