chore: update examples (#82)

Author: EAGzzyCSL

puppeteer-demo/README.md

@@ -23,8 +23,9 @@ Refer to this document if your want to use other models like Qwen: https://midsc
 ### Run demo
 
 ```bash
-npm install 
-
+npm install
+# Puppeteer needs download a compatible Chrome
+npx puppeteer browsers install chrome
 # run demo.ts
 npx tsx demo.ts
 

puppeteer-demo/demo-run-yaml.ts

@@ -15,10 +15,10 @@ Promise.resolve(
     await page.setViewport({
       width: 1280,
       height: 800,
-      deviceScaleFactor: os.platform() === 'darwin' ? 2 : 1, // this is used to avoid flashing on UI Mode when doing screenshot on Mac
+      deviceScaleFactor: 0
     });
 
-    await page.goto('https://www.bing.com/shop/');
+    await page.goto('https://www.bing.com/');
     await sleep(5000);
 
     const agent = new PuppeteerAgent(page);
@@ -28,7 +28,7 @@ Promise.resolve(
 tasks:
   - name: search
     flow:
-      - ai: input 'Headphones' in search box, click search button
+      - ai: input 'Headphones Price' in search box, click search button
       - sleep: 3000
 
   - name: query
@@ -38,7 +38,6 @@ tasks:
       - aiNumber: "What is the price of the first headphone?"
       - aiBoolean: "Is the price of the first headphone more than 1000?"
       - aiString: "What is the name of the first headphone?"
-      - aiLocate: "What is the location of the first headphone?"
 `);
 
     console.log(result);

puppeteer-demo/demo.ts

@@ -1,31 +1,30 @@
 import puppeteer from 'puppeteer';
-import os from 'node:os';
 import { PuppeteerAgent } from '@midscene/web/puppeteer';
 import 'dotenv/config'; // read environment variables from .env file
 
 const sleep = (ms: number | undefined) => new Promise((r) => setTimeout(r, ms));
 Promise.resolve(
   (async () => {
     const browser = await puppeteer.launch({
-      headless: true, // 'true' means we can't see the browser window
+      headless: false, // 'false' means we can see the browser window
       args: ['--no-sandbox', '--disable-setuid-sandbox'],
     });
 
     const page = await browser.newPage();
     await page.setViewport({
       width: 1280,
       height: 768,
-      deviceScaleFactor: os.platform() === 'darwin' ? 2 : 1, // this is used to avoid flashing on UI Mode when doing screenshot on Mac
+      deviceScaleFactor: 0
     });
 
-    await page.goto('https://www.bing.com/shop');
+    await page.goto('https://www.bing.com');
     await sleep(5000);
 
     // 👀 init Midscene agent
     const agent = new PuppeteerAgent(page);
 
     // 👀 type keywords, perform a search
-    await agent.aiAct('type "Headphones" in search box, hit Enter');
+    await agent.aiAct('type "Headphones Price" in search box, hit Enter');
 
     // 👀 wait for the loading
     await agent.aiWaitFor('there is at least one headphone item on page');
@@ -55,14 +54,6 @@ Promise.resolve(
     );
     console.log('name', name);
 
-    const location = await agent.aiLocate(
-      'What is the location of the first headphone?'
-    );
-    console.log('location', location);
-
-    // 👀 assert by AI
-    await agent.aiAssert('There is a category filter on the left');
-
     // 👀 click on the first item
     await agent.aiTap('the first item in the list');
 

puppeteer-demo/extract-data.ts

@@ -1,5 +1,4 @@
 import puppeteer from 'puppeteer';
-import os from 'node:os';
 import { PuppeteerAgent } from '@midscene/web/puppeteer';
 import 'dotenv/config'; // read environment variables from .env file
 
@@ -16,7 +15,7 @@ Promise.resolve(
     await page.setViewport({
       width: 1280,
       height: 768,
-      deviceScaleFactor: os.platform() === 'darwin' ? 2 : 1,
+      deviceScaleFactor: 0,
     });
 
     // Load the contacts demo page (replace with your actual file path or URL)

remote-puppeteer-demo/demo.ts

@@ -1,5 +1,4 @@
 import puppeteer from 'puppeteer';
-import os from 'node:os';
 import { PuppeteerAgent } from '@midscene/web/puppeteer';
 import 'dotenv/config'; // read environment variables from .env file
 
@@ -38,7 +37,7 @@ Promise.resolve(
     await page.setViewport({
       width: 1280,
       height: 768,
-      deviceScaleFactor: os.platform() === 'darwin' ? 2 : 1,
+      deviceScaleFactor: 0,
     });
 
     console.log('🌐 Navigating to Bing Shopping...');

yaml-scripts-demo/README.md

@@ -11,6 +11,7 @@ MIDSCENE_MODEL_BASE_URL="https://.../compatible-mode/v1"
 MIDSCENE_MODEL_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
 MIDSCENE_MODEL_NAME="qwen3-vl-plus"
 MIDSCENE_MODEL_FAMILY="qwen3-vl"
+```
 
 Refer to this document if your want to use other models like Qwen: https://midscenejs.com/model-strategy.html