fix(report): fixed report path issues and static resource failure to load (#16)

* chore: optimize test case

* chore: optimize test case

* chore: optimize report path

* chore: optimize report path

* chore: delete unless log

Author: zhoushaw

packages/visualizer/package.json

@@ -33,6 +33,7 @@
     "@modern-js/plugin-module-doc": "^2.33.1",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@types/node": "^18.0.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "rimraf": "~3.0.2",

packages/web-integration/src/playwright/index.ts

@@ -13,10 +13,10 @@ const groupAndCaseForTest = (testInfo: TestInfo) => {
 
   if (titlePath.length > 1) {
     caseName = titlePath.pop()!;
-    groupName = titlePath.join(' > ');
+    groupName = `${titlePath.join(' > ')}:${testInfo.line}`;
   } else if (titlePath.length === 1) {
     caseName = titlePath[0];
-    groupName = caseName;
+    groupName = `${caseName}:${testInfo.line}`;
   } else {
     caseName = 'unnamed';
     groupName = 'unnamed';
@@ -32,63 +32,62 @@ export const PlaywrightAiFixture = () => {
     if (!idForPage) {
       idForPage = randomUUID();
       (page as any)[midSceneAgentKeyId] = idForPage;
-      pageAgentMap[idForPage] = new PageAgent(page, testId);
+      pageAgentMap[idForPage] = new PageAgent(page, `${testId}-${idForPage}`);
     }
     return pageAgentMap[idForPage];
   };
 
   return {
     ai: async ({ page }: any, use: any, testInfo: TestInfo) => {
+      const agent = agentForPage(page, testInfo.testId);
       await use(async (taskPrompt: string, opts?: { type?: 'action' | 'query' }) => {
         const { groupName, caseName } = groupAndCaseForTest(testInfo);
-        const agent = agentForPage(page, testInfo.testId);
         const actionType = opts?.type || 'action';
         const result = await agent.ai(taskPrompt, actionType, caseName, groupName);
-        if (agent.dumpFile) {
-          testInfo.annotations.push({
-            type: 'PLAYWRIGHT_AI_ACTION',
-            description: JSON.stringify({
-              testId: testInfo.testId,
-              dumpPath: agent.dumpFile,
-            }),
-          });
-        }
         return result;
       });
+      if (agent.dumpFile) {
+        testInfo.annotations.push({
+          type: 'MIDSCENE_AI_ACTION',
+          description: JSON.stringify({
+            testId: testInfo.testId,
+            dumpPath: agent.dumpFile,
+          }),
+        });
+      }
     },
     aiAction: async ({ page }: any, use: any, testInfo: TestInfo) => {
+      const agent = agentForPage(page, testInfo.testId);
       await use(async (taskPrompt: string) => {
-        const agent = agentForPage(page, testInfo.testId);
-
         const { groupName, caseName } = groupAndCaseForTest(testInfo);
         await agent.aiAction(taskPrompt, caseName, groupName);
-        if (agent.dumpFile) {
-          testInfo.annotations.push({
-            type: 'PLAYWRIGHT_AI_ACTION',
-            description: JSON.stringify({
-              testId: testInfo.testId,
-              dumpPath: agent.dumpFile,
-            }),
-          });
-        }
       });
+      if (agent.dumpFile) {
+        testInfo.annotations.push({
+          type: 'MIDSCENE_AI_ACTION',
+          description: JSON.stringify({
+            testId: testInfo.testId,
+            dumpPath: agent.dumpFile,
+          }),
+        });
+      }
     },
     aiQuery: async ({ page }: any, use: any, testInfo: TestInfo) => {
+      const agent = agentForPage(page, testInfo.testId);
       await use(async function (demand: any) {
-        const agent = agentForPage(page, testInfo.testId);
         const { groupName, caseName } = groupAndCaseForTest(testInfo);
         const result = await agent.aiQuery(demand, caseName, groupName);
-        if (agent.dumpFile) {
-          testInfo.annotations.push({
-            type: 'PLAYWRIGHT_AI_ACTION',
-            description: JSON.stringify({
-              testId: testInfo.testId,
-              dumpPath: agent.dumpFile,
-            }),
-          });
-        }
         return result;
       });
+      if (agent.dumpFile) {
+        testInfo.annotations.push({
+          type: 'MIDSCENE_AI_ACTION',
+          description: JSON.stringify({
+            testId: testInfo.testId,
+            dumpPath: agent.dumpFile,
+          }),
+        });
+      }
     },
   };
 };

packages/web-integration/src/playwright/reporter/index.ts

@@ -29,7 +29,7 @@ class MidSceneReporter implements Reporter {
 
   onTestEnd(test: TestCase, result: TestResult) {
     const aiActionTestData = test.annotations.filter((annotation) => {
-      if (annotation.type === 'PLAYWRIGHT_AI_ACTION') {
+      if (annotation.type === 'MIDSCENE_AI_ACTION') {
         return true;
       }
       return false;
@@ -55,7 +55,7 @@ class MidSceneReporter implements Reporter {
     generateTestData(testDataList);
     console.log(
       '\x1b[32m%s\x1b[0m',
-      `The report is generated successfully. Run the "node ./midscene-report/index.js" command to start the report`,
+      `The report is generated successfully. Run the "node ./midscene_run/midscene-report/index.js" command to start the report`,
     );
   }
 }

packages/web-integration/src/playwright/reporter/util.ts

@@ -14,7 +14,7 @@ export function generateTestData(testDataList: Array<TestData>) {
     }
   }, [] as Array<TestData>);
   const projectDir = process.cwd();
-  const reportDir = path.join(projectDir, 'midscene-report');
+  const reportDir = path.join(projectDir, 'midscene_run', 'midscene-report');
 
   // Create a report folder
   if (!fs.existsSync(reportDir)) {
@@ -87,4 +87,34 @@ export function generateTestData(testDataList: Array<TestData>) {
   } catch (err) {
     console.error('An error occurred:', err);
   }
+
+  // add static data
+  modifyRoutesJson(reportDir, testDataList);
+}
+
+function modifyRoutesJson(reportDir: string, testDataList: Array<TestData>) {
+  const filePath = path.join(reportDir, 'route.json');
+  try {
+    const data = fs.readFileSync(filePath, 'utf8');
+
+    const newPaths = testDataList.map((testData) => {
+      const fileName = testData.dumpPath?.split('/').pop();
+      return {
+        urlPath: `/${fileName}`,
+        isSPA: true,
+        isSSR: false,
+        entryPath: `public/${fileName}`,
+      };
+    });
+
+    const jsonData = JSON.parse(data);
+
+    // Insert the new path data into the js, OS and n structure
+    jsonData.routes.push(...newPaths);
+
+    // Write the updated js on data back to the file
+    fs.writeFileSync(filePath, JSON.stringify(jsonData, null, 2), 'utf8');
+  } catch (err) {
+    console.error('modifyRoutesJson fail:', err);
+  }
 }