@midscene/shared 0.18.1-beta-20250611082446.0 → 0.18.1

package/dist/es/constants.d.ts

@@ -1,3 +1,6 @@
+declare const PLAYWRIGHT_EXAMPLE_CODE = "\n// Reference the following code to generate Midscene test cases\n// The following is test code for Midscene AI, for reference\n// The following is Playwright syntax, you can use Playwright to assist in test generation\nIMPORTANT: Follow these exact type signatures for AI functions:\n\n// Type signatures for AI functions:\naiInput(value: string, locator: string): Promise<void>\naiTap(locator: string): Promise<void>  \naiAssert(assertion: string): Promise<void>\naiQuery<T>(queryObject: Record<string, string>): Promise<T> // Extracts data from page based on descriptions\n\n// examples:\n// Reference the following code to generate Midscene test cases\n// The following is test code for Midscene AI, for reference\n// The following is Playwright syntax, you can use Playwright to assist in test generation\nimport { test as base } from '@playwright/test';\nimport type { PlayWrightAiFixtureType } from '@midscene/web/playwright';\nimport { PlaywrightAiFixture } from '@midscene/web/playwright';\n\nexport const test = base.extend<PlayWrightAiFixtureType>(PlaywrightAiFixture({\n  waitForNetworkIdleTimeout: 2000, // optional, the timeout for waiting for network idle between each action, default is 2000ms\n  }));\n\n\ntest.beforeEach(async ({ page }) => {\n  await page.goto('https://www.xxx.com/');\n  await page.setViewportSize({ width: 1920, height: 1080 });\n});\n\ntest('ai shop', async ({\n  aiInput,\n  aiAssert,\n  aiQuery,\n  aiKeyboardPress,\n  aiHover,\n  aiTap,\n  agentForPage,\n  page,\n}) => {\n  // login\n  await aiAssert('The page shows the login interface');\n  await aiInput('user_name', 'in user name input');\n  await aiInput('password', 'in password input');\n  await aiKeyboardPress('Enter', 'Login Button');\n\n  // check the login success\n  await aiWaitFor('The page shows that the loading is complete');\n  await aiAssert('The current page shows the product detail page');\n\n  // check the product info\n  const dataA = await aiQuery({\n    userInfo: 'User information in the format {name: string}',\n    theFirstProductInfo: 'The first product info in the format {name: string, price: number}',\n  });\n  expect(dataA.theFirstProductInfo.name).toBe('xxx');\n  expect(dataA.theFirstProductInfo.price).toBe(100);\n\n\n  // add to cart\n  await aiTap('click add to cart button');\n  \n  await aiTap('click right top cart icon');\n  await aiAssert('The cart icon shows the number 1');\n});\n";
+declare const YAML_EXAMPLE_CODE = "\n1. Format:\n\ntarget:\n  url: \"starting_url\"\n  viewportWidth: 1280\n  viewportHeight: 960\n\ntasks:\n  - name: \"descriptive task name\"\n    flow:\n      - aiTap: \"element description\"\n      - aiInput: 'text value'\n        locate: 'input field description'\n      - aiScroll:\n        direction: down/up\n        scrollType: untilBottom/untilTop/page\n      - aiAssert: \"expected state\"\n      - sleep: milliseconds\n\n2. Action Types:\n- aiTap: for clicks (natural language targeting)\n- aiInput: for text input with 'locate' field\n- aiScroll: with direction and scrollType\n- aiAssert: for validations\n- sleep: for delays (milliseconds)\n\n3. Best Practices:\n- Group related actions into logical tasks\n- Use natural language descriptions\n- Add deepThink: true for complex interactions\n- Keep task names concise but descriptive\n";
+
 declare const TEXT_SIZE_THRESHOLD = 9;
 declare const TEXT_MAX_SIZE = 40;
 declare const CONTAINER_MINI_HEIGHT = 3;
@@ -18,4 +21,4 @@ declare const DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT = 2000;
 declare const DEFAULT_WAIT_FOR_NETWORK_IDLE_TIME = 300;
 declare const DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY = 2;
 
-export { CONTAINER_MINI_HEIGHT, CONTAINER_MINI_WIDTH, DEFAULT_WAIT_FOR_NAVIGATION_TIMEOUT, DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIME, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT, NodeType, PLAYGROUND_SERVER_PORT, SCRCPY_SERVER_PORT, TEXT_MAX_SIZE, TEXT_SIZE_THRESHOLD };
+export { CONTAINER_MINI_HEIGHT, CONTAINER_MINI_WIDTH, DEFAULT_WAIT_FOR_NAVIGATION_TIMEOUT, DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIME, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT, NodeType, PLAYGROUND_SERVER_PORT, PLAYWRIGHT_EXAMPLE_CODE, SCRCPY_SERVER_PORT, TEXT_MAX_SIZE, TEXT_SIZE_THRESHOLD, YAML_EXAMPLE_CODE };

package/dist/es/constants.js

@@ -1,3 +1,104 @@
+// src/constants/example-code.ts
+var PLAYWRIGHT_EXAMPLE_CODE = `
+// Reference the following code to generate Midscene test cases
+// The following is test code for Midscene AI, for reference
+// The following is Playwright syntax, you can use Playwright to assist in test generation
+IMPORTANT: Follow these exact type signatures for AI functions:
+
+// Type signatures for AI functions:
+aiInput(value: string, locator: string): Promise<void>
+aiTap(locator: string): Promise<void>  
+aiAssert(assertion: string): Promise<void>
+aiQuery<T>(queryObject: Record<string, string>): Promise<T> // Extracts data from page based on descriptions
+
+// examples:
+// Reference the following code to generate Midscene test cases
+// The following is test code for Midscene AI, for reference
+// The following is Playwright syntax, you can use Playwright to assist in test generation
+import { test as base } from '@playwright/test';
+import type { PlayWrightAiFixtureType } from '@midscene/web/playwright';
+import { PlaywrightAiFixture } from '@midscene/web/playwright';
+
+export const test = base.extend<PlayWrightAiFixtureType>(PlaywrightAiFixture({
+  waitForNetworkIdleTimeout: 2000, // optional, the timeout for waiting for network idle between each action, default is 2000ms
+  }));
+
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('https://www.xxx.com/');
+  await page.setViewportSize({ width: 1920, height: 1080 });
+});
+
+test('ai shop', async ({
+  aiInput,
+  aiAssert,
+  aiQuery,
+  aiKeyboardPress,
+  aiHover,
+  aiTap,
+  agentForPage,
+  page,
+}) => {
+  // login
+  await aiAssert('The page shows the login interface');
+  await aiInput('user_name', 'in user name input');
+  await aiInput('password', 'in password input');
+  await aiKeyboardPress('Enter', 'Login Button');
+
+  // check the login success
+  await aiWaitFor('The page shows that the loading is complete');
+  await aiAssert('The current page shows the product detail page');
+
+  // check the product info
+  const dataA = await aiQuery({
+    userInfo: 'User information in the format {name: string}',
+    theFirstProductInfo: 'The first product info in the format {name: string, price: number}',
+  });
+  expect(dataA.theFirstProductInfo.name).toBe('xxx');
+  expect(dataA.theFirstProductInfo.price).toBe(100);
+
+
+  // add to cart
+  await aiTap('click add to cart button');
+  
+  await aiTap('click right top cart icon');
+  await aiAssert('The cart icon shows the number 1');
+});
+`;
+var YAML_EXAMPLE_CODE = `
+1. Format:
+
+target:
+  url: "starting_url"
+  viewportWidth: 1280
+  viewportHeight: 960
+
+tasks:
+  - name: "descriptive task name"
+    flow:
+      - aiTap: "element description"
+      - aiInput: 'text value'
+        locate: 'input field description'
+      - aiScroll:
+        direction: down/up
+        scrollType: untilBottom/untilTop/page
+      - aiAssert: "expected state"
+      - sleep: milliseconds
+
+2. Action Types:
+- aiTap: for clicks (natural language targeting)
+- aiInput: for text input with 'locate' field
+- aiScroll: with direction and scrollType
+- aiAssert: for validations
+- sleep: for delays (milliseconds)
+
+3. Best Practices:
+- Group related actions into logical tasks
+- Use natural language descriptions
+- Add deepThink: true for complex interactions
+- Keep task names concise but descriptive
+`;
+
 // src/constants/index.ts
 var TEXT_SIZE_THRESHOLD = 9;
 var TEXT_MAX_SIZE = 40;
@@ -28,7 +129,9 @@ export {
   DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT,
   NodeType,
   PLAYGROUND_SERVER_PORT,
+  PLAYWRIGHT_EXAMPLE_CODE,
   SCRCPY_SERVER_PORT,
   TEXT_MAX_SIZE,
-  TEXT_SIZE_THRESHOLD
+  TEXT_SIZE_THRESHOLD,
+  YAML_EXAMPLE_CODE
 };

package/dist/es/extractor-debug.js

@@ -110,40 +110,12 @@ var debugMode = false;
 function setDebugMode(mode) {
   debugMode = mode;
 }
-function getDebugMode() {
-  return debugMode;
-}
 function logger(..._msg) {
   if (!debugMode) {
     return;
   }
   console.log(..._msg);
 }
-var taskIdKey = "_midscene_retrieve_task_id";
-function selectorForValue(val) {
-  return `[${taskIdKey}='${val}']`;
-}
-function setDataForNode(node, nodeHash, setToParentNode, currentWindow) {
-  const taskId = taskIdKey;
-  if (!(node instanceof currentWindow.HTMLElement)) {
-    return "";
-  }
-  if (!taskId) {
-    console.error("No task id found");
-    return "";
-  }
-  const selector = selectorForValue(nodeHash);
-  if (getDebugMode()) {
-    if (setToParentNode) {
-      if (node.parentNode instanceof currentWindow.HTMLElement) {
-        node.parentNode.setAttribute(taskIdKey, nodeHash.toString());
-      }
-    } else {
-      node.setAttribute(taskIdKey, nodeHash.toString());
-    }
-  }
-  return selector;
-}
 function isElementPartiallyInViewport(rect, currentWindow, currentDocument, visibleAreaRatio = 2 / 3) {
   const elementHeight = rect.height;
   const elementWidth = rect.width;
@@ -430,7 +402,6 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
     const attributes = getNodeAttributes(node, currentWindow);
     let valueContent = attributes.value || attributes.placeholder || node.textContent || "";
     const nodeHashId = midsceneGenerateHash(node, valueContent, rect);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const tagName = node.tagName.toLowerCase();
     if (node.tagName.toLowerCase() === "select") {
       const selectedOption = node.options[node.selectedIndex];
@@ -442,7 +413,6 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
     const elementInfo = {
       id: nodeHashId,
       nodeHashId,
-      locator: selector,
       nodeType: "FORM_ITEM Node" /* FORM_ITEM */,
       indexId: indexId++,
       attributes: {
@@ -475,13 +445,11 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
     const pseudo = getPseudoElementContent(node, currentWindow);
     const content = node.innerText || pseudo.before || pseudo.after || "";
     const nodeHashId = midsceneGenerateHash(node, content, rect2);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       indexId: indexId++,
       nodeHashId,
       nodeType: "BUTTON Node" /* BUTTON */,
-      locator: selector,
       attributes: {
         ...attributes,
         htmlTagName: tagNameOfNode(node),
@@ -501,12 +469,10 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
   if (isImgElement(node)) {
     const attributes = getNodeAttributes(node, currentWindow);
     const nodeHashId = midsceneGenerateHash(node, "", rect);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       indexId: indexId++,
       nodeHashId,
-      locator: selector,
       attributes: {
         ...attributes,
         ...node.nodeName.toLowerCase() === "svg" ? {
@@ -538,13 +504,11 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
       return null;
     }
     const nodeHashId = midsceneGenerateHash(node, text, rect);
-    const selector = setDataForNode(node, nodeHashId, true, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       indexId: indexId++,
       nodeHashId,
       nodeType: "TEXT Node" /* TEXT */,
-      locator: selector,
       attributes: {
         ...attributes,
         nodeType: "TEXT Node" /* TEXT */,
@@ -566,13 +530,11 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
     const pseudo = getPseudoElementContent(node, currentWindow);
     const content = node.innerText || pseudo.before || pseudo.after || "";
     const nodeHashId = midsceneGenerateHash(node, content, rect);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       indexId: indexId++,
       nodeHashId,
       nodeType: "Anchor Node" /* A */,
-      locator: selector,
       attributes: {
         ...attributes,
         htmlTagName: tagNameOfNode(node),
@@ -592,13 +554,11 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
   if (isContainerElement(node)) {
     const attributes = getNodeAttributes(node, currentWindow);
     const nodeHashId = midsceneGenerateHash(node, "", rect);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       nodeHashId,
       indexId: indexId++,
       nodeType: "CONTAINER Node" /* CONTAINER */,
-      locator: selector,
       attributes: {
         ...attributes,
         nodeType: "CONTAINER Node" /* CONTAINER */,

package/dist/es/extractor.d.ts

@@ -1,2 +1,2 @@
 import './constants.js';
-export { E as ElementInfo, a as ElementNode, d as descriptionOfTree, m as generateElementByPosition, l as getElementInfoByXpath, i as getNodeFromCacheList, k as getNodeInfoByXpath, j as getXpathsById, s as setNodeHashCacheListOnWindow, t as traverseTree, b as treeToList, e as trimAttributes, c as truncateText, g as webExtractNodeTree, h as webExtractNodeTreeAsString, f as webExtractTextWithPosition } from './index-a171e36c.js';
+export { E as ElementInfo, a as ElementNode, d as descriptionOfTree, m as generateElementByPosition, l as getElementInfoByXpath, i as getNodeFromCacheList, k as getNodeInfoByXpath, j as getXpathsById, s as setNodeHashCacheListOnWindow, t as traverseTree, b as treeToList, e as trimAttributes, c as truncateText, g as webExtractNodeTree, h as webExtractNodeTreeAsString, f as webExtractTextWithPosition } from './index-59587d83.js';

package/dist/es/extractor.js

@@ -252,40 +252,12 @@ var debugMode = false;
 function setDebugMode(mode) {
   debugMode = mode;
 }
-function getDebugMode() {
-  return debugMode;
-}
 function logger(..._msg) {
   if (!debugMode) {
     return;
   }
   console.log(..._msg);
 }
-var taskIdKey = "_midscene_retrieve_task_id";
-function selectorForValue(val) {
-  return `[${taskIdKey}='${val}']`;
-}
-function setDataForNode(node, nodeHash, setToParentNode, currentWindow) {
-  const taskId = taskIdKey;
-  if (!(node instanceof currentWindow.HTMLElement)) {
-    return "";
-  }
-  if (!taskId) {
-    console.error("No task id found");
-    return "";
-  }
-  const selector = selectorForValue(nodeHash);
-  if (getDebugMode()) {
-    if (setToParentNode) {
-      if (node.parentNode instanceof currentWindow.HTMLElement) {
-        node.parentNode.setAttribute(taskIdKey, nodeHash.toString());
-      }
-    } else {
-      node.setAttribute(taskIdKey, nodeHash.toString());
-    }
-  }
-  return selector;
-}
 function isElementPartiallyInViewport(rect, currentWindow, currentDocument, visibleAreaRatio = 2 / 3) {
   const elementHeight = rect.height;
   const elementWidth = rect.width;
@@ -562,7 +534,6 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
     const attributes = getNodeAttributes(node, currentWindow);
     let valueContent = attributes.value || attributes.placeholder || node.textContent || "";
     const nodeHashId = midsceneGenerateHash(node, valueContent, rect);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const tagName = node.tagName.toLowerCase();
     if (node.tagName.toLowerCase() === "select") {
       const selectedOption = node.options[node.selectedIndex];
@@ -574,7 +545,6 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
     const elementInfo = {
       id: nodeHashId,
       nodeHashId,
-      locator: selector,
       nodeType: "FORM_ITEM Node" /* FORM_ITEM */,
       indexId: indexId++,
       attributes: {
@@ -607,13 +577,11 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
     const pseudo = getPseudoElementContent(node, currentWindow);
     const content = node.innerText || pseudo.before || pseudo.after || "";
     const nodeHashId = midsceneGenerateHash(node, content, rect2);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       indexId: indexId++,
       nodeHashId,
       nodeType: "BUTTON Node" /* BUTTON */,
-      locator: selector,
       attributes: {
         ...attributes,
         htmlTagName: tagNameOfNode(node),
@@ -633,12 +601,10 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
   if (isImgElement(node)) {
     const attributes = getNodeAttributes(node, currentWindow);
     const nodeHashId = midsceneGenerateHash(node, "", rect);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       indexId: indexId++,
       nodeHashId,
-      locator: selector,
       attributes: {
         ...attributes,
         ...node.nodeName.toLowerCase() === "svg" ? {
@@ -670,13 +636,11 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
       return null;
     }
     const nodeHashId = midsceneGenerateHash(node, text, rect);
-    const selector = setDataForNode(node, nodeHashId, true, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       indexId: indexId++,
       nodeHashId,
       nodeType: "TEXT Node" /* TEXT */,
-      locator: selector,
       attributes: {
         ...attributes,
         nodeType: "TEXT Node" /* TEXT */,
@@ -698,13 +662,11 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
     const pseudo = getPseudoElementContent(node, currentWindow);
     const content = node.innerText || pseudo.before || pseudo.after || "";
     const nodeHashId = midsceneGenerateHash(node, content, rect);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       indexId: indexId++,
       nodeHashId,
       nodeType: "Anchor Node" /* A */,
-      locator: selector,
       attributes: {
         ...attributes,
         htmlTagName: tagNameOfNode(node),
@@ -724,13 +686,11 @@ function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1,
   if (isContainerElement(node)) {
     const attributes = getNodeAttributes(node, currentWindow);
     const nodeHashId = midsceneGenerateHash(node, "", rect);
-    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
     const elementInfo = {
       id: nodeHashId,
       nodeHashId,
       indexId: indexId++,
       nodeType: "CONTAINER Node" /* CONTAINER */,
-      locator: selector,
       attributes: {
         ...attributes,
         nodeType: "CONTAINER Node" /* CONTAINER */,

package/dist/es/img.d.ts

@@ -1,6 +1,6 @@
 import { Buffer } from 'node:buffer';
 import Jimp from 'jimp';
-import { R as Rect, B as BaseElement } from './index-a171e36c.js';
+import { R as Rect, B as BaseElement } from './index-59587d83.js';
 import './constants.js';
 
 interface Size {

package/dist/es/{index-a171e36c.d.ts → index-59587d83.d.ts}

@@ -46,7 +46,6 @@ interface ElementInfo {
     id: string;
     indexId: number;
     nodeHashId: string;
-    locator: string;
     xpaths?: string[];
     attributes: {
         nodeType: NodeType;
@@ -90,7 +89,6 @@ declare abstract class BaseElement {
     abstract content: string;
     abstract rect: Rect;
     abstract center: [number, number];
-    abstract locator?: string;
     abstract xpaths?: string[];
     abstract isVisible: boolean;
 }

package/dist/es/types.d.ts

@@ -1,2 +1,2 @@
 import './constants.js';
-export { B as BaseElement, n as ElementTreeNode, P as Point, R as Rect, S as Size, W as WebElementInfo } from './index-a171e36c.js';
+export { B as BaseElement, n as ElementTreeNode, P as Point, R as Rect, S as Size, W as WebElementInfo } from './index-59587d83.js';

package/dist/lib/constants.d.ts

@@ -1,3 +1,6 @@
+declare const PLAYWRIGHT_EXAMPLE_CODE = "\n// Reference the following code to generate Midscene test cases\n// The following is test code for Midscene AI, for reference\n// The following is Playwright syntax, you can use Playwright to assist in test generation\nIMPORTANT: Follow these exact type signatures for AI functions:\n\n// Type signatures for AI functions:\naiInput(value: string, locator: string): Promise<void>\naiTap(locator: string): Promise<void>  \naiAssert(assertion: string): Promise<void>\naiQuery<T>(queryObject: Record<string, string>): Promise<T> // Extracts data from page based on descriptions\n\n// examples:\n// Reference the following code to generate Midscene test cases\n// The following is test code for Midscene AI, for reference\n// The following is Playwright syntax, you can use Playwright to assist in test generation\nimport { test as base } from '@playwright/test';\nimport type { PlayWrightAiFixtureType } from '@midscene/web/playwright';\nimport { PlaywrightAiFixture } from '@midscene/web/playwright';\n\nexport const test = base.extend<PlayWrightAiFixtureType>(PlaywrightAiFixture({\n  waitForNetworkIdleTimeout: 2000, // optional, the timeout for waiting for network idle between each action, default is 2000ms\n  }));\n\n\ntest.beforeEach(async ({ page }) => {\n  await page.goto('https://www.xxx.com/');\n  await page.setViewportSize({ width: 1920, height: 1080 });\n});\n\ntest('ai shop', async ({\n  aiInput,\n  aiAssert,\n  aiQuery,\n  aiKeyboardPress,\n  aiHover,\n  aiTap,\n  agentForPage,\n  page,\n}) => {\n  // login\n  await aiAssert('The page shows the login interface');\n  await aiInput('user_name', 'in user name input');\n  await aiInput('password', 'in password input');\n  await aiKeyboardPress('Enter', 'Login Button');\n\n  // check the login success\n  await aiWaitFor('The page shows that the loading is complete');\n  await aiAssert('The current page shows the product detail page');\n\n  // check the product info\n  const dataA = await aiQuery({\n    userInfo: 'User information in the format {name: string}',\n    theFirstProductInfo: 'The first product info in the format {name: string, price: number}',\n  });\n  expect(dataA.theFirstProductInfo.name).toBe('xxx');\n  expect(dataA.theFirstProductInfo.price).toBe(100);\n\n\n  // add to cart\n  await aiTap('click add to cart button');\n  \n  await aiTap('click right top cart icon');\n  await aiAssert('The cart icon shows the number 1');\n});\n";
+declare const YAML_EXAMPLE_CODE = "\n1. Format:\n\ntarget:\n  url: \"starting_url\"\n  viewportWidth: 1280\n  viewportHeight: 960\n\ntasks:\n  - name: \"descriptive task name\"\n    flow:\n      - aiTap: \"element description\"\n      - aiInput: 'text value'\n        locate: 'input field description'\n      - aiScroll:\n        direction: down/up\n        scrollType: untilBottom/untilTop/page\n      - aiAssert: \"expected state\"\n      - sleep: milliseconds\n\n2. Action Types:\n- aiTap: for clicks (natural language targeting)\n- aiInput: for text input with 'locate' field\n- aiScroll: with direction and scrollType\n- aiAssert: for validations\n- sleep: for delays (milliseconds)\n\n3. Best Practices:\n- Group related actions into logical tasks\n- Use natural language descriptions\n- Add deepThink: true for complex interactions\n- Keep task names concise but descriptive\n";
+
 declare const TEXT_SIZE_THRESHOLD = 9;
 declare const TEXT_MAX_SIZE = 40;
 declare const CONTAINER_MINI_HEIGHT = 3;
@@ -18,4 +21,4 @@ declare const DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT = 2000;
 declare const DEFAULT_WAIT_FOR_NETWORK_IDLE_TIME = 300;
 declare const DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY = 2;
 
-export { CONTAINER_MINI_HEIGHT, CONTAINER_MINI_WIDTH, DEFAULT_WAIT_FOR_NAVIGATION_TIMEOUT, DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIME, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT, NodeType, PLAYGROUND_SERVER_PORT, SCRCPY_SERVER_PORT, TEXT_MAX_SIZE, TEXT_SIZE_THRESHOLD };
+export { CONTAINER_MINI_HEIGHT, CONTAINER_MINI_WIDTH, DEFAULT_WAIT_FOR_NAVIGATION_TIMEOUT, DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIME, DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT, NodeType, PLAYGROUND_SERVER_PORT, PLAYWRIGHT_EXAMPLE_CODE, SCRCPY_SERVER_PORT, TEXT_MAX_SIZE, TEXT_SIZE_THRESHOLD, YAML_EXAMPLE_CODE };

package/dist/lib/constants.js

@@ -28,11 +28,116 @@ __export(constants_exports, {
   DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT: () => DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT,
   NodeType: () => NodeType,
   PLAYGROUND_SERVER_PORT: () => PLAYGROUND_SERVER_PORT,
+  PLAYWRIGHT_EXAMPLE_CODE: () => PLAYWRIGHT_EXAMPLE_CODE,
   SCRCPY_SERVER_PORT: () => SCRCPY_SERVER_PORT,
   TEXT_MAX_SIZE: () => TEXT_MAX_SIZE,
-  TEXT_SIZE_THRESHOLD: () => TEXT_SIZE_THRESHOLD
+  TEXT_SIZE_THRESHOLD: () => TEXT_SIZE_THRESHOLD,
+  YAML_EXAMPLE_CODE: () => YAML_EXAMPLE_CODE
 });
 module.exports = __toCommonJS(constants_exports);
+
+// src/constants/example-code.ts
+var PLAYWRIGHT_EXAMPLE_CODE = `
+// Reference the following code to generate Midscene test cases
+// The following is test code for Midscene AI, for reference
+// The following is Playwright syntax, you can use Playwright to assist in test generation
+IMPORTANT: Follow these exact type signatures for AI functions:
+
+// Type signatures for AI functions:
+aiInput(value: string, locator: string): Promise<void>
+aiTap(locator: string): Promise<void>  
+aiAssert(assertion: string): Promise<void>
+aiQuery<T>(queryObject: Record<string, string>): Promise<T> // Extracts data from page based on descriptions
+
+// examples:
+// Reference the following code to generate Midscene test cases
+// The following is test code for Midscene AI, for reference
+// The following is Playwright syntax, you can use Playwright to assist in test generation
+import { test as base } from '@playwright/test';
+import type { PlayWrightAiFixtureType } from '@midscene/web/playwright';
+import { PlaywrightAiFixture } from '@midscene/web/playwright';
+
+export const test = base.extend<PlayWrightAiFixtureType>(PlaywrightAiFixture({
+  waitForNetworkIdleTimeout: 2000, // optional, the timeout for waiting for network idle between each action, default is 2000ms
+  }));
+
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('https://www.xxx.com/');
+  await page.setViewportSize({ width: 1920, height: 1080 });
+});
+
+test('ai shop', async ({
+  aiInput,
+  aiAssert,
+  aiQuery,
+  aiKeyboardPress,
+  aiHover,
+  aiTap,
+  agentForPage,
+  page,
+}) => {
+  // login
+  await aiAssert('The page shows the login interface');
+  await aiInput('user_name', 'in user name input');
+  await aiInput('password', 'in password input');
+  await aiKeyboardPress('Enter', 'Login Button');
+
+  // check the login success
+  await aiWaitFor('The page shows that the loading is complete');
+  await aiAssert('The current page shows the product detail page');
+
+  // check the product info
+  const dataA = await aiQuery({
+    userInfo: 'User information in the format {name: string}',
+    theFirstProductInfo: 'The first product info in the format {name: string, price: number}',
+  });
+  expect(dataA.theFirstProductInfo.name).toBe('xxx');
+  expect(dataA.theFirstProductInfo.price).toBe(100);
+
+
+  // add to cart
+  await aiTap('click add to cart button');
+  
+  await aiTap('click right top cart icon');
+  await aiAssert('The cart icon shows the number 1');
+});
+`;
+var YAML_EXAMPLE_CODE = `
+1. Format:
+
+target:
+  url: "starting_url"
+  viewportWidth: 1280
+  viewportHeight: 960
+
+tasks:
+  - name: "descriptive task name"
+    flow:
+      - aiTap: "element description"
+      - aiInput: 'text value'
+        locate: 'input field description'
+      - aiScroll:
+        direction: down/up
+        scrollType: untilBottom/untilTop/page
+      - aiAssert: "expected state"
+      - sleep: milliseconds
+
+2. Action Types:
+- aiTap: for clicks (natural language targeting)
+- aiInput: for text input with 'locate' field
+- aiScroll: with direction and scrollType
+- aiAssert: for validations
+- sleep: for delays (milliseconds)
+
+3. Best Practices:
+- Group related actions into logical tasks
+- Use natural language descriptions
+- Add deepThink: true for complex interactions
+- Keep task names concise but descriptive
+`;
+
+// src/constants/index.ts
 var TEXT_SIZE_THRESHOLD = 9;
 var TEXT_MAX_SIZE = 40;
 var CONTAINER_MINI_HEIGHT = 3;
@@ -63,7 +168,9 @@ var DEFAULT_WAIT_FOR_NETWORK_IDLE_CONCURRENCY = 2;
   DEFAULT_WAIT_FOR_NETWORK_IDLE_TIMEOUT,
   NodeType,
   PLAYGROUND_SERVER_PORT,
+  PLAYWRIGHT_EXAMPLE_CODE,
   SCRCPY_SERVER_PORT,
   TEXT_MAX_SIZE,
-  TEXT_SIZE_THRESHOLD
+  TEXT_SIZE_THRESHOLD,
+  YAML_EXAMPLE_CODE
 });