Communitygithub.com

diliev1996/delyan-iliev-skills

在開啟或更新會影響 UI 的 PR 時使用,或在要求提供前後對比截圖或影片證據時使用。

delyan-iliev-skills 是什麼?

此技能為開發者與 AI 代理提供了一套自動化流程,用於在 Pull Request (PR) 中生成並發布 UI 變更的前後對比證據。它主要用於 GitHub 平台,透過 `gh` CLI 工具與 Playwright 來完成操作。技能的核心工作流程包含七個步驟:解析 PR 的合併基礎與頭部分支版本、建置兩個版本、編寫測試流程(定義互動與斷言)、使用 Playwright 捕獲截圖與影片、將產生的證據發布為 PR 評論、將該評論連結至 PR 主體,最後清理環境。此技能特別之處在於其「流程介面」(Flow interface),允許使用者以模組化的 JavaScript 檔案定義受測互動,包含設定、預熱、執行與斷言階段。它支援比對建置後的靜態目錄或正在運行的開發伺服器。此外,技能內建了錯誤處理機制,能辨識並提示常見的失敗原因(如安裝指令、導航或元素標示問題),並保留失敗時的除錯檔案(如 `failure.png`)。對於需要認證的應用,它提供了在隔離的瀏覽器環境中重現登入狀態的方法,但會誠實回報無法達成的驗證項目。整體而言,這個技能顯著簡化了為 UI 變更提供視覺證據的繁瑣過程,確保每次 PR 都能附帶清晰、可重現的對比素材。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/diliev1996/delyan-iliev-skills/tree/HEAD/skills/frontend-pr-evidence

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

前端 PR 證據

使用相同的測試環境、視口與互動,記錄 PR 的合併基礎版本與頭部分支版本,然後透過 gh 將兩段錄製內容作為一則 PR 評論發布。儲存庫的 PR 技能負責管理 PR 主體內容。$SCRATCH 代表對話暫存目錄。使用腳本的絕對路徑來執行它們。

步驟

  1. 解析修訂版本。 從 gh pr view PR_URL --json baseRefName,headRefOid 讀取 baseRefName 與 headRefOid。執行 git fetch origin BASE_BRANCH pull/PR_NUMBER/head,然後執行 git merge-base origin/BASE_BRANCH HEAD_SHA。當兩個 SHA 都在本地解析完成後,此步驟完成。
  2. 建置兩個修訂版本。 當每個修訂版本都有一個建置完成的輸出目錄或一個正在運行的開發伺服器,且其原始碼與其 SHA 相符時,此步驟完成。
  3. 編寫流程 於 $SCRATCH 下,從範例開始,並遵循下方的流程介面。
  4. 捕獲 使用 node scripts/capture.cjs FLOW "$SCRATCH/evidence"。當執行失敗時,錯誤訊息會指出需要修復的內容:安裝指令、從應用程式導航離開、或是標示問題。選擇器失敗也會在輸出資料夾中留下 failure.png 與 failure-aria.yml。修正流程並重新執行。此步驟完成條件為:
    • 指令以退出碼 0 結束;
    • 每個 manifest.network 中的條目都已說明(在模擬執行中,每個條目都是一個未被模擬的呼叫);
    • comparison.png 在兩個階段中都框選出變更範圍;
    • video-contact-sheet.png 顯示游標到達每個目標,並且最終狀態被保留。
  5. 發布 使用 node scripts/publish.cjs "$SCRATCH/evidence" PR_URL。它會確認證據與 PR 當前的頭部分支與合併基礎相符,發布包含比較圖與影片的 comment.md,並檢查 GitHub 是否已託管兩者。對同一捕獲結果重新執行此腳本會重複使用同一則評論。如果 gh auth status 顯示未登入,僅針對此步驟要求使用者處理。如果發布被持續阻擋,請保留工件並報告確切的錯誤訊息。當它印出評論 URL 時,此步驟完成。
  6. 連結 將 PR 主體中證據區段的評論 URL 連結起來。當 PR 主體連結了 publish.cjs 為當前頭部分支所印出的 URL,並取代任何先前的證據連結時,此步驟完成。
  7. 清理 你啟動的伺服器與工作目錄。確保工件、Cookie 及儲存狀態檔案不會被納入版本控制。

流程介面

一個流程模組需要匯出:

  • description:所測試的互動以及資料是模擬的還是真實的。這會成為評論文字。
  • phases:兩個 { label, revision, url | dir, run } 條目,分別為 Before 與 After。dir 是一個建置完成的輸出資料夾,由輔助函式提供服務,客戶端路由會回退到 index.html。url 指向一個正在運行的開發伺服器。
  • viewport(可選,預設為 1440×900)。
  • setup(page, phase)(可選):在每個階段的首次導航之前執行,頁面會重設路由、初始化腳本、Cookie 和儲存狀態。在此處註冊模擬、種子資料和授權裝置。路由比對採用最新優先,因此在特定模擬之前註冊一個全捕捉中止路由。
  • warmup(page, phase)(可選):在頁面載入後未記錄的情況下執行,例如當開發伺服器正在編譯時。
  • run(page, tools):執行互動並斷言每個階段的預期狀態,使用 tools.click(locator)、tools.point(locator) 和 tools.highlight(locator, label?)。每個階段至少需要一個標示,且當 run 返回時仍需可見。

輸出項目:before.png、after.png、comparison.png、comparison.webm、video-contact-sheet.png(影片的時間戳幀)、manifest.json 和 comment.md。

已認證的應用程式。 輔助函式的 Chromium 在啟動時沒有登入資訊:其他地方的瀏覽器工作階段與 gh 認證不會影響它。請在 setup 中重現已登入狀態;範例展示了兩種方法。如果需要即時認證證據,但捕獲環境無法達成,請報告此限制以及實際執行的檢查。

在變更腳本或升級 Playwright 後,請執行 node scripts/capture.test.cjs。設定 CAPTURE_TEST_OUTPUT=DIR 來保留其工件,以及 PLAYWRIGHT_MODULE=PATH 來測試另一個 Playwright 安裝。

相關技能