流程架構

Codex CLI 除了能根據使用者的提示詞(Prompt)產生及修改程式碼外，也能透過外部工具執行命令、讀取專案檔案，以及進行自動化測試。

透過整合 Playwright MCP，Codex Agent 可以操作瀏覽器，對開發完成的應用程式進行測試，並根據測試結果評估是否符合預期。

以下為整體運作流程圖。

                                                                                           
                           ┌────────────┐     ┌───────────┐     ┌──────────┐               
                           │ Playwright ├────►│  Browser  ├────►│ Test     │               
                           │    MCP     │     │  (Chrome) │     │ Result   │               
                           └────────────┘     └───────────┘     └─────┬────┘               
                                 ▲                                    │                    
                                 │                                    │                    
                             use │   ┌────────────────────────────────┘                    
                                 │   ▼                                                     
  ┌─────────────────┐      ┌─────┴─────┐                ┌─────────────────────┐            
  │  User Prompt    ├─────►│   Codex   ├───────────────►│ Test Evaluation and │            
  │  (Create App)   │      │   Agent   │                │ Report Generation   │            
  └─────────────────┘      └─────┬─────┘                └─────────────────────┘            
                                 │                                                         
                                 │ read                                                    
                                 ▼                                                         
                           ┌──────────────────────┐                                        
                           │  project directories │                                        
                           │  ┌──────────────┐    │                                        
                           │  │ checklist.md │    │                                        
                           │  └──────────────┘    │                                        
                           │  ┌──────────────┐    │                                        
                           │  │ openai.yaml  │ invocation policy                           
                           │  └──────────────┘    │                                        
                           │  ┌──────────────┐    │                                        
                           │  │ SKILL.md     │ skill instructions (loaded on invocation)   
                           │  └──────────────┘    │                                        
                           └──────────────────────┘

User Prompt: 使用者輸入的提示詞，例如建立應用程式或執行測試。
Codex Agent: 根據使用者提示詞進行規劃、程式開發、工具調用及測試結果分析。
Playwright MCP: 透過 MCP 提供瀏覽器自動化操作工具，供Codex Agent調用。
Browser: 實際執行應用程式及自動化測試的瀏覽器，例如Chrome。
Test Result: 瀏覽器操作及測試所產生的結果。
Test Evaluation > Report Generation: Codex Agent根據測試結果進行評估，並產生測試報告。
checklist.md: 需要驗證的工作項目清單，可作為Agent執行測試任務時的參考。
SKILL.md: 定義Skill的用途、操作步驟及相關指示，供Agent需要使用Skill時讀取。
openai.yaml: 設定介面中的顯示資訊及Skill調用政策(invocation policy)。

運作流程

使用者輸入在Codex CLI輸入提示詞(User Prompt)提出開發需求。
```
建立一個待辦清單網路應用程式。
```
Codex Agent 讀取專案設定檔(agents/openai.yaml)和SKILL.md的Frontmatter（前置資訊）說明，進行程式開發。
當任務需要特定 Skill 時，Agent 可讀取對應的 SKILL.md，取得操作指示。
Codex Agent 透過 Playwright MCP 操作瀏覽器，執行自動化測試。
Playwright MCP 將瀏覽器操作結果回傳給 Codex Agent。
Codex Agent 根據測試結果與預期需求進行評估，產生測試報告。

Skills 與 MCP 的角色

在這個架構中，Skills與MCP扮演不同的角色。

Skill主要提供Agent執行特定任務所需的操作指示與工作流程，讓Agent知道應該如何完成任務。

MCP則提供Agent與外部工具或服務整合的標準化介面，讓Agent能夠使用外部系統提供的功能。

以此範例而言，Skill 可以定義測試的執行流程及檢查項目(e.g. checklist.md)，而Playwright MCP則提供實際操作瀏覽器的能力。

兩者可以互相搭配，但並非相互依賴，Agent也可以直接使用 MCP 工具，而不一定需要透過 Skill。

總結

透過整合Codex Agent、Skills與Playwright MCP，可以將原本需要開分別執行的程式開發、瀏覽器測試及結果分析，整合到同一個Agent工作流程中。Codex Agent負責任務規劃、工具調用及結果評估；Skills提供任務執行指示；MCP則提供外部工具整合能力。

沒有留言:

張貼留言

菜鳥工程師肉豬

AdSense

網頁

2026/11/6

Codex CLI 整合 Playwright MCP 與 Skills 的自動化開發測試流程