test: add playwright config and e2e tests

2026-05-27 23:28:44 +08:00
parent 13846a0b61
commit 88ec132579
8 changed files with 515 additions and 0 deletions
@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test';
+
+const mockLoginSuccess = { code: 200, message: '登录成功' };
+const mockLoginFailure = { code: 401, message: '账号或密码错误' };
+const mockTasks = { code: 200, data: { records: [] } };
+const mockFeed = { code: 200, data: [] };
+
+test.describe('Login page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/login');
+    await page.waitForSelector('.login-page', { timeout: 10_000 });
+  });
+
+  test('renders the login form with title and inputs', async ({ page }) => {
+    await expect(page.locator('h2')).toContainText('账号登录');
+    await expect(page.locator('.login-form')).toBeVisible();
+    // Element Plus inputs
+    const inputs = page.locator('.el-input');
+    await expect(inputs).toHaveCount(2);
+    await expect(page.locator('.submit-btn')).toBeVisible();
+  });
+
+  test('shows validation errors when fields are empty', async ({ page }) => {
+    await page.locator('.submit-btn').click();
+    // Element Plus validation shows error messages
+    await expect(page.locator('.el-form-item__error').first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('shows error on invalid credentials', async ({ page }) => {
+    await page.route('**/api/login**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockLoginFailure),
+      }),
+    );
+    await page.route('**/api/tasks**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockTasks) }),
+    );
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+
+    // Fill in inputs using Element Plus el-input inner input
+    const usernameInput = page.locator('.el-form-item').filter({ hasText: '账号' }).locator('input');
+    const passwordInput = page.locator('.el-form-item').filter({ hasText: '密码' }).locator('input');
+    await usernameInput.fill('wronguser');
+    await passwordInput.fill('wrongpass');
+    await page.locator('.submit-btn').click();
+
+    // Element Plus error message appears in a popup
+    await expect(page.locator('.el-message--error')).toBeVisible({ timeout: 5000 });
+  });
+
+  test('successful login navigates to /welcome', async ({ page }) => {
+    await page.route('**/api/login**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockLoginSuccess),
+      }),
+    );
+    await page.route('**/api/tasks**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockTasks) }),
+    );
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+
+    const usernameInput = page.locator('.el-form-item').filter({ hasText: '账号' }).locator('input');
+    const passwordInput = page.locator('.el-form-item').filter({ hasText: '密码' }).locator('input');
+    await usernameInput.fill('admin');
+    await passwordInput.fill('password123');
+    await page.locator('.submit-btn').click();
+
+    await expect(page).toHaveURL(/\/welcome/, { timeout: 10_000 });
+    const isLoggedIn = await page.evaluate(() => localStorage.getItem('isLoggedIn'));
+    expect(isLoggedIn).toBe('true');
+  });
+});