@cognition：Devin 推出自動化測試與錄影功能，讓使用者在合併 PR 前能透過端到端測試影片確認功能運作。 核心功能與流程 Cognition 團隊宣布 Devi…

Devin 推出自動化測試與錄影功能，讓使用者在合併 PR 前能透過端到端測試影片確認功能運作。 核心功能與流程 Cognition 團隊宣布 Devin 現已支援「測試模式」，該功能旨在解決開發者在審核程式碼時，難以即時驗證變更是否如預期運作的痛點。當 Devin 建立 PR 後，會主動提供測試選項，其自動化工作流程包含： 環境準備：自動安裝依賴、啟動服務並登入必要帳號。 測試規劃：根據程式碼變更內容，規劃出最關鍵的端到端測試路徑，並在執行前向使用者確認測試計畫。 執行與錄影：在桌面環境中執行測試，同時進行螢幕錄影。系統會自動進行「自動縮放（Auto-zoom）」與「標註（Annotations）」，將錄影重點聚焦於關鍵互動，並壓縮閒置時間。 結果回饋：將處理後的錄影檔直接作為訊息附件發送，讓使用者能快速檢視並決定是否合併 PR。 測試優化與實務建議 為了提升測試效率，Devin 整合了 skill 機制，讓使用者能透過 skill 定義測試步驟，並在測試完成後，Devin 會建議將成功的測試流程儲存為 skill 以供後續重複使用。官方建議在編寫 skill 時應保持具體，例如明確指出「點擊右上角的儲存按鈕」而非模糊的「測試儲存功能」。 若要手動建立測試 skill，可參考以下格式： `markdown --- name: test-before-pr description: Run the local dev server and verify pages before opening any PR that touches frontend code. --- Setup Install dependencies: npm install Start the database: docker-compose up -d postgres Run migrations: npx prisma migrate dev Start the dev server: npm run dev Wait for "Ready on http://localhost:3000" Verify Read the git diff to identify which pages changed Open each affected page in the browser Check for: console errors, layout issues, broken links Screenshot each page at desktop (1280px) and mobile (375px) widths Before Opening the PR Run npm run lint and fix any issues Run npm test and confirm all tests pass Include screenshots in the PR description ` 實際應用案例 影片展示了開發者使用 AI 輔助工具在「Lumen Desk」票務系統中新增「優先級（Priority）」篩選功能的完整開發與測試流程。 在「Lumen Desk」票務系統的開發場景中，Devin 透過此流程成功實作了「優先級」篩選功能。在測試階段，Devin 自動執行了 8 項測試案例，涵蓋了狀態篩選、搜尋、重置及標籤顯示等功能，並透過錄影展示了使用者在介面選擇「緊急」或「中」優先級後，頁面即時更新且 URL 參數正確變更的過程，確保了功能的穩健性。更多詳細資訊可參考 Devin 官方文件。影片展示了開發者使用 AI 輔助工具在「Lumen Desk」票務系統中新增「優先級（Priority）」篩選功能的完整開發與測試流程。 影片中的 Prompt 與操作：Prompt（00:00）： 請在票務頁面新增一個優先級篩選器。 功能需求： 1. 在 /tickets 頁面新增一個「依優先級篩選」下拉選單，放在現有的狀態篩選器旁邊。 2. 下拉選單應包含： - 「所有優先級」 - 低 - 中 - 高 - 緊急 3. 選擇優先級後應立即提交/更新頁面，如同狀態篩選器的運作方式。 4. 篩選器應使用 'priority' 查詢參數，例如 /tickets?priority=Urgent。原文：Please add a Priority filter to the Tickets page. Feature requirements: 1. Add a "Filter by priority" dropdown to /tickets, next to the existing status filter. 2. The dropdown should include: - "All priorities" - Low - Medium - High - Urgent 3. Selecting a priority should immediately submit/update the page, like the status filter does. 4. The filter should use a 'priority' query param, for example /tickets?priority=Urgent.操作步驟： 1. （00:00）於輸入框輸入需求並送出。 2. （00:12）點擊「Filter by priority」下拉選單。 3. （00:13）選擇「Urgent」選項。 4. （00:16）點擊「Filter by priority」下拉選單。 5. （00:17）選擇「Medium」選項。 6. （00:19）點擊「Reset」按鈕。 7. （00:26）點擊票務列表中的項目進入詳情頁。 8. （00:28）點擊「New ticket」按鈕。原文：https://easyvibecoding.app/curated/2192