workflow(ci): optimize web extract unit test (#64)

packages/web-integration/package.json

@@ -43,6 +43,7 @@
     "build:script": "modern build -c ./modern.inspect.config.ts",
     "build:watch": "modern build -w -c ./modern.config.ts & modern build -w -c ./modern.inspect.config.ts",
     "test": "vitest --run",
+    "test:u": "vitest --run -u",
     "test:ai": "AITEST=true npm run test",
     "new": "modern new",
     "upgrade": "modern upgrade",

packages/web-integration/src/extractor/extractor.ts

@@ -165,7 +165,10 @@ export function extractTextWithPosition(
     }
 
     if (isTextElement(node)) {
-      const text = node.textContent?.trim().replace(/\n+/g, ' ') || '';
+      const text = node.textContent?.trim().replace(/\n+/g, ' ');
+      if (!text) {
+        return;
+      }
       const attributes = getNodeAttributes(node);
       const nodeHashId = generateHash(text, rect);
       const selector = setDataForNode(node, nodeHashId);

packages/web-integration/tests/ai/e2e/tool.ts

@@ -1,14 +1,21 @@
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
+import type { WebPage } from '@/common/page';
 import { processImageElementInfo } from '@/img/img';
 import { getElementInfos } from '@/img/util';
 import { resizeImg, saveBase64Image } from '@midscene/core/image';
-import type { Page as PlaywrightPage } from '@playwright/test';
 
 export async function generateTestData(
-  page: PlaywrightPage,
+  page: WebPage,
   targetDir: string,
   inputImgBase64: string,
+  saveImgType?: {
+    disableInputImage: boolean;
+    disableOutputImage: boolean;
+    disableOutputWithoutTextImg: boolean;
+    disableResizeOutputImg: boolean;
+    disableSnapshot: boolean;
+  },
 ) {
   const {
     elementsPositionInfo,
@@ -36,26 +43,36 @@ export async function generateTestData(
 
   const resizeImgBase64 = await resizeImg(inputImgBase64);
 
-  writeFileSyncWithDir(
-    snapshotJsonPath,
-    JSON.stringify(captureElementSnapshot, null, 2),
-  );
-  await saveBase64Image({
-    base64Data: inputImgBase64,
-    outputPath: inputImagePath,
-  });
-  await saveBase64Image({
-    base64Data: compositeElementInfoImgBase64,
-    outputPath: outputImagePath,
-  });
-  await saveBase64Image({
-    base64Data: compositeElementInfoImgWithoutTextBase64,
-    outputPath: outputWithoutTextImgPath,
-  });
-  await saveBase64Image({
-    base64Data: resizeImgBase64,
-    outputPath: resizeOutputImgPath,
-  });
+  if (!saveImgType?.disableSnapshot) {
+    writeFileSyncWithDir(
+      snapshotJsonPath,
+      JSON.stringify(captureElementSnapshot, null, 2),
+    );
+  }
+  if (!saveImgType?.disableInputImage) {
+    await saveBase64Image({
+      base64Data: inputImgBase64,
+      outputPath: inputImagePath,
+    });
+  }
+  if (!saveImgType?.disableOutputImage) {
+    await saveBase64Image({
+      base64Data: compositeElementInfoImgBase64,
+      outputPath: outputImagePath,
+    });
+  }
+  if (!saveImgType?.disableOutputWithoutTextImg) {
+    await saveBase64Image({
+      base64Data: compositeElementInfoImgWithoutTextBase64,
+      outputPath: outputWithoutTextImgPath,
+    });
+  }
+  if (!saveImgType?.disableResizeOutputImg) {
+    await saveBase64Image({
+      base64Data: resizeImgBase64,
+      outputPath: resizeOutputImgPath,
+    });
+  }
 }
 
 export function generateTestDataPath(testDataName: string) {

packages/web-integration/tests/ai/puppeteer/utils.ts

@@ -34,5 +34,10 @@ export async function launchPage(
     })(),
   ]);
 
-  return page;
+  return {
+    page,
+    reset: async () => {
+      await browser.close();
+    },
+  };
 }

packages/web-integration/tests/unit-test/__snapshots__/extractor.test.ts.snap

@@ -212,12 +212,6 @@ exports[`extractor > basic 1`] = `
     },
     "content": "Name:",
   },
-  {
-    "attributes": {
-      "nodeType": "TEXT Node",
-    },
-    "content": "",
-  },
   {
     "attributes": {
       "id": "J_input",
@@ -226,36 +220,18 @@ exports[`extractor > basic 1`] = `
     },
     "content": "Hello World This is Placeholder",
   },
-  {
-    "attributes": {
-      "nodeType": "TEXT Node",
-    },
-    "content": "",
-  },
   {
     "attributes": {
       "nodeType": "BUTTON Node",
     },
     "content": "Click Me",
   },
-  {
-    "attributes": {
-      "nodeType": "TEXT Node",
-    },
-    "content": "",
-  },
   {
     "attributes": {
       "nodeType": "TEXT Node",
     },
     "content": "Shape",
   },
-  {
-    "attributes": {
-      "nodeType": "TEXT Node",
-    },
-    "content": "",
-  },
   {
     "attributes": {
       "nodeType": "INPUT Node",
@@ -271,12 +247,6 @@ exports[`extractor > basic 1`] = `
     },
     "content": "this_is_a_textarea",
   },
-  {
-    "attributes": {
-      "nodeType": "TEXT Node",
-    },
-    "content": "",
-  },
   {
     "attributes": {
       "nodeType": "TEXT Node",
@@ -307,11 +277,5 @@ exports[`extractor > basic 1`] = `
     },
     "content": "搜索任何物品",
   },
-  {
-    "attributes": {
-      "nodeType": "TEXT Node",
-    },
-    "content": "",
-  },
 ]
 `;

packages/web-integration/tests/unit-test/extractor.test.ts

@@ -1,16 +1,30 @@
-import { join } from 'node:path';
+import path, { join } from 'node:path';
 import { parseContextFromWebPage } from '@/common/utils';
+import { generateTestData } from 'tests/ai/e2e/tool';
 import { describe, expect, it } from 'vitest';
 import { launchPage } from '../ai/puppeteer/utils';
 
-const pagePath = join(__dirname, './fixtures/extractor.html');
+const pagePath = join(__dirname, './fixtures/extractor/index.html');
 describe(
   'extractor',
   () => {
     it('basic', async () => {
-      const page = await launchPage(`file://${pagePath}`);
+      const { page, reset } = await launchPage(`file://${pagePath}`);
+
+      const { content, screenshotBase64 } = await parseContextFromWebPage(page);
+      await generateTestData(
+        page,
+        path.join(__dirname, 'fixtures/extractor'),
+        screenshotBase64,
+        {
+          disableInputImage: false,
+          disableOutputImage: false,
+          disableOutputWithoutTextImg: true,
+          disableResizeOutputImg: true,
+          disableSnapshot: true,
+        },
+      );
 
-      const { content } = await parseContextFromWebPage(page);
       const list = content.map((item) => {
         return {
           content: item.content,
@@ -18,6 +32,7 @@ describe(
         };
       });
       expect(list).toMatchSnapshot();
+      await reset();
     });
   },
   {