feat(report): supports playwright test report generation (#15)

* chore: collect playwright test data

* feat: init

* feat(visualizer-report): add visualizer-report project

* feat(visualizer-report): add visualizer-report project

* chore: add report test data

* chore: add report test data

* chore: optimize generate playwright test data

* chore: optimize report logic

* chore: optimize report logic

* chore: optimize report logic

* chore: optimize report logic

* chore: optimize report logic

* chore(cd): ignore unless code

* chore: modify test command

* chore: optimize sidebar content

* chore: optimize report logic

.gitignore

@@ -86,6 +86,7 @@ output_resource
 tsconfig.tsbuildinfo
 
 .temp
+.output
 
 # emo infraDir: ''
 
@@ -97,7 +98,7 @@ playwright/.cache/
 
 # MidScene.js dump files
 midscene_run/
-
+midscene-report/
 __ai_responses__/
 
 

.vscode/settings.json

@@ -14,7 +14,6 @@
   "[javascript]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
-  "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "modifications",
   "[less]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

packages/midscene/package.json

@@ -6,6 +6,10 @@
   "main": "./dist/lib/index.js",
   "module": "./dist/es/index.js",
   "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

packages/playwright-demo/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@modern-js/module-tools": "2.56.1",
     "@modern-js/plugin-testing": "2.56.1",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "1.44.1",
     "@types/jest": "~29.2.4",
     "@types/node": "~16.11.7",
     "eslint-plugin-prettier": "~4.2.1",

packages/playwright-demo/playwright.config.ts

@@ -15,13 +15,13 @@ export default defineConfig({
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
+  forbidOnly: Boolean(process.env.CI),
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: '@midscene/web/playwright-report',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

packages/visualizer-report/.browserslistrc

@@ -0,0 +1,5 @@
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10

packages/visualizer-report/README.md

@@ -0,0 +1,37 @@
+# Modern.js App
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Enable optional features or add a new entry:
+
+```bash
+pnpm new
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm serve
+```
+
+For more information, see the [Modern.js documentation](https://modernjs.dev/en).

packages/visualizer-report/config/public/test-data-list.json

@@ -0,0 +1,3 @@
+{
+    "test-list":[{"testId":"45161835cecba6378a04-b2821fd5751102caa08c","title":"ai todo","status":"passed","duration":22204,"location":{"file":"/Users/bytedance/github/midscene/packages/web-integration/tests/e2e/ai-auto-todo.spec.ts","line":8,"column":5},"dumpPath":"/Users/bytedance/github/midscene/packages/web-integration/midscene_run/playwright-45161835cecba6378a04-b2821fd5751102caa08c.web-dump.json"},{"testId":"31de72c0afc13db9dc09-50c9ddc9a1d0c466547f","title":"ai order2","status":"passed","duration":40848,"location":{"file":"/Users/bytedance/github/midscene/packages/web-integration/tests/e2e/ai-xicha.spec.ts","line":36,"column":5},"dumpPath":"/Users/bytedance/github/midscene/packages/web-integration/midscene_run/playwright-31de72c0afc13db9dc09-50c9ddc9a1d0c466547f.web-dump.json"},{"testId":"31de72c0afc13db9dc09-00e11f768b63da0c779a","title":"ai order","status":"passed","duration":51045,"location":{"file":"/Users/bytedance/github/midscene/packages/web-integration/tests/e2e/ai-xicha.spec.ts","line":9,"column":5},"dumpPath":"/Users/bytedance/github/midscene/packages/web-integration/midscene_run/playwright-31de72c0afc13db9dc09-00e11f768b63da0c779a.web-dump.json"}]
+}

packages/visualizer-report/modern.config.ts

@@ -0,0 +1,24 @@
+import path from 'path';
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  source: {
+    // Prevent pnpm workspace from causing dev dependencies on npm to take effect
+    alias: {
+      react: path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+    },
+  },
+  runtime: {
+    router: true,
+  },
+  output: {
+    disableSourceMap: false,
+  },
+  plugins: [
+    appTools({
+      bundler: 'experimental-rspack',
+    }),
+  ],
+});

packages/visualizer-report/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@midscene/visualizer-report",
+  "version": "0.0.1",
+  "scripts": {
+    "reset": "npx rimraf ./**/node_modules",
+    "dev": "modern dev",
+    "build": "MODERNJS_DEPLOY=node modern deploy",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "modern lint",
+    "upgrade": "modern upgrade"
+  },
+  "files": [
+    "dist",
+    ".output",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "@modern-js/runtime": "2.56.2",
+    "@midscene/visualizer": "workspace:*",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "antd": "5.19.3"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "2.56.2",
+    "@modern-js/eslint-config": "2.56.2",
+    "@modern-js/tsconfig": "2.56.2",
+    "@modern-js-app/eslint-config": "2.56.2",
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.2.4",
+    "@types/node": "~16.11.7",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "lint-staged": "~13.1.0",
+    "prettier": "~2.8.1",
+    "husky": "~8.0.1",
+    "rimraf": "~3.0.2"
+  }
+}

packages/visualizer-report/src/App.tsx

@@ -0,0 +1,14 @@
+import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
+import { Report } from './pages/Report';
+import { Home } from './pages/Home';
+
+export default () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route index element={<Home />} />
+        <Route path="report" element={<Report />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};

packages/visualizer-report/src/modern-app-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types='@modern-js/app-tools/types' />
+/// <reference types='@modern-js/runtime/types' />
+/// <reference types='@modern-js/runtime/types/router' />

packages/visualizer-report/src/modern.runtime.ts

@@ -0,0 +1,3 @@
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+export default defineRuntimeConfig({});

packages/visualizer-report/src/pages/Home.module.css

@@ -0,0 +1,43 @@
+.nav {
+    /* display: flex;
+    justify-content: center; */
+    max-width: 680px;
+    margin: 20px 0;
+}
+
+.container {
+    max-width: 980px;
+    margin: 0 auto;
+}
+
+.test-result {
+    margin-top: 40px;
+}
+
+
+.test-details {
+    margin-top: -1px;
+    cursor: pointer;
+    padding: 20px;
+    border-top: 1px solid #ccc;
+}
+.test-details:hover {
+    background-color: #d3d3d3;
+}
+
+.test-info {
+    display: flex;
+}
+.test-name{
+    flex-grow: 1;
+    font-weight: bold;
+    font-size: medium;
+}
+
+.failed{
+    font-size: small;
+}
+.test-file-path {
+    color: #6e7781;
+    margin-top: 10px;
+}