chore: print yaml file in chrome extension (#205)

web-infra-dev · Dec 25, 2024 · 05dad23 · 05dad23
1 parent db2e9ac
commit 05dad23
Show file tree

Hide file tree

Showing 52 changed files with 1,240 additions and 9,081 deletions.
diff --git a/apps/site/docs/en/integrate-with-puppeteer.mdx b/apps/site/docs/en/integrate-with-puppeteer.mdx
@@ -7,6 +7,8 @@ import { PackageManagerTabs } from '@theme';
 
 :::info Demo Project
 you can check the demo project of Puppeteer here: [https://github.com/web-infra-dev/midscene-example/blob/main/puppeteer-demo](https://github.com/web-infra-dev/midscene-example/blob/main/puppeteer-demo)
+
+There is also a demo of Puppeteer with Vitest: [https://github.com/web-infra-dev/midscene-example/tree/main/puppeteer-with-vitest-demo](https://github.com/web-infra-dev/midscene-example/tree/main/puppeteer-with-vitest-demo)
 :::
 
 ## Preparation

diff --git a/apps/site/docs/zh/integrate-with-puppeteer.mdx b/apps/site/docs/zh/integrate-with-puppeteer.mdx
@@ -7,6 +7,8 @@ import { PackageManagerTabs } from '@theme';
 
 :::info 样例项目
 你可以在这里看到向 Puppeteer 集成的样例项目：[https://github.com/web-infra-dev/midscene-example/blob/main/puppeteer-demo](https://github.com/web-infra-dev/midscene-example/blob/main/puppeteer-demo)
+
+这里还有一个 Puppeteer 和 Vitest 结合的样例项目：[https://github.com/web-infra-dev/midscene-example/tree/main/puppeteer-with-vitest-demo](https://github.com/web-infra-dev/midscene-example/tree/main/puppeteer-with-vitest-demo)
 :::
 
 ## 准备工作

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -23,8 +23,8 @@
   "dependencies": {
     "@midscene/core": "workspace:*",
     "@midscene/web": "workspace:*",
-    "http-server": "14.1.1",
-    "puppeteer": "23.0.2"
+    "puppeteer": "23.0.2",
+    "http-server": "14.1.1"
   },
   "devDependencies": {
     "@modern-js/module-tools": "2.60.6",
@@ -44,7 +44,7 @@
     "yargs": "17.7.2"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public",

diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
@@ -1,6 +1,6 @@
 import 'dotenv/config';
 import { matchYamlFiles, parseProcessArgs } from './cli-utils';
-import { playYamlFiles } from './yaml-player';
+import { playYamlFiles } from './yaml-runner';
 
 Promise.resolve(
   (async () => {

diff --git a/packages/cli/src/printer.ts b/packages/cli/src/printer.ts
@@ -1,16 +1,15 @@
 import { basename, dirname, relative } from 'node:path';
-import chalk from 'chalk';
 import type {
-  MidsceneYamlFileContext,
-  MidsceneYamlFlowItem,
-  MidsceneYamlFlowItemAIAction,
-  MidsceneYamlFlowItemAIAssert,
-  MidsceneYamlFlowItemAIQuery,
-  MidsceneYamlFlowItemAIWaitFor,
-  MidsceneYamlFlowItemSleep,
   ScriptPlayerStatusValue,
   ScriptPlayerTaskStatus,
-} from './types';
+} from '@midscene/core';
+import { type ScriptPlayer, flowItemBrief } from '@midscene/web';
+import chalk from 'chalk';
+
+export interface MidsceneYamlFileContext {
+  file: string;
+  player: ScriptPlayer;
+}
 
 export const isTTY = process.env.MIDSCENE_CLI_LOG_ON_NON_TTY
   ? false
@@ -24,51 +23,8 @@ export const currentSpinningFrame = () => {
   ];
 };
 
-export const flowItemBrief = (flowItem?: MidsceneYamlFlowItem) => {
-  if (!flowItem) {
-    return '';
-  }
-
-  const sliceText = (text?: string) => {
-    const lengthLimit = 60;
-    if (text && text.length > lengthLimit) {
-      return `${text.slice(0, lengthLimit)}...`;
-    }
-
-    return text || '';
-  };
-
-  if (
-    (flowItem as MidsceneYamlFlowItemAIAction).aiAction ||
-    (flowItem as MidsceneYamlFlowItemAIAction).ai
-  ) {
-    return `aiAction: ${sliceText(
-      (flowItem as MidsceneYamlFlowItemAIAction).aiActionProgressTip ||
-        (flowItem as MidsceneYamlFlowItemAIAction).aiAction ||
-        (flowItem as MidsceneYamlFlowItemAIAction).ai,
-    )}`;
-  }
-  if ((flowItem as MidsceneYamlFlowItemAIAssert).aiAssert) {
-    return `aiAssert: ${sliceText(
-      (flowItem as MidsceneYamlFlowItemAIAssert).aiAssert,
-    )}`;
-  }
-  if ((flowItem as MidsceneYamlFlowItemAIQuery).aiQuery) {
-    return `aiQuery: ${sliceText((flowItem as MidsceneYamlFlowItemAIQuery).aiQuery)}`;
-  }
-  if ((flowItem as MidsceneYamlFlowItemAIWaitFor).aiWaitFor) {
-    return `aiWaitFor: ${sliceText(
-      (flowItem as MidsceneYamlFlowItemAIWaitFor).aiWaitFor,
-    )}`;
-  }
-  if ((flowItem as MidsceneYamlFlowItemSleep).sleep) {
-    return `sleep: ${(flowItem as MidsceneYamlFlowItemSleep).sleep}`;
-  }
-  return '';
-};
-
 // status: init / running / done / error
-function textForStatus(status: ScriptPlayerStatusValue) {
+function indicatorForStatus(status: ScriptPlayerStatusValue) {
   if (status === 'init') {
     return chalk.gray('◌');
   }
@@ -88,7 +44,7 @@ export const contextInfo = (context: MidsceneYamlFileContext) => {
   const fileName = basename(filePath);
   const fileDir = dirname(filePath);
   const fileNameToPrint = `${chalk.gray(`${fileDir}/`)}${fileName}`;
-  const fileStatusText = textForStatus(context.player.status);
+  const fileStatusText = indicatorForStatus(context.player.status);
   const contextActionText =
     typeof context.player.currentTaskIndex === 'undefined' &&
     context.player.status === 'running'
@@ -146,7 +102,7 @@ export const singleTaskInfo = (task: ScriptPlayerTaskStatus) => {
       ? `\n${indent}${chalk.gray('error:')}\n${indent}${indent}${task.error?.message}`
       : '';
 
-  const statusText = textForStatus(task.status);
+  const statusText = indicatorForStatus(task.status);
   const mergedLine = `${statusText} ${task.name} ${stepText}${errorText}`;
   return {
     nameText: task.name,
@@ -164,14 +120,14 @@ function paddingLines(lines: string[]) {
 }
 
 export const contextTaskListSummary = (
-  taskStatus: ScriptPlayerTaskStatus[],
+  taskStatusArray: ScriptPlayerTaskStatus[],
   context: MidsceneYamlFileContext,
 ) => {
   const prefixLines: string[] = [];
   const currentLine: string[] = [];
   const suffixText: string[] = [];
   const { mergedText: fileInfo } = contextInfo(context);
-  for (const task of taskStatus) {
+  for (const task of taskStatusArray) {
     const { mergedLine } = singleTaskInfo(task);
 
     if (context.player.status === 'init') {