test: ✅ 实现站点测试

Author: hymbz

.gitignore

@@ -6,3 +6,7 @@ rollup.config-*.mjs
 storybook-static
 *storybook.log
 .env
+.tmp
+test/__snapshots__
+test/xpi
+test/cookie.ts

.oxlintrc.json

@@ -107,6 +107,7 @@
     "jest/no-hooks": "off",
     "jest/no-standalone-expect": "off",
     "jest/no-conditional-in-test": "off",
+    "jest/valid-describe-callback": "off",
     "jest/consistent-test-it": [
       "error",
       { "fn": "it", "withinDescribe": "it" }
@@ -152,6 +153,12 @@
           }
         ]
       }
+    },
+    {
+      "files": ["**/*.test.*"],
+      "rules": {
+        "no-console": "off"
+      }
     }
   ]
 }

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  // 使用 IntelliSense 了解相关属性。
+  // 悬停以查看现有属性的描述。
+  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "run select spec",
+      "type": "node",
+      "request": "launch",
+      "args": ["wdio.conf.ts"],
+      "cwd": "${workspaceFolder}",
+      "autoAttachChildProcesses": true,
+      "program": "${workspaceRoot}/node_modules/@wdio/cli/bin/wdio.js",
+      "console": "integratedTerminal",
+      "skipFiles": [
+        "${workspaceFolder}/node_modules/**/*.js",
+        "${workspaceFolder}/lib/**/*.js",
+        "<node_internals>/**/*.js"
+      ]
+    }
+  ]
+}

docs/.other/Dev.md

@@ -89,3 +89,13 @@ while (id--) clearInterval(id);
 1. 打包代码到 dist
 2. 创建 dist 的文件服务器，用于在浏览器获取最新的脚本代码
 3. 使用 vite 加载 src\components\display.tsx 以便单独测试组件
+
+## 浏览器测试
+
+`test/xpi` 里的 xpi 文件会全部安装上，需要在里面放上 violentmonkey 和 uBlock 的 xpi 文件。
+
+`test/cookie.ts` 用于存储通过 EditThisCookie 扩展导出的 cookie，测试时会自动检查当前站点名是否有对应的 cookie，有就加载上。
+
+<!-- wdio 可以和 percy 集成，不过之前已经折腾好了 storybook + percy，感觉没必要这里再搞，所以就用 wdio 自己的视觉测试好了 -->
+
+通过在测试文件中取消 `browser.saveScreen` 的注释，就可以将截图存至 `test/__snapshots__` 作为基准，之后用 `toMatchScreenSnapshot` 来对比检测。

eslint.config.mjs

@@ -97,6 +97,12 @@ export default antfu(
       ],
     },
   },
+  {
+    files: ['**/*.test.*'],
+    rules: {
+      'no-debugger': 'off',
+    },
+  },
   prettierConflicts,
   ...oxlint.buildFromOxlintConfigFile('./.oxlintrc.json'),
 )

package.json

@@ -23,7 +23,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook --maxWorkers=1 --testTimeout 60000",
-    "percy": "percy exec -- pnpm test-storybook"
+    "percy": "percy exec -- pnpm test-storybook",
+    "wdio": "wdio run ./wdio.conf.ts"
   },
   "dependencies": {
     "@material-design-icons/svg": "^0.14.15",
@@ -47,7 +48,7 @@
     "water.css": "^2.1.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.16.2",
+    "@antfu/eslint-config": "latest",
     "@babel/core": "^7.28.0",
     "@babel/plugin-proposal-import-attributes-to-assertions": "^7.27.1",
     "@babel/plugin-transform-runtime": "^7.28.0",
@@ -69,12 +70,20 @@
     "@solidjs/router": "^0.15.3",
     "@storybook/test-runner": "^0.23.0",
     "@types/libarchive.js": "^1.3.4",
+    "@types/mocha": "^10.0.10",
     "@types/node": "^24.0.10",
     "@types/shelljs": "^0.8.17",
     "@types/wicg-file-system-access": "^2023.10.6",
     "@types/wicg-web-app-launch": "^2023.1.4",
     "@typescript-eslint/parser": "^8.35.1",
     "@vueless/storybook-dark-mode": "^9.0.6",
+    "@wdio/cli": "^9.18.4",
+    "@wdio/concise-reporter": "^9.18.0",
+    "@wdio/firefox-profile-service": "^9.16.2",
+    "@wdio/globals": "^9.17.0",
+    "@wdio/local-runner": "^9.18.4",
+    "@wdio/mocha-framework": "^9.18.0",
+    "@wdio/visual-service": "^9.0.0",
     "autoprefixer": "^10.4.21",
     "axios": "^1.10.0",
     "babel-preset-solid": "^1.9.6",
@@ -93,6 +102,7 @@
     "postcss-import": "^16.1.1",
     "postcss-nesting": "^13.0.2",
     "prettier": "^3.6.2",
+    "radash": "^12.1.1",
     "release-it": "^19.0.3",
     "rfdc": "^1.4.1",
     "rollup": "^4.44.1",
@@ -121,9 +131,7 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitepress": "1.6.3",
     "vitest": "^3.2.4",
+    "wdio-vscode-service": "^6.1.3",
     "xo": "^1.1.1"
-  },
-  "pnpm": {
-    "neverBuiltDependencies": []
   }
 }