# [WIP] 研究 AI 與 測試用例

## 摘要 (Abstract)

探討
- **不同 AI 測試用例生成工具在相同測試需求下的表現差異**。
- **精煉後的提示詞 (Prompt Engineering) 後，不同 AI 的表現差異**。

本文的發現可為測試工程師和開發者提供參考，
幫助選擇最適合其專案需求的 AI 測試工具，並推動 AI 測試技術的進一步優化與發展。

## 關鍵詞 (Keywords)

Automated Test Generation, Large Language Models,
LLMs, Genetic Improvement

## 樣本選擇


樣本來源取用 **前端 Tab 元件**，
該元件在網站中十分常見且功能具體，
且不涉及具體業務內容與邏輯，容易去敏。

### 樣本產生流程
1. 螢幕截圖 (screen shot)，擷取畫面上目標元件的截圖。
2. 撰寫該元件的功能描述。

## 實驗與結果 (Tests and Results)

### 測試輸入 (未精煉的提示詞)

請針對以下規格撰寫一份測試用例

功能描述：
Sell High / Buy Low Tab 點擊切換
進入頁面默認選擇 Sell High

#### Result [ChatGPT](https://chatgpt.com/)

這是根據你的功能描述撰寫的測試用例，涵蓋了 Sell High / Buy Low Tab 的切換與默認選擇行為。  

### **測試用例：Sell High / Buy Low Tab 切換功能**  

#### **測試目標**  
- 確保 Sell High / Buy Low Tab 可以正確切換  
- 驗證進入頁面時 Sell High 預設為選中  

#### **前置條件**  
1. 用戶已成功登入應用程式或網站  
2. 用戶已進入包含 Sell High / Buy Low Tab 的頁面  

#### **測試案例**  

##### **測試案例 1：進入頁面默認選擇 Sell High**  
**測試步驟：**  
1. 開啟瀏覽器並進入測試頁面  
2. 確認頁面完全加載  

**預期結果：**  
- Sell High Tab 預設為選中狀態，文字顯示為高亮  
- Buy Low Tab 顯示為非選中狀態，文字為灰色  
- Sell High 內容顯示，Buy Low 內容不可見  
- 底部黃色指示條顯示於 Sell High 下方  

---  

##### **測試案例 2：點擊 Buy Low Tab 切換內容**  
**測試步驟：**  
1. 進入頁面後，確認 Sell High Tab 預設為選中狀態  
2. 點擊 Buy Low Tab  

**預期結果：**  
- Buy Low Tab 變為選中狀態，文字顯示為高亮  
- Sell High Tab 變為非選中狀態，文字顯示為灰色  
- Buy Low 內容顯示，Sell High 內容隱藏  
- 底部黃色指示條移動到 Buy Low 下方  

---  

##### **測試案例 3：點擊 Sell High Tab 切換回 Sell High**  
**測試步驟：**  
1. 進入頁面後，點擊 Buy Low Tab 切換至 Buy Low  
2. 點擊 Sell High Tab  

**預期結果：**  
- Sell High Tab 變為選中狀態，文字顯示為高亮  
- Buy Low Tab 變為非選中狀態，文字顯示為灰色  
- Sell High 內容顯示，Buy Low 內容隱藏  
- 底部黃色指示條移動到 Sell High 下方  

---  

#### **額外測試考量**  
- 測試 UI 反應速度是否符合預期（如 300ms 內切換）  
- 測試在不同瀏覽器（Chrome, Firefox, Edge, Safari）下的兼容性  
- 測試不同設備（PC, 平板, 手機）上的顯示與交互是否一致  
- 測試是否存在異常情況（如點擊無反應、內容顯示錯誤等）  

這份測試用例可以幫助確保 Tab 切換功能的正確性。如果有額外的需求或特殊情境需要測試，請讓我知道！

##### [WIP] 針對此測試用例的反饋

#### Result [Grok 3](https://x.com/i/grok)

以下是基於您提供的功能描述撰寫的測試用例，涵蓋了「Sell High / Buy Low Tab 點擊切換」功能及其預設行為。測試用例將確保功能正常運作，並涵蓋常見的邊界情況和錯誤處理。

---

### 測試用例：Sell High / Buy Low Tab 點擊切換功能

#### 測試目標
驗證「Sell High」和「Buy Low」標籤（Tab）之間的切換功能是否正常運作，並確認進入頁面時默認選擇「Sell High」標籤。

---

#### 測試環境
- 瀏覽器：Chrome、Firefox、Safari（最新版本）
- 設備：桌面、平板、行動裝置
- 解析度：1920x1080（桌面）、1280x800（平板）、375x667（行動）
- 作業系統：Windows 10、macOS 12、iOS 15、Android 12

---

#### 前置條件
1. 應用程式或網頁已成功加載。
2. 使用者有權訪問該頁面。
3. 網路連線正常。
4. 「Sell High」和「Buy Low」標籤位於頁面頂部，呈現為可點擊的 Tab。

---

#### 測試案例

| 測試案例 ID | 測試案例名稱                          | 前置步驟                                     | 測試步驟                                     | 預期結果                                           | 實際結果 | 測試結果（通過/失敗） | 備註                     |
|-------------|---------------------------------------|---------------------------------------------|---------------------------------------------|---------------------------------------------------|----------|---------------------|--------------------------|
| TC001       | 驗證進入頁面時默認選擇「Sell High」    | 1. 進入測試頁面                              | 1. 觀察頁面加載後的初始狀態                  | 「Sell High」標籤被選中（例如：黃色底線或高亮顯示） |          |                     |                          |
| TC002       | 點擊「Buy Low」切換標籤                | 1. 進入測試頁面                              | 1. 點擊「Buy Low」標籤                       | 1. 「Buy Low」標籤被選中（例如：黃色底線移至「Buy Low」）<br>2. 頁面內容更新為與「Buy Low」相關的資訊 |          |                     |                          |
| TC003       | 點擊「Sell High」切換回原標籤          | 1. 執行 TC002，確保目前選中「Buy Low」       | 1. 點擊「Sell High」標籤                     | 1. 「Sell High」標籤被選中（例如：黃色底線移回「Sell High」）<br>2. 頁面內容更新為與「Sell High」相關的資訊 |          |                     |                          |
| TC004       | 快速連續點擊「Sell High」和「Buy Low」  | 1. 進入測試頁面                              | 1. 在 2 秒內連續點擊「Sell High」和「Buy Low」各 3 次 | 1. 標籤切換正常，無閃爍或錯誤<br>2. 每次切換後對應的內容正確顯示 |          |                     | 測試 UI 穩定性           |
| TC005       | 標籤點擊無反應（邊界情況）             | 1. 進入測試頁面                              | 1. 禁用 JavaScript 或模擬網路延遲<br>2. 點擊「Sell High」或「Buy Low」 | 1. 顯示錯誤提示（如「請檢查網路連線」）或標籤無反應，但不影響其他功能 |          |                     | 測試錯誤處理             |
| TC006       | 測試響應式設計（不同設備）             | 1. 在桌面、平板、行動設備上進入測試頁面      | 1. 觀察標籤在不同設備上的顯示和點擊行為      | 1. 標籤在所有設備上正常顯示且可點擊<br>2. 切換功能一致 |          |                     | 確保跨平台兼容性         |

---

#### 測試數據
- 無需特定輸入數據，僅測試 UI 互動和標籤切換行為。

---

#### 測試工具
- 測試管理工具：TestRail、JIRA
- 瀏覽器開發者工具（檢查 CSS 和 JavaScript 行為）
- 模擬工具：BrowserStack、Device Toolbar（Chrome DevTools）

---

#### 測試結果記錄
- 測試執行日期：2025年2月22日
- 測試負責人：QA 團隊
- 測試結果：記錄每個測試案例的實際結果，與預期結果比較，標記通過或失敗。

---

#### 風險與注意事項
1. 確保標籤切換不會導致頁面崩潰或資料丟失。
2. 確認在低網路速度或斷網情況下，標籤仍能顯示（即使無法切換）。
3. 測試高流量場景下標籤切換的性能。

---

以上測試用例涵蓋了功能的基本驗證、邊界情況和跨平台兼容性。如果需要更詳細的測試（如性能測試或安全性測試），可以進一步擴展。請問您是否需要調整或補充某些部分？

##### [WIP] 針對此測試用例的反饋

#### Result [Gemini](https://gemini.google.com/)

好的，以下針對您提供的功能描述，撰寫一份測試用例：

**測試用例編號：** TC_SellBuy_001

**測試項目：** Sell High / Buy Low Tab 切換功能

**測試目的：** 驗證 Sell High / Buy Low Tab 切換功能是否正常運作，以及頁面預設顯示是否正確。

**測試環境：**

* 作業系統：Windows 10
* 瀏覽器：Chrome 最新版本
* 螢幕解析度：1920x1080

**前置條件：**

* 已進入包含 Sell High / Buy Low Tab 的頁面。

**測試步驟：**

1.  **驗證預設顯示：**
    * 檢查頁面載入後，是否預設顯示 Sell High Tab。
    * 檢查 Sell High Tab 是否有明顯的視覺標示（例如：顏色、底線）表示當前選中。

2.  **切換至 Buy Low Tab：**
    * 點擊 Buy Low Tab。
    * 檢查頁面是否成功切換至 Buy Low Tab。
    * 檢查 Buy Low Tab 是否有明顯的視覺標示表示當前選中。
    * 檢查 Sell High Tab 的視覺標示是否消失。

3.  **切換回 Sell High Tab：**
    * 點擊 Sell High Tab。
    * 檢查頁面是否成功切換回 Sell High Tab。
    * 檢查 Sell High Tab 是否有明顯的視覺標示表示當前選中。
    * 檢查 Buy Low Tab 的視覺標示是否消失。

**預期結果：**

1.  頁面載入後，預設顯示 Sell High Tab，並有明顯的視覺標示。
2.  點擊 Buy Low Tab 後，頁面成功切換至 Buy Low Tab，Buy Low Tab 有明顯的視覺標示，Sell High Tab 的視覺標示消失。
3.  點擊 Sell High Tab 後，頁面成功切換回 Sell High Tab，Sell High Tab 有明顯的視覺標示，Buy Low Tab 的視覺標示消失。

**測試結果：**

* （填寫：通過/失敗）

**備註：**

* 可以針對不同瀏覽器、不同螢幕解析度進行測試，以提高測試覆蓋率。
* 如果頁面切換時有其他內容變化（例如：表格數據、圖表），也應一併納入測試範圍。
* 可以考慮加入自動化測試，以提高測試效率。

##### [WIP] 針對此測試用例的反饋

#### Result [DeepSeek R1](https://chat.deepseek.com/)

## 測試用例：Sell High / Buy Low Tab 點擊切換

**功能描述：**
- 頁面包含兩個選項卡：Sell High 和 Buy Low。
- 用戶可以點擊選項卡進行切換。
- 進入頁面時，默認選擇 Sell High 選項卡。

**測試用例 1：默認選項卡**
- **步驟：**
  1. 打開頁面。
- **預期結果：**
  - Sell High 選項卡應為默認選中狀態。
  - Buy Low 選項卡應為未選中狀態。

**測試用例 2：切換到 Buy Low 選項卡**
- **步驟：**
  1. 打開頁面。
  2. 點擊 Buy Low 選項卡。
- **預期結果：**
  - Buy Low 選項卡應為選中狀態。
  - Sell High 選項卡應為未選中狀態。

**測試用例 3：切換回 Sell High 選項卡**
- **步驟：**
  1. 打開頁面。
  2. 點擊 Buy Low 選項卡。
  3. 點擊 Sell High 選項卡。
- **預期結果：**
  - Sell High 選項卡應為選中狀態。
  - Buy Low 選項卡應為未選中狀態。

**測試用例 4：多次切換選項卡**
- **步驟：**
  1. 打開頁面。
  2. 點擊 Buy Low 選項卡。
  3. 點擊 Sell High 選項卡。
  4. 重複步驟 2 和 3 多次。
- **預期結果：**
  - 每次點擊後，選中的選項卡應正確切換，且未選中的選項卡狀態應正確更新。

**測試用例 5：頁面刷新後默認選項卡**
- **步驟：**
  1. 打開頁面。
  2. 點擊 Buy Low 選項卡。
  3. 刷新頁面。
- **預期結果：**
  - 頁面刷新後，Sell High 選項卡應為默認選中狀態。

這些測試用例旨在確保選項卡切換功能的正確性和穩定性。

##### [WIP] 針對此測試用例的反饋

## 參考文獻 (References)

- [The Future of Software Testing: AI-Powered Test Case Generation and Validation](https://arxiv.org/abs/2409.05808)
- 1.3 Emergence of AI in testing
- 4.1 Machine Learning for Test Case Design
- 4.2 Natural Language Processing (NLP) in Test Case Generations