Communitygithub.com

vidluther/pardonned

建置、執行並驅動已建置的 pardonned 網站,以在瀏覽器層級驗證 UI 變更。

pardonned 是什麼?

此技能旨在協助開發者驗證 pardonned 靜態 Astro 網站的 UI 變更。它透過建置網站、在本機伺服器上提供服務,並使用 Playwright 自動化瀏覽器驅動來進行端到端驗證。支援的平台包括任何能執行 Node.js 和瀏覽器的環境。其運作方式包含三個步驟:首先使用 pnpm build 建置靜態網站,然後在背景執行 HTTP 伺服器(例如 python3 -m http.server)來提供已建置的 dist/ 目錄,最後撰寫並執行一個拋棄式的 Playwright 腳本來模擬使用者互動並驗證 UI 行為。此技能也涵蓋了 PostHog 埋碼覆蓋、windowed 分頁,以及 Astro 開發與建置模式之間的差異等常見陷阱。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidluther/pardonned/tree/HEAD/.claude/skills/verify

在你喜歡的 AI 中提問

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

說明文件

驗證 pardonned 的變更

靜態 Astro 網站 — 沒有伺服器執行環境。請針對已建置的 dist/ 目錄,在真實瀏覽器中進行驗證。

建置與執行

pnpm build                                  # 需要 data/pardonned.db (請參閱 CLAUDE.md)
cd dist && python3 -m http.server 8123 --bind 127.0.0.1   # 在背景執行

驅動

playwright 已是 devDependency(由爬蟲使用),且已安裝 Chromium — 請在存放庫根目錄中撰寫一個拋棄式的 .mjs 檔案(這樣 Node 才能從 node_modules 解析 playwright),使用 node 執行,然後刪除。

關鍵流程位於頁面上的內聯腳本中(例如 /search/ 的篩選、排序、分頁狀態皆為客戶端處理,並透過 history.replaceState 與 URL 參數同步)。

注意事項

  • PostHog 埋碼覆蓋: 已建置的頁面會嵌入真實的 PostHog 程式碼片段,該片段會執行 window.posthog = e,並覆蓋任何透過 addInitScript 安裝的模擬版本。若要觀察 posthog.capture 的呼叫,請在載入後進行修補:page.evaluate(() => { window.posthog = { ...window.posthog, capture: (n, p) => window.__ev.push({n, p}) } })。
  • /search 頁面的 windowed 分頁: 從第 1 頁開始,只能點擊第 1、2、…、最後一頁。若要到達較深的頁面,請透過 URL 中的 ?page=N 載入,或反覆點擊「下一頁」。
  • Astro 開發模式與建置模式: pnpm dev 也可以用,但 URL 狀態的行為應針對正式建置進行驗證,因為正式環境送出的是內聯腳本。

相關技能