diff --git a/frontend/e2e/tests/settings-model.spec.ts b/frontend/e2e/tests/settings-model.spec.ts
index 87455024f..c29e44f5f 100644
--- a/frontend/e2e/tests/settings-model.spec.ts
+++ b/frontend/e2e/tests/settings-model.spec.ts
@@ -4,14 +4,18 @@ test.describe('Settings - Model Management', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/settings?tab=models')
     await page.waitForLoadState('domcontentloaded')
+    // Wait for the model management title to be visible
+    await expect(
+      page.locator('h2:has-text("Model Management"), h2:has-text("模型管理")').first()
+    ).toBeVisible({ timeout: 20000 })
   })
 
   test('should access model management page', async ({ page }) => {
-    // Verify we're on settings page (models is the default tab)
+    // Verify we're on settings page (models tab)
     await expect(page).toHaveURL(/\/settings/)
 
-    // Wait for model management title to load
-    await expect(page.locator('h2:has-text("Model")')).toBeVisible({ timeout: 20000 })
+    // The title is already verified in beforeEach, just verify the content area
+    await page.waitForSelector('[class*="overflow-y-auto"]', { state: 'visible', timeout: 10000 })
   })
 
   test('should display model list or empty state', async ({ page }) => {
@@ -41,9 +45,15 @@ test.describe('Settings - Model Management', () => {
 
     await createButton.first().click()
 
-    // Model edit is a full page form - check for the model ID input
-    const modelIdInput = page.locator('input#modelIdName, input[placeholder*="model"]')
-    await expect(modelIdInput.first()).toBeVisible({ timeout: 5000 })
+    // Wait for dialog to open (animation + rendering time)
+    await page.waitForTimeout(1500)
+
+    // Wait for dialog content to be visible
+    await page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 15000 })
+
+    // Model edit is a dialog form - check for the model ID input
+    const modelIdInput = page.locator('[data-testid="model-id-name-input"]')
+    await expect(modelIdInput).toBeVisible({ timeout: 15000 })
   })
 
   test('should create new model', async ({ page, testPrefix }) => {
@@ -56,33 +66,47 @@ test.describe('Settings - Model Management', () => {
     await expect(createButton.first()).toBeVisible({ timeout: 20000 })
     await createButton.first().click()
 
-    // Model edit is a full page form, wait for model ID input
-    const nameInput = page.locator('input#modelIdName, input[placeholder*="model"]').first()
-    await expect(nameInput).toBeVisible({ timeout: 5000 })
+    // Wait for dialog to open
+    await page.waitForTimeout(1500)
+    await page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 15000 })
+
+    // Model edit is a dialog form, wait for model ID input
+    const nameInput = page.locator('[data-testid="model-id-name-input"]')
+    await expect(nameInput).toBeVisible({ timeout: 15000 })
     await nameInput.fill(modelName)
 
     // Fill API key (required field)
     const apiKeyInput = page.locator('input#api_key, input[type="password"]').first()
-    if (await apiKeyInput.isVisible({ timeout: 2000 }).catch(() => false)) {
+    if (await apiKeyInput.isVisible({ timeout: 3000 }).catch(() => false)) {
       await apiKeyInput.fill('test-api-key-for-e2e')
     }
 
+    // Fill model ID - click on the Model ID dropdown and select a model
+    // The dropdown button has text like "Select Model ID" or similar
+    const modelIdDropdown = page
+      .locator('button:has-text("Select Model"), button:has-text("选择模型")')
+      .first()
+    if (await modelIdDropdown.isVisible({ timeout: 3000 }).catch(() => false)) {
+      await modelIdDropdown.click()
+      await page.waitForTimeout(500)
+      // Select the first available model option (skip "Custom..." which is usually last)
+      const modelOption = page.locator('[role="option"]').first()
+      if (await modelOption.isVisible({ timeout: 2000 }).catch(() => false)) {
+        await modelOption.click()
+      }
+    }
+
     // Submit form
     const submitButton = page.locator('button:has-text("Save"), button:has-text("保存")').first()
-    if (await submitButton.isVisible({ timeout: 3000 }).catch(() => false)) {
+    if (await submitButton.isVisible({ timeout: 5000 }).catch(() => false)) {
       await submitButton.click()
 
-      // Wait for navigation back to list or validation error
-      await page.waitForURL(/\/settings/, { timeout: 10000 }).catch(() => {
-        // May stay on form with validation errors
-      })
+      // Wait for dialog to close or validation error
+      await page.waitForTimeout(2000)
     }
   })
 
   test('should show test connection button for user models', async ({ page }) => {
-    // Wait for page to load
-    await expect(page.locator('h2:has-text("Model")')).toBeVisible({ timeout: 20000 })
-
     // Test connection button only appears for user models (not public)
     // Check if there are any user model cards with test button
     const testButton = page.locator('button[title*="Test"], button:has-text("Test")').first()
@@ -97,9 +121,6 @@ test.describe('Settings - Model Management', () => {
   })
 
   test('should show delete button for user models', async ({ page }) => {
-    // Wait for page to load
-    await expect(page.locator('h2:has-text("Model")')).toBeVisible({ timeout: 20000 })
-
     // Delete button only appears for user models (not public)
     const deleteButton = page.locator('button[title*="Delete"], button:has-text("Delete")').first()
 
diff --git a/frontend/e2e/tests/tasks/chat-image-browser-e2e.spec.ts b/frontend/e2e/tests/tasks/chat-image-browser-e2e.spec.ts
index 506554c37..77c15d1eb 100644
--- a/frontend/e2e/tests/tasks/chat-image-browser-e2e.spec.ts
+++ b/frontend/e2e/tests/tasks/chat-image-browser-e2e.spec.ts
@@ -225,6 +225,11 @@ test.describe('Chat Image Browser E2E with Mock Model Server', () => {
    */
   async function dismissOnboardingTour(page: Page): Promise<void> {
     try {
+      // First, try to forcefully remove all driver.js elements from DOM
+      await page.evaluate(() => {
+        document.querySelectorAll('.driver-overlay, .driver-popover, .driver-popover-tip, [class*="driver-"]').forEach(el => el.remove())
+      })
+
       // Check for driver.js overlay (onboarding tour)
       const driverOverlay = page.locator('.driver-overlay, .driver-popover')
       if (await driverOverlay.isVisible({ timeout: 1000 }).catch(() => false)) {
@@ -249,11 +254,15 @@ test.describe('Chat Image Browser E2E with Mock Model Server', () => {
           console.log('Pressed Escape to dismiss overlay')
         }
 
-        // Verify overlay is gone
+        // Verify overlay is gone, if not forcefully remove it
         if (await driverOverlay.isVisible({ timeout: 500 }).catch(() => false)) {
-          console.warn('Overlay still visible, trying to click outside')
-          // Click outside the overlay to dismiss it
-          await page.mouse.click(10, 10)
+          console.warn('Overlay still visible, forcefully removing from DOM')
+          await page.evaluate(() => {
+            document.querySelectorAll('.driver-overlay, .driver-popover, .driver-popover-tip, [class*="driver-"]').forEach(el => {
+              ;(el as HTMLElement).style.display = 'none'
+              el.remove()
+            })
+          })
           await page.waitForTimeout(500)
         }
       }
@@ -334,6 +343,8 @@ test.describe('Chat Image Browser E2E with Mock Model Server', () => {
         .first()
       if (await teamSelectorButton.isVisible({ timeout: 2000 }).catch(() => false)) {
         console.log('Found TeamSelectorButton, clicking...')
+        // Dismiss tour before clicking to avoid driver-overlay blocking
+        await dismissOnboardingTour(page)
         await teamSelectorButton.click()
         await page.waitForTimeout(500)
 
@@ -351,6 +362,8 @@ test.describe('Chat Image Browser E2E with Mock Model Server', () => {
       const teamSelector = page.locator('[data-tour="team-selector"]')
       if (await teamSelector.isVisible({ timeout: 3000 }).catch(() => false)) {
         console.log('Found team selector with data-tour attribute')
+        // Dismiss tour before clicking to avoid driver-overlay blocking
+        await dismissOnboardingTour(page)
         await teamSelector.click()
         await page.waitForTimeout(1000)
 
@@ -367,6 +380,8 @@ test.describe('Chat Image Browser E2E with Mock Model Server', () => {
       // Strategy 4: Direct click on team card if visible anywhere on page
       const teamCard = page.locator(`text="${TEST_TEAM_NAME}"`).first()
       if (await teamCard.isVisible({ timeout: 3000 }).catch(() => false)) {
+        // Dismiss tour before clicking to avoid driver-overlay blocking
+        await dismissOnboardingTour(page)
         await teamCard.click()
         await page.waitForTimeout(1000)
         console.log(`Selected team from direct card: ${TEST_TEAM_NAME}`)
@@ -390,46 +405,91 @@ test.describe('Chat Image Browser E2E with Mock Model Server', () => {
    */
   async function selectTestModel(page: Page): Promise<boolean> {
     try {
-      // Look for model selector button - it shows "Please select a model" or "请选择模型" when required
-      const modelSelectorButton = page
-        .locator(
-          'button:has-text("Please select a model"), button:has-text("请选择模型"), button[role="combobox"]:has(svg.lucide-brain)'
-        )
-        .first()
+      // Wait for page to fully load
+      await page.waitForTimeout(2000)
 
-      if (await modelSelectorButton.isVisible({ timeout: 3000 }).catch(() => false)) {
-        const buttonText = await modelSelectorButton.textContent()
+      // First try to find by data-testid (most reliable)
+      const modelSelectorByTestId = page.locator('[data-testid="model-selector"]').first()
+      if (await modelSelectorByTestId.isVisible({ timeout: 5000 }).catch(() => false)) {
+        const buttonText = await modelSelectorByTestId.textContent()
         console.log('Model selector button text:', buttonText)
 
-        // Check if model selection is required
-        if (buttonText?.includes('Please select') || buttonText?.includes('请选择模型')) {
+        // Check if model selection is required (shows "请选择模型" or "选择模型" or isModelRequired error state)
+        const needsSelection = buttonText?.includes('选择模型') ||
+                              buttonText?.includes('Please select') ||
+                              buttonText?.includes('Model') ||
+                              buttonText?.includes('required') ||
+                              buttonText?.includes('必须') ||
+                              await modelSelectorByTestId.locator('..').locator('..').locator('[class*="border-error"]').isVisible({ timeout: 1000 }).catch(() => false)
+
+        if (needsSelection) {
           console.log('Model selection required, clicking selector...')
           // Dismiss tour before clicking
           await dismissOnboardingTour(page)
-          await modelSelectorButton.click({ force: true })
-          await page.waitForTimeout(500)
+          await modelSelectorByTestId.click({ force: true })
+          // Wait longer for dropdown to fully load and render options
+          await page.waitForTimeout(2000)
 
           // Look for our test model in the dropdown
-          const modelOption = page.locator(`[role="option"]:has-text("${TEST_MODEL_NAME}")`).first()
-          if (await modelOption.isVisible({ timeout: 3000 }).catch(() => false)) {
+          const modelOption = page.locator(`[role="option"]:has-text("${TEST_MODEL_NAME}"), [data-testid*="model-option"]`).first()
+          if (await modelOption.isVisible({ timeout: 5000 }).catch(() => false)) {
             console.log('Found test model, selecting...')
             await modelOption.click()
-            await page.waitForTimeout(500)
+            await page.waitForTimeout(1000)
             return true
           }
 
-          // Try to select any available model
-          const anyModelOption = page.locator('[role="option"]').first()
-          if (await anyModelOption.isVisible({ timeout: 2000 }).catch(() => false)) {
+          // Try to select any available model (exclude the search input if present)
+          const anyModelOption = page.locator('[role="option"]').filter({ hasNot: page.locator('input') }).first()
+          if (await anyModelOption.isVisible({ timeout: 5000 }).catch(() => false)) {
             console.log('Selecting first available model...')
             await anyModelOption.click()
-            await page.waitForTimeout(500)
+            await page.waitForTimeout(1000)
             return true
           }
 
           console.warn('No model options available in dropdown')
           // Press Escape to close dropdown
           await page.keyboard.press('Escape')
+          await page.waitForTimeout(500)
+          return false
+        }
+
+        // Model already selected
+        console.log('Model already selected:', buttonText)
+        return true
+      }
+
+      // Fallback: Look for model selector by text
+      const modelSelectorButton = page
+        .locator(
+          'button:has-text("选择模型"), button:has-text("Please select"), button[role="combobox"]:has(svg.lucide-brain)'
+        )
+        .first()
+
+      if (await modelSelectorButton.isVisible({ timeout: 5000 }).catch(() => false)) {
+        const buttonText = await modelSelectorButton.textContent()
+        console.log('Model selector button text (fallback):', buttonText)
+
+        // Check if model selection is required
+        if (buttonText?.includes('选择模型') || buttonText?.includes('Please select')) {
+          console.log('Model selection required (fallback), clicking selector...')
+          await dismissOnboardingTour(page)
+          await modelSelectorButton.click({ force: true })
+          await page.waitForTimeout(1000)
+
+          // Look for any model option
+          const anyModelOption = page.locator('[role="option"]').first()
+          if (await anyModelOption.isVisible({ timeout: 3000 }).catch(() => false)) {
+            console.log('Selecting first available model...')
+            await anyModelOption.click()
+            await page.waitForTimeout(1000)
+            return true
+          }
+
+          console.warn('No model options available in dropdown')
+          await page.keyboard.press('Escape')
+          await page.waitForTimeout(500)
           return false
         }
       }
diff --git a/frontend/e2e/tests/visual/settings-visual.spec.ts b/frontend/e2e/tests/visual/settings-visual.spec.ts
index 48d8000d6..55861d34e 100644
--- a/frontend/e2e/tests/visual/settings-visual.spec.ts
+++ b/frontend/e2e/tests/visual/settings-visual.spec.ts
@@ -83,7 +83,10 @@ test.describe('Visual Regression - Settings Page', () => {
   test('settings models tab should match baseline @visual', async ({ page }) => {
     await page.goto('/settings?tab=models')
     await page.waitForLoadState('domcontentloaded')
-    await page.waitForTimeout(1000)
+    // Wait for the model management title to be visible
+    await expect(
+      page.locator('h2:has-text("Model Management"), h2:has-text("模型管理")').first()
+    ).toBeVisible({ timeout: 20000 })
 
     // Visual regression tests are optional - pass if baseline doesn't exist
     const result = await expect(page)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d53a2db29..07e5e1146 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1258,7 +1258,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1275,7 +1274,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1292,7 +1290,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1309,7 +1306,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1326,7 +1322,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1343,7 +1338,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1360,7 +1354,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1377,7 +1370,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1394,7 +1386,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1411,7 +1402,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1428,7 +1418,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1445,7 +1434,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1462,7 +1450,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1479,7 +1466,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1496,7 +1482,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1513,7 +1498,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1530,7 +1514,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1547,7 +1530,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1564,7 +1546,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1581,7 +1562,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1598,7 +1578,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1615,7 +1594,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1632,7 +1610,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1649,7 +1626,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1666,7 +1642,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1683,7 +1658,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -16308,7 +16282,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
diff --git a/frontend/src/components/ui/action-button.tsx b/frontend/src/components/ui/action-button.tsx
index 311bb344a..4f999e376 100644
--- a/frontend/src/components/ui/action-button.tsx
+++ b/frontend/src/components/ui/action-button.tsx
@@ -17,6 +17,7 @@ interface ActionButtonProps {
   variant?: 'default' | 'outline' | 'loading'
   className?: string
   asChild?: boolean
+  'data-testid'?: string
 }
 
 /**
@@ -71,6 +72,7 @@ export function ActionButton({
   label,
   variant = 'default',
   className = '',
+  'data-testid': dataTestId,
 }: ActionButtonProps) {
   // Determine if this is an icon-only button or has a label
   const hasLabel = Boolean(label)
@@ -87,6 +89,7 @@ export function ActionButton({
     // Static loading state (non-clickable)
     return (
       <div
+        data-testid={dataTestId}
         className={`relative ${baseStyles} flex items-center justify-center border border-border bg-base ${className}`}
       >
         {icon}
@@ -102,6 +105,7 @@ export function ActionButton({
 
   return (
     <Button
+      data-testid={dataTestId}
       variant={buttonVariant}
       size={hasLabel ? 'default' : 'icon'}
       onClick={onClick}
diff --git a/frontend/src/features/settings/components/ModelEditDialog.tsx b/frontend/src/features/settings/components/ModelEditDialog.tsx
index 86fdb97ce..056818fa7 100644
--- a/frontend/src/features/settings/components/ModelEditDialog.tsx
+++ b/frontend/src/features/settings/components/ModelEditDialog.tsx
@@ -1138,6 +1138,7 @@ const ModelEditDialog: React.FC<ModelEditDialogProps> = ({
               </Label>
               <Input
                 id="modelIdName"
+                data-testid="model-id-name-input"
                 value={modelIdName}
                 onChange={e => handleModelIdNameChange(e.target.value)}
                 placeholder="my-gpt-model"
diff --git a/frontend/src/features/tasks/components/chat/QuickAccessCards.tsx b/frontend/src/features/tasks/components/chat/QuickAccessCards.tsx
index 2aacc3786..9e8911f32 100644
--- a/frontend/src/features/tasks/components/chat/QuickAccessCards.tsx
+++ b/frontend/src/features/tasks/components/chat/QuickAccessCards.tsx
@@ -219,6 +219,7 @@ export function QuickAccessCards({
     return (
       <div
         onClick={() => !isClicked && handleTeamClick(team)}
+        data-testid={`quick-access-team-${team.name}`}
         className={`
           group relative flex flex-col justify-center
           cursor-pointer transition-all duration-200
@@ -427,7 +428,7 @@ export function QuickAccessCards({
         }
       `}</style>
 
-      <div className="w-full max-w-[820px] mx-auto flex flex-wrap items-center justify-center gap-3 mt-6" data-tour="quick-access-cards">
+      <div className="w-full max-w-[820px] mx-auto flex flex-wrap items-center justify-center gap-3 mt-6" data-tour="quick-access-cards" data-testid="quick-access-cards">
         {teamCardsToShow.map(team => (
           <div key={team.id}>{renderTeamCard(team)}</div>
         ))}
diff --git a/frontend/src/features/tasks/components/clarification/ClarificationForm.tsx b/frontend/src/features/tasks/components/clarification/ClarificationForm.tsx
index d62255e10..deb9260b9 100644
--- a/frontend/src/features/tasks/components/clarification/ClarificationForm.tsx
+++ b/frontend/src/features/tasks/components/clarification/ClarificationForm.tsx
@@ -267,7 +267,7 @@ export default function ClarificationForm({
   }
 
   return (
-    <div className="space-y-4 p-4 rounded-lg border border-primary/30 bg-primary/5">
+    <div className="space-y-4 p-4 rounded-lg border border-primary/30 bg-primary/5" data-testid="clarification-form">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
           <span className="text-lg">💬</span>
@@ -330,7 +330,7 @@ export default function ClarificationForm({
             })}
 
             {/* Fixed additional input box */}
-            <div className="p-3 rounded bg-surface/50 border border-border">
+            <div className="p-3 rounded bg-surface/50 border border-border" data-testid="clarification-additional-input">
               <div className="space-y-3">
                 <div className="text-sm font-medium text-text-primary">
                   {t('chat:clarification.additional_thoughts') || '其他想法或补充说明'}
@@ -352,7 +352,7 @@ export default function ClarificationForm({
 
           {!isSubmitted && !(isTaskStreaming && isTaskStreaming(taskId)) && (
             <div className="flex justify-end pt-2">
-              <Button variant="secondary" onClick={handleSubmit} size="lg">
+              <Button variant="secondary" onClick={handleSubmit} size="lg" data-testid="clarification-submit">
                 <Send className="w-4 h-4 mr-2" />
                 {t('chat:clarification.submit_answers') || 'Submit Answers'}
               </Button>
diff --git a/frontend/src/features/tasks/components/clarification/ClarificationQuestion.tsx b/frontend/src/features/tasks/components/clarification/ClarificationQuestion.tsx
index 4bf4013a5..e364a0572 100644
--- a/frontend/src/features/tasks/components/clarification/ClarificationQuestion.tsx
+++ b/frontend/src/features/tasks/components/clarification/ClarificationQuestion.tsx
@@ -68,6 +68,7 @@ export default function ClarificationQuestion({
           onValueChange={value => onChange({ answer_type: 'choice', value })}
           disabled={readonly}
           className="flex flex-col gap-2"
+          data-testid={`clarification-question-${question.question_id}-radio`}
         >
           {question.options?.map((option, index) => (
             <div key={option.value} className="flex items-center space-x-2">
@@ -75,6 +76,7 @@ export default function ClarificationQuestion({
                 value={option.value}
                 id={`question-${question.question_text}-option-${index}`}
                 disabled={readonly}
+                data-testid={`clarification-option-${index}`}
               />
               <label
                 htmlFor={`question-${question.question_text}-option-${index}`}
@@ -105,7 +107,7 @@ export default function ClarificationQuestion({
       }
 
       return (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2" data-testid={`clarification-question-${question.question_id}-checkbox`}>
           {question.options?.map((option, index) => (
             <div key={option.value} className="flex items-center space-x-2">
               <Checkbox
@@ -113,6 +115,7 @@ export default function ClarificationQuestion({
                 checked={selectedValues.includes(option.value)}
                 onCheckedChange={checked => handleCheckboxChange(option.value, checked as boolean)}
                 disabled={readonly}
+                data-testid={`clarification-option-${index}`}
               />
               <label
                 htmlFor={`question-${question.question_text}-option-${index}`}
@@ -145,6 +148,7 @@ export default function ClarificationQuestion({
         disabled={readonly}
         rows={3}
         className="w-full"
+        data-testid="clarification-custom-textarea"
       />
     )
   }
diff --git a/frontend/src/features/tasks/components/clarification/ClarificationToggle.tsx b/frontend/src/features/tasks/components/clarification/ClarificationToggle.tsx
index 35fa0f0b6..52b1522ba 100644
--- a/frontend/src/features/tasks/components/clarification/ClarificationToggle.tsx
+++ b/frontend/src/features/tasks/components/clarification/ClarificationToggle.tsx
@@ -44,6 +44,7 @@ export default function ClarificationToggle({
               disabled={disabled}
               icon={<MessageCircleQuestion className="h-4 w-4" />}
               label={t('chat:clarification_toggle.label')}
+              data-testid="clarification-toggle"
               className={cn(
                 'transition-colors',
                 enabled
diff --git a/frontend/src/features/tasks/components/input/ChatInputControls.tsx b/frontend/src/features/tasks/components/input/ChatInputControls.tsx
index 94225a3f5..99f54cb71 100644
--- a/frontend/src/features/tasks/components/input/ChatInputControls.tsx
+++ b/frontend/src/features/tasks/components/input/ChatInputControls.tsx
@@ -384,6 +384,7 @@ export function ChatInputControls({
       <div
         className="flex-1 min-w-0 overflow-visible flex items-center gap-0 flex-wrap"
         data-tour="input-controls"
+        data-testid="input-controls"
       >
         {/* Generate Mode Selector - show when in video or image mode */}
         {isGenerateMode(taskType) && onGenerateModeChange && (
diff --git a/frontend/src/features/tasks/components/message/MessageBubble.tsx b/frontend/src/features/tasks/components/message/MessageBubble.tsx
index 4d326be34..3a88b9a87 100644
--- a/frontend/src/features/tasks/components/message/MessageBubble.tsx
+++ b/frontend/src/features/tasks/components/message/MessageBubble.tsx
@@ -409,7 +409,7 @@ const MessageBubble = memo(
         <path d="m9 11 3 3L22 4"></path>
       </svg>
     ) : (
-      <Bot className="w-4 h-4" />
+      <Bot className="w-4 h-4" data-testid="ai-message-icon" />
     )
     const headerLabel = isUserTypeMessage ? '' : msg.botName || t('messages.bot') || 'Bot'
 
diff --git a/frontend/src/features/tasks/components/message/MessagesArea.tsx b/frontend/src/features/tasks/components/message/MessagesArea.tsx
index fb9ec2594..46c9e5971 100644
--- a/frontend/src/features/tasks/components/message/MessagesArea.tsx
+++ b/frontend/src/features/tasks/components/message/MessagesArea.tsx
@@ -1104,7 +1104,7 @@ function MessagesArea({
         streamingSubtaskIds.length > 0 ||
         selectedTaskDetail?.id ||
         hasMessagesFromParent) && (
-        <div className="flex-1 space-y-8 messages-container">
+        <div className="flex-1 space-y-8 messages-container" data-testid="messages-container">
           {messages.map((msg, index) => {
             const messageKey = msg.subtaskId
               ? `${msg.type}-${msg.subtaskId}`
diff --git a/stop_port.sh b/stop_port.sh
new file mode 100644
index 000000000..f16013f5b
--- /dev/null
+++ b/stop_port.sh
@@ -0,0 +1,57 @@
+#!/bin/bash
+
+# 定义需要释放的端口列表
+PORTS=(8000 8100 8001)
+
+# 脚本标题
+echo "====================================="
+echo "  端口占用进程清理脚本"
+echo "====================================="
+echo
+
+# 第一步：显示每个端口的占用情况
+for port in "${PORTS[@]}"; do
+    echo "🔍 正在查询端口 $port 的占用情况："
+    lsof -i ":$port"
+    if [ $? -ne 0 ]; then
+        echo "   端口 $port 未被占用"
+    fi
+    echo "-------------------------------------"
+done
+
+# 第二步：确认是否执行终止操作
+read -p "❓ 是否要终止以上占用 8000/8100/8001 端口的进程？(y/n) " -n 1 -r
+echo
+if [[ ! $REPLY =~ ^[Yy]$ ]]; then
+    echo "🚫 操作已取消"
+    exit 0
+fi
+
+# 第三步：终止占用端口的进程
+echo
+echo "🗑️  开始终止占用进程..."
+for port in "${PORTS[@]}"; do
+    # 查找端口对应的 PID 并强制终止
+    PIDS=$(lsof -ti ":$port")
+    if [ -n "$PIDS" ]; then
+        echo "   终止端口 $port 的进程(PID: $PIDS)..."
+        kill -9 $PIDS
+        echo "   ✅ 端口 $port 进程已终止"
+    else
+        echo "   ℹ️  端口 $port 无占用进程，无需终止"
+    fi
+done
+
+# 第四步：验证结果
+echo
+echo "✅ 验证端口释放情况："
+for port in "${PORTS[@]}"; do
+    if lsof -i ":$port" > /dev/null; then
+        echo "   ❌ 端口 $port 仍被占用"
+    else
+        echo "   ✅ 端口 $port 已成功释放"
+    fi
+done
+
+echo
+echo "🎉 脚本执行完成！"
diff --git a/tests/specs/chat-flow.spec.ts b/tests/specs/chat-flow.spec.ts
index b38ce93fb..8cbadbfc0 100644
--- a/tests/specs/chat-flow.spec.ts
+++ b/tests/specs/chat-flow.spec.ts
@@ -36,34 +36,56 @@ async function setupChatPage(page: any) {
   await page.waitForTimeout(500)
 
   // Select "wegent-chat" agent from QuickAccessCards if available
-  const quickAccessCards = page.locator('[data-tour="quick-access-cards"]')
+  const quickAccessCards = page.locator('[data-testid="quick-access-cards"]')
   if (await quickAccessCards.isVisible({ timeout: 3000 }).catch(() => false)) {
-    // Get all available cards first
-    const allCards = quickAccessCards.locator('div.rounded-full.border')
-    const cardCount = await allCards.count()
-
-    if (cardCount > 0) {
-      // Try to find wegent-chat card among all cards
-      let wegentChatIndex = -1
-      for (let i = 0; i < cardCount; i++) {
-        const cardText = await allCards.nth(i).textContent().catch(() => '')
-        if (cardText?.includes('wegent-chat')) {
-          wegentChatIndex = i
-          break
-        }
+    // Try to find wegent-chat card by data-testid
+    const wegentChatCard = page.locator('[data-testid="quick-access-team-wegent-chat"]').first()
+    if (await wegentChatCard.isVisible({ timeout: 3000 }).catch(() => false)) {
+      await wegentChatCard.click()
+    } else {
+      // Fallback: click the first team card
+      const firstCard = quickAccessCards.locator('[data-testid^="quick-access-team-"]').first()
+      if (await firstCard.isVisible({ timeout: 3000 }).catch(() => false)) {
+        await firstCard.click()
       }
+    }
+    await page.waitForTimeout(1000)
+  }
+
+  // Select model 公网:GLM-5
+  console.log('Selecting model...')
+  const modelSelector = page.locator('[data-testid="model-selector"]').first()
+  await expect(modelSelector).toBeVisible({ timeout: 10000 })
+
+  // Click to open model selector
+  await modelSelector.click()
+  await page.waitForTimeout(500)
+
+  // Search for model
+  const modelSearchInput = page.locator('input[placeholder*="搜索"], input[placeholder*="Search"]').first()
+  if (await modelSearchInput.isVisible({ timeout: 3000 }).catch(() => false)) {
+    await modelSearchInput.fill('GLM-5')
+    await page.waitForTimeout(500)
+  }
 
-      // Click wegent-chat if found, otherwise click the first card
-      const cardToClick = wegentChatIndex >= 0 ? allCards.nth(wegentChatIndex) : allCards.first()
-      await cardToClick.click()
-      await page.waitForTimeout(1000)
+  // Select 公网:GLM-5 model
+  const modelOption = page.locator('[data-testid="model-option-公网-GLM-5"]').first()
+  if (await modelOption.isVisible({ timeout: 3000 }).catch(() => false)) {
+    await modelOption.click()
+  } else {
+    // Try to find by text content
+    const modelOptions = page.locator('[data-testid^="model-option-"]').filter({ hasText: /GLM-5/i })
+    if (await modelOptions.count() > 0) {
+      await modelOptions.first().click()
     }
   }
+  await page.waitForTimeout(500)
 
   // Wait for input to be enabled
   const chatInput = page.locator('[data-testid="message-input"]').first()
   await expect(chatInput).toHaveAttribute('contenteditable', 'true', { timeout: 10000 })
 
+  console.log('Chat page setup completed')
   return chatInput
 }
 
@@ -76,21 +98,18 @@ test.describe('Chat Flow', () => {
     await chatInput.fill(testMessage)
 
     // Find and click send button
-    // Send button typically has an icon or text, look for common patterns
-    const sendButton = page.locator(
-      'button[type="submit"], button:has(svg[class*="send" i]), [data-testid="send-button"]'
-    ).first()
-
+    const sendButton = page.locator('[data-testid="send-button"]').first()
+    await expect(sendButton).toBeEnabled({ timeout: 5000 })
     await sendButton.click()
 
     // Wait for AI response
-    // AI messages appear in .messages-container
-    const messagesContainer = page.locator('.messages-container').first()
+    // AI messages appear in messages-container
+    const messagesContainer = page.locator('[data-testid="messages-container"]').first()
     await expect(messagesContainer).toBeVisible({ timeout: 30000 })
 
     // Wait for AI message to appear (may take time for API response)
     const aiMessage = messagesContainer.locator('> div').filter({
-      has: page.locator('svg.lucide-bot'),
+      has: page.locator('[data-testid="ai-message-icon"]'),
     }).last()
     await expect(aiMessage).toBeVisible({ timeout: 90000 })
 
@@ -110,7 +129,7 @@ test.describe('Chat Flow', () => {
 
     // 3. Verify last message is AI message (has Bot icon)
     const lastMessage = allMessages[allMessages.length - 1]
-    const hasBotIcon = await lastMessage.locator('svg.lucide-bot').isVisible()
+    const hasBotIcon = await lastMessage.locator('[data-testid="ai-message-icon"]').isVisible()
     expect(hasBotIcon).toBe(true)
 
     // 4. Verify AI message has meaningful content
@@ -131,57 +150,26 @@ test.describe('Chat Flow', () => {
     const chatInput = await setupChatPage(page)
 
     // Step 1: Wait for controls to be fully loaded
-    await page.waitForSelector('[data-tour="input-controls"]', { state: 'visible', timeout: 10000 })
+    await page.waitForSelector('[data-testid="input-controls"]', { state: 'visible', timeout: 10000 })
     await page.waitForTimeout(1000)
 
-    // Wait for clarification toggle to appear (only for Chat Shell type teams)
-    // The toggle is a button with MessageCircleQuestion icon inside ActionButton
-    // Try to find it by looking for buttons with specific characteristics
-    await page.waitForTimeout(2000)  // Wait for all controls to render
-
-    // Strategy: Find all buttons in input-controls, then find the one that likely is clarification toggle
-    // Clarification toggle is typically the 4th button (index 3) for Chat Shell teams
-    // Buttons order: Knowledge Base, ?, Skills, ?, ?, Model, Send
-    const allButtons = page.locator('[data-tour="input-controls"] button')
-    const buttonCount = await allButtons.count()
-    console.log(`Found ${buttonCount} buttons in input-controls`)
-
-    // Try to identify the clarification toggle by position or content
-    // For Chat Shell: buttons are [KB, Clarification, Skills, ...]
-    let clarificationToggle = null
-
-    // Try each button and check if clicking it toggles the mode
-    for (let i = 0; i < Math.min(buttonCount, 6); i++) {
-      const btn = allButtons.nth(i)
-      const html = await btn.innerHTML().catch(() => '')
-
-      // Check if this button contains MessageCircleQuestion icon (circle + question mark pattern)
-      // The icon is typically an SVG with circle and question mark paths
-      if (html.includes('circle') && html.includes('?')) {
-        clarificationToggle = btn
-        console.log(`Found potential clarification toggle at index ${i}`)
-        break
-      }
-    }
-
-    // Fallback: try the 4th button (index 3) which is typically clarification toggle
-    if (!clarificationToggle && buttonCount >= 4) {
-      clarificationToggle = allButtons.nth(3)
-      console.log('Using fallback: button at index 3')
-    }
+    // Find clarification toggle by data-testid
+    let clarificationToggle = page.locator('[data-testid="clarification-toggle"]').first()
+    const isClarificationVisible = await clarificationToggle.isVisible({ timeout: 3000 }).catch(() => false)
 
-    if (!clarificationToggle) {
+    if (!isClarificationVisible) {
       console.log('⚠️ Clarification toggle not found - team may not be Chat Shell type, skipping test')
       test.skip()
       return
     }
+    console.log('✓ Found clarification toggle')
 
     await clarificationToggle.click()
     await page.waitForTimeout(500)
 
     // Verify the button is now in enabled state (has primary/border-primary class)
     const buttonClass = await clarificationToggle.getAttribute('class')
-    const isEnabled = buttonClass?.includes('border-primary') || buttonClass?.includes('bg-primary')
+    const isEnabled = buttonClass?.includes('primary')
     if (!isEnabled) {
       console.log('⚠️ Clarification mode not enabled (button style unchanged) - may not be supported, skipping test')
       test.skip()
@@ -194,13 +182,12 @@ test.describe('Chat Flow', () => {
     await chatInput.fill(vagueMessage)
 
     // Step 3: Send the message
-    const sendButton = page.locator(
-      'button[type="submit"], button:has(svg[class*="send" i]), [data-testid="send-button"]'
-    ).first()
+    const sendButton = page.locator('[data-testid="send-button"]').first()
+    await expect(sendButton).toBeEnabled({ timeout: 5000 })
     await sendButton.click()
 
     // Step 4: Wait for AI response container
-    const messagesContainer = page.locator('.messages-container').first()
+    const messagesContainer = page.locator('[data-testid="messages-container"]').first()
     await expect(messagesContainer).toBeVisible({ timeout: 30000 })
 
     console.log('⏳ Waiting for AI to generate clarification questions (this may take 15-60 seconds)...')
@@ -208,9 +195,7 @@ test.describe('Chat Flow', () => {
     // Step 5: Wait for clarification form to appear
     // Note: AI takes time to analyze and generate clarification questions
     // Wait up to 120 seconds for the form to appear
-    // Use a more robust selector - match by partial class name and text content
-    // border-primary/30 is a Tailwind class, we match the border-primary part
-    const clarificationForm = page.locator('[class*="border-primary"]:has-text("Spec Clarification"), [class*="border-primary"]:has-text("需求澄清"), [class*="bg-primary"]:has-text("Spec Clarification"), [class*="bg-primary"]:has-text("需求澄清")').first()
+    const clarificationForm = page.locator('[data-testid="clarification-form"]').first()
 
     // Poll for the form with longer timeout
     let hasClarificationForm = false
@@ -225,7 +210,7 @@ test.describe('Chat Flow', () => {
       }
       // Also check if AI already provided a direct response (streaming stopped)
       const lastAiMessage = messagesContainer.locator('> div').filter({
-        has: page.locator('svg.lucide-bot'),
+        has: page.locator('[data-testid="ai-message-icon"]'),
       }).last()
       const hasAiResponse = await lastAiMessage.isVisible({ timeout: 1000 }).catch(() => false)
       if (hasAiResponse) {
@@ -244,7 +229,7 @@ test.describe('Chat Flow', () => {
       console.log('ℹ️ No clarification questions generated - AI provided direct response')
 
       const aiMessage = messagesContainer.locator('> div').filter({
-        has: page.locator('svg.lucide-bot'),
+        has: page.locator('[data-testid="ai-message-icon"]'),
       }).last()
       await expect(aiMessage).toBeVisible({ timeout: 90000 })
 
@@ -270,7 +255,7 @@ test.describe('Chat Flow', () => {
     await page.waitForTimeout(3000)
 
     // Step 6: Verify there are questions in the form
-    const questions = clarificationForm.locator('.border-border, .border-red-500')
+    const questions = clarificationForm.locator('[data-testid^="clarification-question-"]')
     const questionCount = await questions.count()
     expect(questionCount).toBeGreaterThanOrEqual(1)
     console.log(`✓ Found ${questionCount} clarification questions`)
@@ -287,24 +272,19 @@ test.describe('Chat Flow', () => {
 
     // Step 7: Answer questions - try to select options or fill text inputs
     // For single choice questions (radio buttons)
-    const radioOptions = clarificationForm.locator('input[type="radio"]').all()
+    const radioOptions = clarificationForm.locator('[data-testid$="-radio"] [data-testid^="clarification-option-"]').all()
     const radioButtons = await radioOptions
     if (radioButtons.length > 0) {
       // Click the first option of each radio group
-      const radioGroups = new Set<string>()
-      for (const radio of radioButtons) {
-        const name = await radio.getAttribute('name')
-        if (name && !radioGroups.has(name)) {
-          radioGroups.add(name)
-          await radio.click()
-          await page.waitForTimeout(200)
-        }
+      for (const radio of radioButtons.slice(0, 1)) {
+        await radio.click()
+        await page.waitForTimeout(200)
       }
-      console.log(`✓ Answered ${radioGroups.size} single choice questions`)
+      console.log(`✓ Answered single choice questions`)
     }
 
     // For multiple choice questions (checkboxes)
-    const checkboxes = clarificationForm.locator('input[type="checkbox"]').all()
+    const checkboxes = clarificationForm.locator('[data-testid$="-checkbox"] [data-testid^="clarification-option-"]').all()
     const checkboxInputs = await checkboxes
     if (checkboxInputs.length > 0) {
       // Select recommended options (or first few)
@@ -315,16 +295,15 @@ test.describe('Chat Flow', () => {
       console.log(`✓ Selected ${Math.min(checkboxInputs.length, 2)} checkbox options`)
     }
 
-    // For text input questions
-    const textInputs = clarificationForm.locator('textarea').all()
+    // For text input questions (custom textarea)
+    const textInputs = clarificationForm.locator('[data-testid="clarification-custom-textarea"]').all()
     const textareas = await textInputs
     if (textareas.length > 0) {
-      // The last textarea is usually the "additional thoughts" field
-      for (const textarea of textareas.slice(0, -1)) {
+      for (const textarea of textareas) {
         await textarea.fill('这是一个测试回答')
         await page.waitForTimeout(200)
       }
-      console.log(`✓ Filled ${Math.max(0, textareas.length - 1)} text inputs`)
+      console.log(`✓ Filled ${textareas.length} text inputs`)
     }
 
     // Pause before submitting to let user review answers
@@ -332,7 +311,7 @@ test.describe('Chat Flow', () => {
     await page.waitForTimeout(5000)
 
     // Step 8: Submit the clarification answers
-    const submitButton = clarificationForm.locator('button:has-text("Submit"), button:has-text("提交"), button:has(svg.lucide-send)').first()
+    const submitButton = clarificationForm.locator('[data-testid="clarification-submit"]').first()
     await expect(submitButton).toBeVisible({ timeout: 5000 })
     await submitButton.click()
     console.log('✓ Submitted clarification answers')
@@ -340,7 +319,7 @@ test.describe('Chat Flow', () => {
     // Step 9: Wait for AI's final response after clarification
     console.log('⏳ Waiting for AI to generate final response...')
     const aiMessage = messagesContainer.locator('> div').filter({
-      has: page.locator('svg.lucide-bot'),
+      has: page.locator('[data-testid="ai-message-icon"]'),
     }).last()
 
     // Wait longer for streaming to complete