# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Cognition (@cognition) · 平台：X (Twitter) · 日期：2026-06-25

> 原始來源：https://x.com/cognition/status/2069825407856390377

## 中文摘要

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

1. Install dependencies: `npm install`
2. Start the database: `docker-compose up -d postgres`
3. Run migrations: `npx prisma migrate dev`
4. Start the dev server: `npm run dev`
5. Wait for "Ready on http://localhost:3000"

## Verify

1. Read the git diff to identify which pages changed
2. Open each affected page in the browser
3. Check for: console errors, layout issues, broken links
4. Screenshot each page at desktop (1280px) and mobile (375px) widths

## Before Opening the PR

1. Run `npm run lint` and fix any issues
2. Run `npm test` and confirm all tests pass
3. Include screenshots in the PR description
```

**實際應用案例**

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1782356763425-qrhqv2hp.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/81f57cfbfcc6992a.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 影片展示了開發者使用 AI 輔助工具在「Lumen Desk」票務系統中新增「優先級（Priority）」篩選功能的完整開發與測試流程。

在「Lumen Desk」票務系統的開發場景中，Devin 透過此流程成功實作了「優先級」篩選功能。在測試階段，Devin 自動執行了 8 項測試案例，涵蓋了狀態篩選、搜尋、重置及標籤顯示等功能，並透過錄影展示了使用者在介面選擇「緊急」或「中」優先級後，頁面即時更新且 URL 參數正確變更的過程，確保了功能的穩健性。更多詳細資訊可參考 [Devin 官方文件](https://docs.devin.ai/work-with-devin/testing-and-recordings)。

## 媒體內容

**影片展示了開發者使用 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」按鈕。

## 標籤

功能更新, Agent, 自動化, Cognition