test: e2e 选择器迁移为角色定位

e2e/login.spec.ts

@@ -17,11 +17,11 @@ test.describe('Login page', () => {
     // Element Plus inputs
     const inputs = page.locator('.el-input');
     await expect(inputs).toHaveCount(2);
-    await expect(page.locator('.submit-btn')).toBeVisible();
+    await expect(page.getByRole('button', { name: '进入系统' })).toBeVisible();
   });
 
   test('shows validation errors when fields are empty', async ({ page }) => {
-    await page.locator('.submit-btn').click();
+    await page.getByRole('button', { name: '进入系统' }).click();
     // Element Plus validation shows error messages
     await expect(page.locator('.el-form-item__error').first()).toBeVisible({ timeout: 5000 });
   });
@@ -42,11 +42,11 @@ test.describe('Login page', () => {
     );
 
     // 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');
+    const usernameInput = page.getByPlaceholder('请输入账号');
+    const passwordInput = page.getByPlaceholder('请输入密码');
     await usernameInput.fill('wronguser');
     await passwordInput.fill('wrongpass');
-    await page.locator('.submit-btn').click();
+    await page.getByRole('button', { name: '进入系统' }).click();
 
     // Element Plus error message appears in a popup
     await expect(page.locator('.el-message--error')).toBeVisible({ timeout: 5000 });
@@ -67,11 +67,11 @@ test.describe('Login page', () => {
       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');
+    const usernameInput = page.getByPlaceholder('请输入账号');
+    const passwordInput = page.getByPlaceholder('请输入密码');
     await usernameInput.fill('admin');
     await passwordInput.fill('password123');
-    await page.locator('.submit-btn').click();
+    await page.getByRole('button', { name: '进入系统' }).click();
 
     await expect(page).toHaveURL(/\/welcome/, { timeout: 10_000 });
     const isLoggedIn = await page.evaluate(() => localStorage.getItem('isLoggedIn'));

e2e/start-task.spec.ts

@@ -115,7 +115,7 @@ test.describe('StartTask - 暂停后继续', () => {
     await expect(page.locator('.status-text')).toContainText('进行中');
 
     // 点击暂停按钮
-    await page.locator('button', { hasText: '暂停' }).click();
+    await page.getByRole('button', { name: '暂停' }).click();
 
     // 验证暂停 API 被调用
     expect(apiCalls).toContain('pause');
@@ -124,7 +124,7 @@ test.describe('StartTask - 暂停后继续', () => {
     await expect(page.locator('.status-text')).toContainText('已暂停');
 
     // 点击开始按钮
-    await page.locator('button', { hasText: '开始' }).click();
+    await page.getByRole('button', { name: '开始' }).click();
 
     // 验证 continue API 被调用
     expect(apiCalls).toContain('continue');
@@ -159,7 +159,7 @@ test.describe('StartTask - 暂停后继续', () => {
     await expect(page.locator('.status-text')).toContainText('进行中');
 
     // ONGOING 状态下，开始按钮是 disabled 的，不应触发 continue
-    const startBtn = page.locator('button', { hasText: '开始' });
+    const startBtn = page.getByRole('button', { name: '开始' });
     await expect(startBtn).toBeDisabled();
 
     // continue API 不应被调用
@@ -187,18 +187,18 @@ test.describe('StartTask - 暂停后继续', () => {
     await page.waitForSelector('.start-page', { timeout: 10_000 });
 
     // 暂停
-    await page.locator('button', { hasText: '暂停' }).click();
+    await page.getByRole('button', { name: '暂停' }).click();
     await expect(page.locator('.status-text')).toContainText('已暂停');
 
     // 结束会话
-    await page.locator('button', { hasText: '结束会话' }).click();
+    await page.getByRole('button', { name: '结束会话' }).click();
 
     // 在弹窗中输入总结内容
     await page.locator('.el-dialog textarea').fill('测试总结');
-    await page.locator('.el-dialog button', { hasText: '确认结束' }).click();
+    await page.getByRole('dialog').getByRole('button', { name: '确认结束' }).click();
 
     // 确认第二个弹窗（"确定要结束本次学习会话吗？"）
-    const confirmBtn = page.locator('.el-message-box__btns button', { hasText: '确定' });
+    const confirmBtn = page.getByRole('dialog').getByRole('button', { name: '确定' });
     await confirmBtn.waitFor({ timeout: 5000 });
     await confirmBtn.click();
 

e2e/study.spec.ts

@@ -76,12 +76,12 @@ test.describe('Study page', () => {
   });
 
   test('clicking add navigates to add-task form', async ({ page }) => {
-    await page.locator('.action-card').locator('button', { hasText: '添加任务' }).click();
+    await page.getByRole('button', { name: '添加任务' }).click();
     await expect(page).toHaveURL(/\/add-task/);
   });
 
   test('clicking update navigates to update-task form', async ({ page }) => {
-    await page.locator('.action-card').locator('button', { hasText: '更新任务' }).click();
+    await page.getByRole('button', { name: '更新任务' }).click();
     await expect(page).toHaveURL(/\/update-task/);
   });
 
@@ -97,9 +97,9 @@ test.describe('Study page', () => {
       });
     });
 
-    await page.locator('.action-card').locator('button', { hasText: '删除任务' }).click();
+    await page.getByRole('button', { name: '删除任务' }).click();
     // 处理确认弹窗
-    const confirmBtn = page.locator('.el-message-box__btns button:has-text("确定删除")');
+    const confirmBtn = page.getByRole('dialog').getByRole('button', { name: '确定删除' });
     await confirmBtn.waitFor({ timeout: 3000 });
     await confirmBtn.click();
     await expect(page.locator('.task-list-item')).toHaveCount(1, { timeout: 5000 });

e2e/task-form.spec.ts

@@ -20,7 +20,7 @@ test.describe('Task form', () => {
     await loginAndGo(page, '/add-task');
     await expect(page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input')).toHaveValue('');
     await expect(page.locator('.el-form-item').filter({ hasText: '任务描述' }).locator('textarea')).toHaveValue('');
-    await expect(page.locator('.action-row button').first()).toContainText('添加');
+    await expect(page.getByRole('button', { name: '添加', exact: true })).toBeVisible();
   });
 
   test('submitting add-task sends POST and navigates to /study', async ({ page }) => {
@@ -36,9 +36,9 @@ test.describe('Task form', () => {
     });
     await loginAndGo(page, '/add-task');
 
-    await page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input').fill('新学习任务');
-    await page.locator('.el-form-item').filter({ hasText: '任务描述' }).locator('textarea').fill('这是一个测试任务');
-    await page.locator('.action-row button').first().click();
+    await page.getByPlaceholder('例如：Vue3 组件通信实践').fill('新学习任务');
+    await page.getByPlaceholder('请输入任务描述').fill('这是一个测试任务');
+    await page.getByRole('button', { name: '添加', exact: true }).click();
 
     await expect(page).toHaveURL(/\/study/, { timeout: 10_000 });
   });
@@ -75,18 +75,18 @@ test.describe('Task form', () => {
     });
 
     await loginAndGo(page, '/update-task/1');
-    await expect(page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input')).toHaveValue('已有任务');
-    await expect(page.locator('.action-row button').first()).toContainText('更新');
+    await expect(page.getByPlaceholder('例如：Vue3 组件通信实践')).toHaveValue('已有任务');
+    await expect(page.getByRole('button', { name: '更新', exact: true })).toBeVisible();
 
-    await page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input').fill('更新后的任务');
-    await page.locator('.action-row button').first().click();
+    await page.getByPlaceholder('例如：Vue3 组件通信实践').fill('更新后的任务');
+    await page.getByRole('button', { name: '添加', exact: true }).click();
 
     await expect(page).toHaveURL(/\/study/, { timeout: 10_000 });
   });
 
   test('cancel navigates back to /study', async ({ page }) => {
     await loginAndGo(page, '/add-task');
-    await page.locator('.action-row button').nth(1).click();
+    await page.getByRole('button', { name: '取消' }).click();
     await expect(page).toHaveURL(/\/study/);
   });
 });

e2e/welcome.spec.ts

@@ -23,12 +23,12 @@ test.describe('Welcome page', () => {
   });
 
   test('clicking start study navigates to /study', async ({ page }) => {
-    await page.locator('.quick-card').first().locator('button').click();
+    await page.getByRole('button', { name: '开始学习' }).click();
     await expect(page).toHaveURL(/\/study/);
   });
 
   test('clicking start review navigates to /review', async ({ page }) => {
-    await page.locator('.quick-card').nth(1).locator('button').click();
+    await page.getByRole('button', { name: '开始复习' }).click();
     await expect(page).toHaveURL(/\/review/);
   });