@midscene/cli 0.8.0 → 0.8.1-beta-20241112034501.0

package/bin/midscene

@@ -2,8 +2,4 @@
 
 require('../dist/lib/help.js');
 
-if (process.argv.indexOf('playground') !== -1) {
-  require('../dist/lib/playground.js');
-} else {
-  require('../dist/lib/index.js');
-}
+require('../dist/lib/index.js');

package/dist/es/help.js

@@ -9,7 +9,7 @@ var require_package = __commonJS({
     module.exports = {
       name: "@midscene/cli",
       description: "An AI-powered automation SDK can control the page, perform assertions, and extract data in JSON format using natural language. See https://midscenejs.com/ for details.",
-      version: "0.8.0",
+      version: "0.8.1-beta-20241112034501.0",
       repository: "https://github.com/web-infra-dev/midscene",
       homepage: "https://midscenejs.com/",
       "jsnext:source": "./src/index.ts",
@@ -30,12 +30,16 @@ var require_package = __commonJS({
       },
       dependencies: {
         "@midscene/web": "workspace:*",
+        dotenv: "16.4.5",
+        "http-server": "14.1.1",
+        minimist: "1.2.5",
         "ora-classic": "5.4.2",
         puppeteer: "23.0.2",
         yargs: "17.7.2"
       },
       devDependencies: {
         "@modern-js/module-tools": "2.60.6",
+        "@types/minimist": "1.2.5",
         "@types/node": "^18.0.0",
         "@types/yargs": "17.0.32",
         execa: "9.3.0",
@@ -64,7 +68,8 @@ if (process.argv.indexOf("--help") !== -1) {
   Usage: midscene [options] [actions]
 
   Options:
-    --url <url>                 The URL to visit, required
+    --serve <root-directory>    Serve the local path as a static server, optional
+    --url <url>                 The URL to visit, required. If --serve is provided, provide the path to the file to visit
     --user-agent <ua>           The user agent to use, optional
     --viewport-width <width>    The width of the viewport, optional
     --viewport-height <height>  The height of the viewport, optional
@@ -90,6 +95,9 @@ if (process.argv.indexOf("--help") !== -1) {
       --query-output status.json \\
       --query '{name: string, status: string}[], service status of github page'
 
+    # serve the current directory and visit the index.html file
+    midscene --serve . --url "index.html" --assert "the content title is 'My App'"
+
   Examples with Chinese Prompts
     # headed 模式（即可见浏览器）访问 baidu.com 并搜索“天气”
     midscene --headed --url "https://www.baidu.com" --action "在搜索框输入 '天气', 敲回车" --wait-for 界面上出现了天气信息
@@ -98,10 +106,6 @@ if (process.argv.indexOf("--help") !== -1) {
     midscene --url "https://www.githubstatus.com/" \\
       --query-output status.json \\
       --query '{serviceName: string, status: string}[], github 页面的服务状态，返回服务名称'
-
-
-    To launch a playground server, run the following command:
-    midscene playground
   `);
   process.exit(0);
 } else if (process.argv.indexOf("--version") !== -1) {

package/dist/es/index.js

@@ -6,7 +6,7 @@ var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve2, reject) => {
     var fulfilled = (value) => {
       try {
         step(generator.next(value));
@@ -21,13 +21,23 @@ var __async = (__this, __arguments, generator) => {
         reject(e);
       }
     };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
 
 // src/args.ts
-function parse(args) {
+function findOnlyItemInArgs(args, name) {
+  const found = args[name];
+  if (found === void 0) {
+    return false;
+  }
+  if (Array.isArray(found) && found.length > 1) {
+    throw new Error(`Multiple values found for ${name}`);
+  }
+  return found;
+}
+function orderMattersParse(args) {
   const orderedArgs = [];
   args.forEach((arg, index) => {
     if (arg.startsWith("--")) {
@@ -41,16 +51,6 @@ function parse(args) {
   });
   return orderedArgs;
 }
-function findOnlyItemInArgs(args, name) {
-  const found = args.filter((arg) => arg.name === name);
-  if (found.length === 0) {
-    return false;
-  }
-  if (found.length > 1) {
-    throw new Error(`Multiple values found for ${name}`);
-  }
-  return found[0].value;
-}
 var init_args = __esm({
   "src/args.ts"() {
     "use strict";
@@ -63,7 +63,7 @@ var require_package = __commonJS({
     module.exports = {
       name: "@midscene/cli",
       description: "An AI-powered automation SDK can control the page, perform assertions, and extract data in JSON format using natural language. See https://midscenejs.com/ for details.",
-      version: "0.8.0",
+      version: "0.8.1-beta-20241112034501.0",
       repository: "https://github.com/web-infra-dev/midscene",
       homepage: "https://midscenejs.com/",
       "jsnext:source": "./src/index.ts",
@@ -84,12 +84,16 @@ var require_package = __commonJS({
       },
       dependencies: {
         "@midscene/web": "workspace:*",
+        dotenv: "16.4.5",
+        "http-server": "14.1.1",
+        minimist: "1.2.5",
         "ora-classic": "5.4.2",
         puppeteer: "23.0.2",
         yargs: "17.7.2"
       },
       devDependencies: {
         "@modern-js/module-tools": "2.60.6",
+        "@types/minimist": "1.2.5",
         "@types/node": "^18.0.0",
         "@types/yargs": "17.0.32",
         execa: "9.3.0",
@@ -111,30 +115,40 @@ var require_package = __commonJS({
 // src/index.ts
 import assert from "assert";
 import { writeFileSync } from "fs";
+import { resolve } from "path";
 import { PuppeteerAgent } from "@midscene/web/puppeteer";
+import { createServer } from "http-server";
+import minimist from "minimist";
 import ora from "ora-classic";
 import puppeteer from "puppeteer";
+import "dotenv/config";
 var require_src = __commonJS({
   "src/index.ts"(exports) {
     init_args();
     var spinner;
-    var stepString = (name, param) => {
-      let paramStr;
-      if (typeof param === "object") {
-        paramStr = JSON.stringify(param, null, 2);
-      } else if (name === "sleep") {
-        paramStr = `${param}ms`;
-      } else {
-        paramStr = param;
+    var stepString = (name, param, line2) => {
+      const paramToString = (data) => {
+        if (name === "sleep") {
+          return `${data}ms`;
+        }
+        if (typeof data === "object") {
+          return JSON.stringify(data, null, 2);
+        }
+        return String(data);
+      };
+      let paramStr = paramToString(param);
+      if (line2) {
+        paramStr = `${paramStr}
+  ${line2}`;
       }
       return `${name}
   ${paramStr ? `${paramStr}` : ""}`;
     };
-    var printStep = (name, param) => {
+    var printStep = (name, param, line2) => {
       if (spinner) {
         spinner.stop();
       }
-      console.log(`- ${stepString(name, param)}`);
+      console.log(`- ${stepString(name, param, line2)}`);
     };
     var updateSpin = (text) => {
       if (!spinner) {
@@ -145,8 +159,19 @@ var require_src = __commonJS({
         spinner.start();
       }
     };
+    var launchServer = (dir) => __async(exports, null, function* () {
+      return new Promise((resolve2, reject) => {
+        const server = createServer({
+          root: dir
+        });
+        server.listen(0, "127.0.0.1", () => {
+          resolve2(server);
+        });
+      });
+    });
     var preferenceArgs = {
       url: "url",
+      serve: "serve",
       headed: "headed",
       viewportWidth: "viewport-width",
       viewportHeight: "viewport-height",
@@ -166,44 +191,75 @@ var require_src = __commonJS({
     var defaultUA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36";
     var welcome = "\nWelcome to @midscene/cli\n";
     console.log(welcome);
-    var args = parse(process.argv);
+    var args = minimist(process.argv);
     if (findOnlyItemInArgs(args, "version")) {
       const versionFromPkgJson = require_package().version;
       console.log(`@midscene/cli version ${versionFromPkgJson}`);
       process.exit(0);
     }
-    args.forEach((arg) => {
+    Object.keys(args).forEach((arg) => {
+      if (arg === "_")
+        return;
       assert(
-        Object.values(preferenceArgs).includes(arg.name) || Object.values(actionArgs).includes(arg.name),
-        `Unknown argument: ${arg.name}`
+        Object.values(preferenceArgs).includes(arg) || Object.values(actionArgs).includes(arg),
+        `Unknown argument: ${arg}`
       );
     });
-    var preferHeaded = findOnlyItemInArgs(args, preferenceArgs.headed);
-    var userExpectWidth = findOnlyItemInArgs(args, preferenceArgs.viewportWidth);
-    var userExpectHeight = findOnlyItemInArgs(
-      args,
-      preferenceArgs.viewportHeight
-    );
-    var userExpectDpr = findOnlyItemInArgs(args, preferenceArgs.viewportScale);
-    var defaultDpr = process.platform === "darwin" ? 2 : 1;
-    var viewportConfig = {
-      width: typeof userExpectWidth === "number" ? userExpectWidth : 1280,
-      height: typeof userExpectHeight === "number" ? userExpectHeight : 1280,
-      deviceScaleFactor: typeof userExpectDpr === "number" ? userExpectDpr : defaultDpr
-    };
-    var url = findOnlyItemInArgs(args, preferenceArgs.url);
-    assert(url, "URL is required");
-    assert(typeof url === "string", "URL must be a string");
-    var preferredUA = findOnlyItemInArgs(args, preferenceArgs.useragent);
-    var ua = typeof preferredUA === "string" ? preferredUA : defaultUA;
-    printStep(preferenceArgs.url, url);
-    printStep(preferenceArgs.useragent, ua);
-    printStep("viewport", JSON.stringify(viewportConfig));
-    if (preferHeaded) {
-      printStep(preferenceArgs.headed, "true");
-    }
     Promise.resolve(
       (() => __async(exports, null, function* () {
+        const staticServerConfig = findOnlyItemInArgs(args, "serve");
+        let staticServerUrl;
+        if (staticServerConfig) {
+          const serverDir = typeof staticServerConfig === "string" ? staticServerConfig : process.cwd();
+          const finalServerDir = resolve(process.cwd(), serverDir);
+          const staticServerResult = yield launchServer(finalServerDir);
+          const server = staticServerResult.server;
+          const serverAddress = server.address();
+          staticServerUrl = `http://${serverAddress == null ? void 0 : serverAddress.address}:${serverAddress == null ? void 0 : serverAddress.port}`;
+          printStep("static server", finalServerDir, staticServerUrl);
+        }
+        const preferHeaded = findOnlyItemInArgs(args, preferenceArgs.headed);
+        const userExpectWidth = findOnlyItemInArgs(
+          args,
+          preferenceArgs.viewportWidth
+        );
+        const userExpectHeight = findOnlyItemInArgs(
+          args,
+          preferenceArgs.viewportHeight
+        );
+        const userExpectDpr = findOnlyItemInArgs(
+          args,
+          preferenceArgs.viewportScale
+        );
+        const defaultDpr = process.platform === "darwin" ? 2 : 1;
+        const viewportConfig = {
+          width: typeof userExpectWidth === "number" ? userExpectWidth : 1280,
+          height: typeof userExpectHeight === "number" ? userExpectHeight : 1280,
+          deviceScaleFactor: typeof userExpectDpr === "number" ? userExpectDpr : defaultDpr
+        };
+        const url = findOnlyItemInArgs(args, preferenceArgs.url);
+        let urlToVisit;
+        if (staticServerUrl) {
+          if (typeof url !== "undefined") {
+            if (url.startsWith("/")) {
+              urlToVisit = `${staticServerUrl}${url}`;
+            } else {
+              urlToVisit = `${staticServerUrl}/${url}`;
+            }
+          }
+        } else {
+          urlToVisit = url;
+        }
+        assert(urlToVisit, "URL is required");
+        assert(typeof urlToVisit === "string", "URL must be a string");
+        const preferredUA = findOnlyItemInArgs(args, preferenceArgs.useragent);
+        const ua = typeof preferredUA === "string" ? preferredUA : defaultUA;
+        printStep(preferenceArgs.url, urlToVisit);
+        printStep(preferenceArgs.useragent, ua);
+        printStep("viewport", JSON.stringify(viewportConfig));
+        if (preferHeaded) {
+          printStep(preferenceArgs.headed, "true");
+        }
         updateSpin(stepString("launch", "puppeteer"));
         const browser = yield puppeteer.launch({
           headless: !preferHeaded
@@ -216,19 +272,20 @@ var require_src = __commonJS({
         let argValue;
         let agent;
         try {
-          updateSpin(stepString("launch", url));
-          yield page.goto(url);
-          updateSpin(stepString("waitForNetworkIdle", url));
+          updateSpin(stepString("launch", urlToVisit));
+          yield page.goto(urlToVisit);
+          updateSpin(stepString("waitForNetworkIdle", urlToVisit));
           yield page.waitForNetworkIdle();
-          printStep("launched", url);
+          printStep("launched", urlToVisit);
           agent = new PuppeteerAgent(page, {
             autoPrintReportMsg: false
           });
+          const orderedArgs = orderMattersParse(process.argv);
           let index = 0;
           let outputPath;
           let actionStarted = false;
-          while (index <= args.length - 1) {
-            const arg = args[index];
+          while (index <= orderedArgs.length - 1) {
+            const arg = orderedArgs[index];
             argName = arg.name;
             argValue = arg.value;
             updateSpin(stepString(argName, String(argValue)));
@@ -287,7 +344,7 @@ var require_src = __commonJS({
                 if (!param)
                   break;
                 assert(typeof param === "number", "sleep must be a number");
-                yield new Promise((resolve) => setTimeout(resolve, param));
+                yield new Promise((resolve2) => setTimeout(resolve2, param));
                 printStep(argName, String(argValue));
                 break;
               }

package/dist/lib/help.js

@@ -10,7 +10,7 @@ var require_package = __commonJS({
     module2.exports = {
       name: "@midscene/cli",
       description: "An AI-powered automation SDK can control the page, perform assertions, and extract data in JSON format using natural language. See https://midscenejs.com/ for details.",
-      version: "0.8.0",
+      version: "0.8.1-beta-20241112034501.0",
       repository: "https://github.com/web-infra-dev/midscene",
       homepage: "https://midscenejs.com/",
       "jsnext:source": "./src/index.ts",
@@ -31,12 +31,16 @@ var require_package = __commonJS({
       },
       dependencies: {
         "@midscene/web": "workspace:*",
+        dotenv: "16.4.5",
+        "http-server": "14.1.1",
+        minimist: "1.2.5",
         "ora-classic": "5.4.2",
         puppeteer: "23.0.2",
         yargs: "17.7.2"
       },
       devDependencies: {
         "@modern-js/module-tools": "2.60.6",
+        "@types/minimist": "1.2.5",
         "@types/node": "^18.0.0",
         "@types/yargs": "17.0.32",
         execa: "9.3.0",
@@ -65,7 +69,8 @@ if (process.argv.indexOf("--help") !== -1) {
   Usage: midscene [options] [actions]
 
   Options:
-    --url <url>                 The URL to visit, required
+    --serve <root-directory>    Serve the local path as a static server, optional
+    --url <url>                 The URL to visit, required. If --serve is provided, provide the path to the file to visit
     --user-agent <ua>           The user agent to use, optional
     --viewport-width <width>    The width of the viewport, optional
     --viewport-height <height>  The height of the viewport, optional
@@ -91,6 +96,9 @@ if (process.argv.indexOf("--help") !== -1) {
       --query-output status.json \\
       --query '{name: string, status: string}[], service status of github page'
 
+    # serve the current directory and visit the index.html file
+    midscene --serve . --url "index.html" --assert "the content title is 'My App'"
+
   Examples with Chinese Prompts
     # headed 模式（即可见浏览器）访问 baidu.com 并搜索“天气”
     midscene --headed --url "https://www.baidu.com" --action "在搜索框输入 '天气', 敲回车" --wait-for 界面上出现了天气信息
@@ -99,10 +107,6 @@ if (process.argv.indexOf("--help") !== -1) {
     midscene --url "https://www.githubstatus.com/" \\
       --query-output status.json \\
       --query '{serviceName: string, status: string}[], github 页面的服务状态，返回服务名称'
-
-
-    To launch a playground server, run the following command:
-    midscene playground
   `);
   process.exit(0);
 } else if (process.argv.indexOf("--version") !== -1) {

package/dist/lib/index.js

@@ -25,7 +25,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve2, reject) => {
     var fulfilled = (value) => {
       try {
         step(generator.next(value));
@@ -40,7 +40,7 @@ var __async = (__this, __arguments, generator) => {
         reject(e);
       }
     };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
@@ -51,7 +51,7 @@ var require_package = __commonJS({
     module2.exports = {
       name: "@midscene/cli",
       description: "An AI-powered automation SDK can control the page, perform assertions, and extract data in JSON format using natural language. See https://midscenejs.com/ for details.",
-      version: "0.8.0",
+      version: "0.8.1-beta-20241112034501.0",
       repository: "https://github.com/web-infra-dev/midscene",
       homepage: "https://midscenejs.com/",
       "jsnext:source": "./src/index.ts",
@@ -72,12 +72,16 @@ var require_package = __commonJS({
       },
       dependencies: {
         "@midscene/web": "workspace:*",
+        dotenv: "16.4.5",
+        "http-server": "14.1.1",
+        minimist: "1.2.5",
         "ora-classic": "5.4.2",
         puppeteer: "23.0.2",
         yargs: "17.7.2"
       },
       devDependencies: {
         "@modern-js/module-tools": "2.60.6",
+        "@types/minimist": "1.2.5",
         "@types/node": "^18.0.0",
         "@types/yargs": "17.0.32",
         execa: "9.3.0",
@@ -99,12 +103,25 @@ var require_package = __commonJS({
 // src/index.ts
 var import_node_assert = __toESM(require("assert"));
 var import_node_fs = require("fs");
+var import_node_path = require("path");
 var import_puppeteer = require("@midscene/web/puppeteer");
+var import_http_server = require("http-server");
+var import_minimist = __toESM(require("minimist"));
 var import_ora_classic = __toESM(require("ora-classic"));
 var import_puppeteer2 = __toESM(require("puppeteer"));
 
 // src/args.ts
-function parse(args2) {
+function findOnlyItemInArgs(args2, name) {
+  const found = args2[name];
+  if (found === void 0) {
+    return false;
+  }
+  if (Array.isArray(found) && found.length > 1) {
+    throw new Error(`Multiple values found for ${name}`);
+  }
+  return found;
+}
+function orderMattersParse(args2) {
   const orderedArgs = [];
   args2.forEach((arg, index) => {
     if (arg.startsWith("--")) {
@@ -118,36 +135,33 @@ function parse(args2) {
   });
   return orderedArgs;
 }
-function findOnlyItemInArgs(args2, name) {
-  const found = args2.filter((arg) => arg.name === name);
-  if (found.length === 0) {
-    return false;
-  }
-  if (found.length > 1) {
-    throw new Error(`Multiple values found for ${name}`);
-  }
-  return found[0].value;
-}
 
 // src/index.ts
+var import_config = require("dotenv/config");
 var spinner;
-var stepString = (name, param) => {
-  let paramStr;
-  if (typeof param === "object") {
-    paramStr = JSON.stringify(param, null, 2);
-  } else if (name === "sleep") {
-    paramStr = `${param}ms`;
-  } else {
-    paramStr = param;
+var stepString = (name, param, line2) => {
+  const paramToString = (data) => {
+    if (name === "sleep") {
+      return `${data}ms`;
+    }
+    if (typeof data === "object") {
+      return JSON.stringify(data, null, 2);
+    }
+    return String(data);
+  };
+  let paramStr = paramToString(param);
+  if (line2) {
+    paramStr = `${paramStr}
+  ${line2}`;
   }
   return `${name}
   ${paramStr ? `${paramStr}` : ""}`;
 };
-var printStep = (name, param) => {
+var printStep = (name, param, line2) => {
   if (spinner) {
     spinner.stop();
   }
-  console.log(`- ${stepString(name, param)}`);
+  console.log(`- ${stepString(name, param, line2)}`);
 };
 var updateSpin = (text) => {
   if (!spinner) {
@@ -158,8 +172,19 @@ var updateSpin = (text) => {
     spinner.start();
   }
 };
+var launchServer = (dir) => __async(exports, null, function* () {
+  return new Promise((resolve2, reject) => {
+    const server = (0, import_http_server.createServer)({
+      root: dir
+    });
+    server.listen(0, "127.0.0.1", () => {
+      resolve2(server);
+    });
+  });
+});
 var preferenceArgs = {
   url: "url",
+  serve: "serve",
   headed: "headed",
   viewportWidth: "viewport-width",
   viewportHeight: "viewport-height",
@@ -179,44 +204,75 @@ var actionArgs = {
 var defaultUA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36";
 var welcome = "\nWelcome to @midscene/cli\n";
 console.log(welcome);
-var args = parse(process.argv);
+var args = (0, import_minimist.default)(process.argv);
 if (findOnlyItemInArgs(args, "version")) {
   const versionFromPkgJson = require_package().version;
   console.log(`@midscene/cli version ${versionFromPkgJson}`);
   process.exit(0);
 }
-args.forEach((arg) => {
+Object.keys(args).forEach((arg) => {
+  if (arg === "_")
+    return;
   (0, import_node_assert.default)(
-    Object.values(preferenceArgs).includes(arg.name) || Object.values(actionArgs).includes(arg.name),
-    `Unknown argument: ${arg.name}`
+    Object.values(preferenceArgs).includes(arg) || Object.values(actionArgs).includes(arg),
+    `Unknown argument: ${arg}`
   );
 });
-var preferHeaded = findOnlyItemInArgs(args, preferenceArgs.headed);
-var userExpectWidth = findOnlyItemInArgs(args, preferenceArgs.viewportWidth);
-var userExpectHeight = findOnlyItemInArgs(
-  args,
-  preferenceArgs.viewportHeight
-);
-var userExpectDpr = findOnlyItemInArgs(args, preferenceArgs.viewportScale);
-var defaultDpr = process.platform === "darwin" ? 2 : 1;
-var viewportConfig = {
-  width: typeof userExpectWidth === "number" ? userExpectWidth : 1280,
-  height: typeof userExpectHeight === "number" ? userExpectHeight : 1280,
-  deviceScaleFactor: typeof userExpectDpr === "number" ? userExpectDpr : defaultDpr
-};
-var url = findOnlyItemInArgs(args, preferenceArgs.url);
-(0, import_node_assert.default)(url, "URL is required");
-(0, import_node_assert.default)(typeof url === "string", "URL must be a string");
-var preferredUA = findOnlyItemInArgs(args, preferenceArgs.useragent);
-var ua = typeof preferredUA === "string" ? preferredUA : defaultUA;
-printStep(preferenceArgs.url, url);
-printStep(preferenceArgs.useragent, ua);
-printStep("viewport", JSON.stringify(viewportConfig));
-if (preferHeaded) {
-  printStep(preferenceArgs.headed, "true");
-}
 Promise.resolve(
   (() => __async(exports, null, function* () {
+    const staticServerConfig = findOnlyItemInArgs(args, "serve");
+    let staticServerUrl;
+    if (staticServerConfig) {
+      const serverDir = typeof staticServerConfig === "string" ? staticServerConfig : process.cwd();
+      const finalServerDir = (0, import_node_path.resolve)(process.cwd(), serverDir);
+      const staticServerResult = yield launchServer(finalServerDir);
+      const server = staticServerResult.server;
+      const serverAddress = server.address();
+      staticServerUrl = `http://${serverAddress == null ? void 0 : serverAddress.address}:${serverAddress == null ? void 0 : serverAddress.port}`;
+      printStep("static server", finalServerDir, staticServerUrl);
+    }
+    const preferHeaded = findOnlyItemInArgs(args, preferenceArgs.headed);
+    const userExpectWidth = findOnlyItemInArgs(
+      args,
+      preferenceArgs.viewportWidth
+    );
+    const userExpectHeight = findOnlyItemInArgs(
+      args,
+      preferenceArgs.viewportHeight
+    );
+    const userExpectDpr = findOnlyItemInArgs(
+      args,
+      preferenceArgs.viewportScale
+    );
+    const defaultDpr = process.platform === "darwin" ? 2 : 1;
+    const viewportConfig = {
+      width: typeof userExpectWidth === "number" ? userExpectWidth : 1280,
+      height: typeof userExpectHeight === "number" ? userExpectHeight : 1280,
+      deviceScaleFactor: typeof userExpectDpr === "number" ? userExpectDpr : defaultDpr
+    };
+    const url = findOnlyItemInArgs(args, preferenceArgs.url);
+    let urlToVisit;
+    if (staticServerUrl) {
+      if (typeof url !== "undefined") {
+        if (url.startsWith("/")) {
+          urlToVisit = `${staticServerUrl}${url}`;
+        } else {
+          urlToVisit = `${staticServerUrl}/${url}`;
+        }
+      }
+    } else {
+      urlToVisit = url;
+    }
+    (0, import_node_assert.default)(urlToVisit, "URL is required");
+    (0, import_node_assert.default)(typeof urlToVisit === "string", "URL must be a string");
+    const preferredUA = findOnlyItemInArgs(args, preferenceArgs.useragent);
+    const ua = typeof preferredUA === "string" ? preferredUA : defaultUA;
+    printStep(preferenceArgs.url, urlToVisit);
+    printStep(preferenceArgs.useragent, ua);
+    printStep("viewport", JSON.stringify(viewportConfig));
+    if (preferHeaded) {
+      printStep(preferenceArgs.headed, "true");
+    }
     updateSpin(stepString("launch", "puppeteer"));
     const browser = yield import_puppeteer2.default.launch({
       headless: !preferHeaded
@@ -229,19 +285,20 @@ Promise.resolve(
     let argValue;
     let agent;
     try {
-      updateSpin(stepString("launch", url));
-      yield page.goto(url);
-      updateSpin(stepString("waitForNetworkIdle", url));
+      updateSpin(stepString("launch", urlToVisit));
+      yield page.goto(urlToVisit);
+      updateSpin(stepString("waitForNetworkIdle", urlToVisit));
       yield page.waitForNetworkIdle();
-      printStep("launched", url);
+      printStep("launched", urlToVisit);
       agent = new import_puppeteer.PuppeteerAgent(page, {
         autoPrintReportMsg: false
       });
+      const orderedArgs = orderMattersParse(process.argv);
       let index = 0;
       let outputPath;
       let actionStarted = false;
-      while (index <= args.length - 1) {
-        const arg = args[index];
+      while (index <= orderedArgs.length - 1) {
+        const arg = orderedArgs[index];
         argName = arg.name;
         argValue = arg.value;
         updateSpin(stepString(argName, String(argValue)));
@@ -300,7 +357,7 @@ Promise.resolve(
             if (!param)
               break;
             (0, import_node_assert.default)(typeof param === "number", "sleep must be a number");
-            yield new Promise((resolve) => setTimeout(resolve, param));
+            yield new Promise((resolve2) => setTimeout(resolve2, param));
             printStep(argName, String(argValue));
             break;
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@midscene/cli",
   "description": "An AI-powered automation SDK can control the page, perform assertions, and extract data in JSON format using natural language. See https://midscenejs.com/ for details.",
-  "version": "0.8.0",
+  "version": "0.8.1-beta-20241112034501.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "jsnext:source": "./src/index.ts",
@@ -15,13 +15,17 @@
     "bin"
   ],
   "dependencies": {
+    "dotenv": "16.4.5",
+    "http-server": "14.1.1",
+    "minimist": "1.2.5",
     "ora-classic": "5.4.2",
     "puppeteer": "23.0.2",
     "yargs": "17.7.2",
-    "@midscene/web": "0.8.0"
+    "@midscene/web": "0.8.1-beta-20241112034501.0"
   },
   "devDependencies": {
     "@modern-js/module-tools": "2.60.6",
+    "@types/minimist": "1.2.5",
     "@types/node": "^18.0.0",
     "@types/yargs": "17.0.32",
     "execa": "9.3.0",

package/dist/lib/playground.js

@@ -1 +0,0 @@
-"use strict";

package/dist/types/playground.d.ts

@@ -1,2 +0,0 @@
-
-export {  }