feat: add playwright e2e testing framework (vbenjs#4468)

anncwb · web-flow · commit 2a83f1d66672 · 2024-09-22T21:35:40.000+08:00
* feat: add playwright e2e testing framework
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -3,4 +3,4 @@ ports:
     onOpen: open-preview
 tasks:
   - init: corepack enable && pnpm install
-    command: pnpm run dev
+    command: pnpm run dev:play
diff --git a/README.ja-JP.md b/README.ja-JP.md
@@ -133,6 +133,10 @@ pnpm build
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
+## スター歴史
+
+[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
 ## 貢献者
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
diff --git a/README.md b/README.md
@@ -132,6 +132,10 @@ If you think this project is helpful to you, you can help the author buy a cup o
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
 ## Contributor
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -132,6 +132,10 @@ pnpm build
 
 [CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
 ## Contributor
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
diff --git a/docs/src/en/guide/essentials/development.md b/docs/src/en/guide/essentials/development.md
@@ -46,8 +46,6 @@ The execution command is: `pnpm run [script]` or `npm run [script]`.
 ```json
 {
   "scripts": {
-    // Install dependencies
-    "bootstrap": "pnpm install",
     // Build the project
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
     // Build the project with analysis
@@ -107,9 +105,9 @@ The execution command is: `pnpm run [script]` or `npm run [script]`.
     // Package specification check
     "publint": "vsh publint",
     // Delete all node_modules, yarn.lock, package.lock.json, and reinstall dependencies
-    "reinstall": "pnpm clean --del-lock && pnpm bootstrap",
+    "reinstall": "pnpm clean --del-lock && pnpm install",
     // Run vitest unit tests
-    "test:unit": "vitest",
+    "test:unit": "vitest run --dom",
     // Update project dependencies
     "update:deps": " pnpm update --latest --recursive",
     // Changeset generation and versioning
diff --git a/docs/src/guide/essentials/development.md b/docs/src/guide/essentials/development.md
@@ -46,8 +46,6 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
 ```json
 {
   "scripts": {
-    // 安装依赖
-    "bootstrap": "pnpm install",
     // 构建项目
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
     // 构建项目并分析
@@ -107,9 +105,9 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
     // 包规范检查
     "publint": "vsh publint",
     // 删除所有的node_modules、yarn.lock、package.lock.json，重新安装依赖
-    "reinstall": "pnpm clean --del-lock && pnpm bootstrap",
+    "reinstall": "pnpm clean --del-lock && pnpm install",
     // 运行 vitest 单元测试
-    "test:unit": "vitest",
+    "test:unit": "vitest run --dom",
     // 更新项目依赖
     "update:deps": " pnpm update --latest --recursive",
     // changeset生成提交集
diff --git a/internal/lint-configs/eslint-config/src/configs/node.ts b/internal/lint-configs/eslint-config/src/configs/node.ts
@@ -24,6 +24,7 @@ export async function node(): Promise<Linter.Config[]> {
               'vite',
               '@vue/test-utils',
               '@vben/tailwind-config',
+              '@playwright/test',
             ],
           },
         ],
diff --git a/internal/lint-configs/eslint-config/src/custom-config.ts b/internal/lint-configs/eslint-config/src/custom-config.ts
@@ -134,6 +134,14 @@ const customConfig: Linter.Config[] = [
       'unicorn/prefer-module': 'off',
     },
   },
+  {
+    files: ['**/**/playwright.config.ts'],
+    rules: {
+      'n/prefer-global/buffer': 'off',
+      'n/prefer-global/process': 'off',
+      'no-console': 'off',
+    },
+  },
   {
     files: ['internal/**/**'],
     rules: {
diff --git a/package.json b/package.json
@@ -25,11 +25,10 @@
   },
   "type": "module",
   "scripts": {
-    "bootstrap": "pnpm install",
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
     "build:analyze": "turbo build:analyze",
-    "build:docker": "./build-local-docker-image.sh",
     "build:antd": "pnpm run build --filter=@vben/web-antd",
+    "build:docker": "./build-local-docker-image.sh",
     "build:docs": "pnpm run build --filter=@vben/docs",
     "build:ele": "pnpm run build --filter=@vben/web-ele",
     "build:naive": "pnpm run build --filter=@vben/web-naive",
@@ -55,15 +54,16 @@
     "prepare": "is-ci || husky",
     "preview": "turbo-run preview",
     "publint": "vsh publint",
-    "reinstall": "pnpm clean --del-lock && pnpm bootstrap",
-    "test:unit": "vitest",
+    "reinstall": "pnpm clean --del-lock && pnpm install",
+    "test:unit": "vitest run --dom",
+    "test:e2e": "turbo run test:e2e",
     "update:deps": "pnpm update --latest --recursive",
     "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile"
   },
   "devDependencies": {
     "@changesets/changelog-github": "catalog:",
     "@changesets/cli": "catalog:",
-    "@types/jsdom": "catalog:",
+    "@playwright/test": "catalog:",
     "@types/node": "catalog:",
     "@vben/commitlint-config": "workspace:*",
     "@vben/eslint-config": "workspace:*",
@@ -80,10 +80,11 @@
     "autoprefixer": "catalog:",
     "cross-env": "catalog:",
     "cspell": "catalog:",
+    "happy-dom": "catalog:",
     "husky": "catalog:",
     "is-ci": "catalog:",
-    "jsdom": "catalog:",
     "lint-staged": "catalog:",
+    "playwright": "catalog:",
     "rimraf": "catalog:",
     "tailwindcss": "catalog:",
     "turbo": "catalog:",
@@ -113,8 +114,7 @@
     },
     "neverBuiltDependencies": [
       "canvas",
-      "node-gyp",
-      "playwright"
+      "node-gyp"
     ]
   }
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,8 @@
 {
   "name": "@vben-core/shadcn-ui",
   "version": "5.3.0",
+  "#main": "./dist/index.mjs",
+  "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -20,16 +22,14 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "#main": "./dist/index.mjs",
   "main": "./src/index.ts",
-  "#module": "./dist/index.mjs",
   "module": "./src/index.ts",
   "exports": {
     ".": {
       "types": "./src/index.ts",
       "development": "./src/index.ts",
-      "//default": "./dist/index.mjs",
-      "default": "./src/index.ts"
+      "default": "./src/index.ts",
+      "//default": "./dist/index.mjs"
     }
   },
   "publishConfig": {
diff --git a/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue b/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
@@ -51,6 +51,7 @@ defineExpose({
     }"
     :style="style"
     class="bg-background dark:bg-accent absolute left-0 top-0 flex h-full cursor-move items-center justify-center px-3.5 shadow-md"
+    name="captcha-action"
   >
     <Slot :is-passing="isPassing" class="text-foreground/60 size-4">
       <slot name="icon">
diff --git a/packages/effects/common-ui/src/ui/authentication/forget-password.vue b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -95,6 +95,7 @@ function goToLogin() {
         :class="{
           'cursor-wait': loading,
         }"
+        aria-label="submit"
         class="mt-2 w-full"
         @click="handleSubmit"
       >
diff --git a/packages/effects/common-ui/src/ui/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -129,6 +129,7 @@ onMounted(() => {
         'cursor-wait': loading,
       }"
       :loading="loading"
+      aria-label="login"
       class="w-full"
       @click="handleSubmit"
     >
diff --git a/packages/effects/common-ui/src/ui/authentication/register.vue b/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -97,6 +97,7 @@ function goToLogin() {
         'cursor-wait': loading,
       }"
       :loading="loading"
+      aria-label="register"
       class="mt-2 w-full"
       @click="handleSubmit"
     >
diff --git a/playground/__tests__/e2e/auth-login.spec.ts b/playground/__tests__/e2e/auth-login.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+
+import { authLogin } from './common/auth';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Auth Login Page Tests', () => {
+  test('check title and page elements', async ({ page }) => {
+    // 获取页面标题并断言标题包含 'Vben Admin'
+    const title = await page.title();
+    expect(title).toContain('Vben Admin');
+  });
+
+  // 测试用例: 成功登录
+  test('should successfully login with valid credentials', async ({ page }) => {
+    await authLogin(page);
+  });
+});
diff --git a/playground/__tests__/e2e/common/auth.ts b/playground/__tests__/e2e/common/auth.ts
@@ -0,0 +1,46 @@
+import type { Page } from '@playwright/test';
+
+import { expect } from '@playwright/test';
+
+export async function authLogin(page: Page) {
+  // 确保登录表单正常
+  const usernameInput = await page.locator(`input[name='username']`);
+  await expect(usernameInput).toBeVisible();
+
+  const passwordInput = await page.locator(`input[name='password']`);
+  await expect(passwordInput).toBeVisible();
+
+  const sliderCaptcha = await page.locator(`div[name='captcha']`);
+  const sliderCaptchaAction = await page.locator(`div[name='captcha-action']`);
+  await expect(sliderCaptcha).toBeVisible();
+  await expect(sliderCaptchaAction).toBeVisible();
+
+  // 拖动验证码滑块
+  // 获取拖动按钮的位置
+  const sliderCaptchaBox = await sliderCaptcha.boundingBox();
+  if (!sliderCaptchaBox) throw new Error('滑块未找到');
+
+  const actionBoundingBox = await sliderCaptchaAction.boundingBox();
+  if (!actionBoundingBox) throw new Error('要拖动的按钮未找到');
+
+  // 计算起始位置和目标位置
+  const startX = actionBoundingBox.x + actionBoundingBox.width / 2; // div 中心的 x 坐标
+  const startY = actionBoundingBox.y + actionBoundingBox.height / 2; // div 中心的 y 坐标
+
+  const targetX = startX + sliderCaptchaBox.width + actionBoundingBox.width; // 向右拖动容器的宽度
+  const targetY = startY; // y 坐标保持不变
+
+  // 模拟鼠标拖动
+  await page.mouse.move(startX, startY); // 移动到 action 的中心
+  await page.mouse.down(); // 按下鼠标
+  await page.mouse.move(targetX, targetY, { steps: 20 }); // 拖动到目标位置
+  await page.mouse.up(); // 松开鼠标
+
+  // 在拖动后进行断言，检查action是否在预期位置,
+  const newActionBoundingBox = await sliderCaptchaAction.boundingBox();
+  expect(newActionBoundingBox?.x).toBeGreaterThan(actionBoundingBox.x);
+
+  // 到这里已经校验成功，点击进行登录
+  await page.waitForTimeout(300);
+  await page.getByRole('button', { name: 'login' }).click();
+}
diff --git a/playground/package.json b/playground/package.json
@@ -20,7 +20,10 @@
     "build:analyze": "pnpm vite build --mode analyze",
     "dev": "pnpm vite --mode development",
     "preview": "vite preview",
-    "typecheck": "vue-tsc --noEmit --skipLibCheck"
+    "typecheck": "vue-tsc --noEmit --skipLibCheck",
+    "test:e2e": "playwright test",
+    "test:e2e-ui": "playwright test --ui",
+    "test:e2e-codegen": "playwright codegen"
   },
   "imports": {
     "#/*": "./src/*"
diff --git a/playground/playwright.config.ts b/playground/playwright.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
diff --git a/turbo.json b/turbo.json
diff --git a/vitest.config.ts b/vitest.config.ts
