@probolabs/playwright 0.4.17 → 0.4.18

package/README.md

@@ -1,136 +1,136 @@
-# Probolib: drive your playwright scripts with AI superpowers
-
-Probolib is a powerful AI-driven automation library that enhances Playwright testing and automation by making your scripts more robust and maintainable. Instead of relying on brittle CSS selectors or complex XPath expressions, Probolib uses natural language to interact with web elements.
-
-## Why Probolib?
-
-- **Natural Language Automation**: Write human-readable instructions instead of complex selectors
-- **More Resilient Tests**: AI-powered element detection that adapts to UI changes
-- **Simpler Maintenance**: Reduce the need to update selectors when the UI changes
-- **Faster Development**: Write automation scripts in plain English
-
-## Example
-
-Instead of writing:
-
-```
-page.click('some > super > complex > css > and non robust selector')
-```
-
-You can simply write:
-
-```
-probo.runStep(page, 'click on the save button')
-```
-
-## Quickstart
-
-```
-npm install @probolabs/playwright
-```
-
-## Accessing our backend
-
-the heavy lifting of the AI reasoning is done at the moment on our backend server. in order to access it you would need to tell the library how to access it.
-
-## easyiest - set ENV var
-
-probolib expects the existance of 2 env vars:
-
-```
-export PROBO_API_ENDPOINT=api.probolabs.ai
-export PROBO_API_KEY=<api key we will give you>
-
-```
-
-Or use dotenv
-
-```
-// npm install dotenv
-// in your script add this line
-import 'dotenv/config' // ES6
-
-// .env file located in the root of your project (the same level as your package.json)
-PROBO_API_ENDPOINT=https://api.probolabs.ai
-PROBO_API_KEY=<api key we will give you>
-
-```
-
-## A complete example for Playwright integration. step by step
-
-**step 1:** init a playwright project
-
-```
-# from your work directory
-mkdir probo-example
-cd probo-example
-npm init playwright@latest
-# follow the instructions and wait till the installation is finished
-# verify that playwright is installed properly
-npx playwright test --project chromium
-```
-
-**step 2**: integrate probolabs
-
-```
-npm install @probolabs/playwright dotenv
-```
-
-**step 3:** configure the env with our endpoint and api key
-
-```
-touch .env
-```
-
-edit the .env file
-
-```
-#.env
-PROBO_API_ENDPOINT=https://api.probolabs.ai
-PROBO_API_KEY=<api key we will give you>
-
-```
-
-**step 4:** create a file under the tests folder named `probo-example-todo-mvc.spec.mjs`
-
-```
-// tests/probo-example-todo-mvc.spec.mjs
-import 'dotenv/config';
-import { test} from '@playwright/test';
-import { Probo } from '@probolabs/playwright';
-
-//
-// Important: Before running this script set PROBO_API_KEY and PROBO_API_ENDPOINT
-//
-
-test.describe('Todo MVC', () => {
-  test('basic example', async ({ page }) => {
-    try {
-      // Initialize Probo
-      const probo = new Probo({
-        scenarioName: 'probo-example-todo-mvc' // important for caching the AI reasoning
-      });
-
-      //Goto page
-      await page.goto('https://demo.playwright.dev/todomvc');
-
-      // Run test steps
-      console.log('Running test steps...');
-      await probo.runStep(page, 'enter a new todo item: "Buy groceries"');
-      await probo.runStep(page, 'press the Enter key');
-
-      console.log('✨ Test completed successfully!');
-    } catch (error) {
-      console.error('❌ Test failed:', error);
-      throw error; // Re-throw to mark the test as failed
-    }
-  });
-});
-
-```
-
-**run the example**
-
-```
-npx playwright test tests/probo-example-todo-mvc.spec.mjs --headed --project chromium
-```
+# Probolib: drive your playwright scripts with AI superpowers
+
+Probolib is a powerful AI-driven automation library that enhances Playwright testing and automation by making your scripts more robust and maintainable. Instead of relying on brittle CSS selectors or complex XPath expressions, Probolib uses natural language to interact with web elements.
+
+## Why Probolib?
+
+- **Natural Language Automation**: Write human-readable instructions instead of complex selectors
+- **More Resilient Tests**: AI-powered element detection that adapts to UI changes
+- **Simpler Maintenance**: Reduce the need to update selectors when the UI changes
+- **Faster Development**: Write automation scripts in plain English
+
+## Example
+
+Instead of writing:
+
+```
+page.click('some > super > complex > css > and non robust selector')
+```
+
+You can simply write:
+
+```
+probo.runStep(page, 'click on the save button')
+```
+
+## Quickstart
+
+```
+npm install @probolabs/playwright
+```
+
+## Accessing our backend
+
+the heavy lifting of the AI reasoning is done at the moment on our backend server. in order to access it you would need to tell the library how to access it.
+
+## easyiest - set ENV var
+
+probolib expects the existance of 2 env vars:
+
+```
+export PROBO_API_ENDPOINT=api.probolabs.ai
+export PROBO_API_KEY=<api key we will give you>
+
+```
+
+Or use dotenv
+
+```
+// npm install dotenv
+// in your script add this line
+import 'dotenv/config' // ES6
+
+// .env file located in the root of your project (the same level as your package.json)
+PROBO_API_ENDPOINT=https://api.probolabs.ai
+PROBO_API_KEY=<api key we will give you>
+
+```
+
+## A complete example for Playwright integration. step by step
+
+**step 1:** init a playwright project
+
+```
+# from your work directory
+mkdir probo-example
+cd probo-example
+npm init playwright@latest
+# follow the instructions and wait till the installation is finished
+# verify that playwright is installed properly
+npx playwright test --project chromium
+```
+
+**step 2**: integrate probolabs
+
+```
+npm install @probolabs/playwright dotenv
+```
+
+**step 3:** configure the env with our endpoint and api key
+
+```
+touch .env
+```
+
+edit the .env file
+
+```
+#.env
+PROBO_API_ENDPOINT=https://api.probolabs.ai
+PROBO_API_KEY=<api key we will give you>
+
+```
+
+**step 4:** create a file under the tests folder named `probo-example-todo-mvc.spec.mjs`
+
+```
+// tests/probo-example-todo-mvc.spec.mjs
+import 'dotenv/config';
+import { test} from '@playwright/test';
+import { Probo } from '@probolabs/playwright';
+
+//
+// Important: Before running this script set PROBO_API_KEY and PROBO_API_ENDPOINT
+//
+
+test.describe('Todo MVC', () => {
+  test('basic example', async ({ page }) => {
+    try {
+      // Initialize Probo
+      const probo = new Probo({
+        scenarioName: 'probo-example-todo-mvc' // important for caching the AI reasoning
+      });
+
+      //Goto page
+      await page.goto('https://demo.playwright.dev/todomvc');
+
+      // Run test steps
+      console.log('Running test steps...');
+      await probo.runStep(page, 'enter a new todo item: "Buy groceries"');
+      await probo.runStep(page, 'press the Enter key');
+
+      console.log('✨ Test completed successfully!');
+    } catch (error) {
+      console.error('❌ Test failed:', error);
+      throw error; // Re-throw to mark the test as failed
+    }
+  });
+});
+
+```
+
+**run the example**
+
+```
+npx playwright test tests/probo-example-todo-mvc.spec.mjs --headed --project chromium
+```

package/dist/index.d.ts

@@ -1,32 +1,15 @@
 import { Page } from 'playwright';
-import { ElementTag } from '@probolabs/highlighter/src/constants';
-export { ElementInfo, ElementTag } from '@probolabs/highlighter/src/constants';
+import { PlaywrightAction, ElementTag, ProboLogLevel } from '@probolabs/probo-shared';
+export { ElementInfo, ElementTag, PlaywrightAction, ProboLogLevel } from '@probolabs/probo-shared';
 
-declare const PlaywrightAction: {
-    readonly VISIT_BASE_URL: "VISIT_BASE_URL";
-    readonly VISIT_URL: "VISIT_URL";
-    readonly CLICK: "CLICK";
-    readonly FILL_IN: "FILL_IN";
-    readonly SELECT_DROPDOWN: "SELECT_DROPDOWN";
-    readonly SELECT_MULTIPLE_DROPDOWN: "SELECT_MULTIPLE_DROPDOWN";
-    readonly CHECK_CHECKBOX: "CHECK_CHECKBOX";
-    readonly SELECT_RADIO: "SELECT_RADIO";
-    readonly TOGGLE_SWITCH: "TOGGLE_SWITCH";
-    readonly TYPE_KEYS: "TYPE_KEYS";
-    readonly HOVER: "HOVER";
-    readonly VALIDATE_EXACT_VALUE: "VALIDATE_EXACT_VALUE";
-    readonly VALIDATE_CONTAINS_VALUE: "VALIDATE_CONTAINS_VALUE";
-    readonly VALIDATE_URL: "VALIDATE_URL";
-};
-type PlaywrightActionType = typeof PlaywrightAction[keyof typeof PlaywrightAction];
 /**
  * Execute a given Playwright action, mirroring Python's _perform_action
  */
-declare function executePlaywrightAction(page: Page, action: PlaywrightActionType, value: string, iframe_selector: string, element_css_selector: string): Promise<boolean>;
+declare function executePlaywrightAction(page: Page, action: PlaywrightAction, value: string, iframe_selector: string, element_css_selector: string): Promise<boolean>;
 /**
  * Execute a given Playwright action using native Playwright functions where possible
  */
-declare function executeCachedPlaywrightAction(page: Page, action: PlaywrightActionType, value: string, iframe_selector: string, element_css_selector: string): Promise<boolean>;
+declare function executeCachedPlaywrightAction(page: Page, action: PlaywrightAction, value: string, iframe_selector: string, element_css_selector: string): Promise<boolean>;
 
 type ElementTagType = typeof ElementTag[keyof typeof ElementTag];
 declare global {
@@ -42,7 +25,22 @@ declare global {
                 iframe_selector: string;
                 index: string;
             }>) => void;
+            unhighlightElements: () => void;
+            findElements: (elementTypes: string) => any[];
+            getElementInfo: (element: Element, index: number) => any;
             ElementTag: typeof ElementTag;
+            candidates?: any[];
+            actual?: any;
+            matchingCandidate?: any;
+            findAndCacheCandidateElements?: (elementTypes: string[]) => number;
+            findAndCacheActualElement?: (cssSelector: string, iframeSelector: string | null, isHover: boolean) => boolean;
+            findAndCacheMatchingCandidate?: () => boolean;
+            highlightCachedElements?: (which: 'candidates' | 'actual' | 'matching') => void;
+            unhighlight?: () => void;
+            reset?: () => void;
+            getCandidates?: () => any[];
+            getActual?: () => any;
+            getMatchingCandidate?: () => any;
         };
     }
 }
@@ -53,43 +51,40 @@ declare class Highlighter {
     highlightElements(page: Page, elementTags: [ElementTagType]): Promise<any>;
     unhighlightElements(page: Page): Promise<void>;
     highlightElement(page: Page, element_css_selector: string, iframe_selector: string, element_index: string): Promise<void>;
-}
-
-/**
- * Logging levels for Probo
- */
-declare enum ProboLogLevel {
-    DEBUG = "DEBUG",
-    INFO = "INFO",
-    LOG = "LOG",
-    WARN = "WARN",
-    ERROR = "ERROR"
-}
-/**
- * Configure logging transports and level.
- * @param options.logToConsole - Enable or disable console logging (default: true)
- * @param options.logToFile    - Enable or disable file logging (default: true)
- * @param options.level        - Logging level (default: INFO)
- * @param options.filePath     - Path for file transport (default: '/tmp/probo.log')
- */
-declare function configureLogger(options?: {
-    logToConsole?: boolean;
-    logToFile?: boolean;
-    level?: ProboLogLevel;
-    filePath?: string;
-}): void;
-/**
- * Simple logger wrapper that prefixes messages.
- */
-declare class ProboLogger {
-    private prefix;
-    constructor(prefix: string);
-    private _logInternal;
-    debug(...args: any[]): void;
-    info(...args: any[]): void;
-    log(...args: any[]): void;
-    warn(...args: any[]): void;
-    error(...args: any[]): void;
+    /**
+     * Find and cache candidate elements of a given type (e.g., 'CLICKABLE').
+     * Returns the number of candidates found.
+     */
+    findAndCacheCandidateElements(page: Page, elementTypes: string[]): Promise<number>;
+    /**
+     * Find and cache the actual interaction element by CSS and iframe selector.
+     * Returns true if found, false otherwise.
+     */
+    findAndCacheActualElement(page: Page, cssSelector: string, iframeSelector: string | null, isHover?: boolean): Promise<boolean>;
+    /**
+     * Find and cache the best matching candidate for the actual element.
+     * Returns true if a match was found, false otherwise.
+     */
+    findAndCacheMatchingCandidate(page: Page): Promise<boolean>;
+    /**
+     * Highlight the cached candidates, actual, or matching candidate.
+     * @param which 'candidates' | 'actual' | 'matching'
+     */
+    highlightCachedElements(page: Page, which: 'candidates' | 'actual' | 'matching'): Promise<void>;
+    /**
+     * Remove all highlights.
+     */
+    unhighlightCached(page: Page): Promise<void>;
+    /**
+     * Reset/clear all cached state.
+     */
+    resetCached(page: Page): Promise<void>;
+    /**
+     * Get serializable info for Node/Playwright (candidates, actual, matchingCandidate)
+     */
+    getCandidatesCached(page: Page): Promise<any[] | undefined>;
+    getActualCached(page: Page): Promise<any>;
+    getMatchingCandidateCached(page: Page): Promise<any>;
 }
 
 /**
@@ -133,7 +128,7 @@ declare class Probo {
     private readonly scenarioName;
     private readonly aiModel;
     constructor({ scenarioName, token, apiUrl, enableConsoleLogs, logToConsole, logToFile, debugLevel, aiModel }: ProboConfig);
-    runStep(page: Page, stepPrompt: string, options?: RunStepOptions): Promise<boolean>;
+    runStep(page: Page, stepPrompt: string, argument?: string | null, options?: RunStepOptions): Promise<boolean>;
     private _handleCachedStep;
     private _handleStepCreation;
     private setupConsoleLogs;
@@ -144,4 +139,5 @@ declare class Probo {
     private _handlePerformAction;
 }
 
-export { AIModel, type ElementTagType, Highlighter, Probo, ProboLogLevel, ProboLogger, type RunStepOptions, configureLogger, executeCachedPlaywrightAction, executePlaywrightAction };
+export { AIModel, Highlighter, Probo, executeCachedPlaywrightAction, executePlaywrightAction };
+export type { ElementTagType, RunStepOptions };