feat: add playwright e2e testing framework (#4468)

* feat: add playwright e2e testing framework

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);
+  });
+});

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();
+}