webapp-testing
使用 Playwright 測試本地 Web 應用程式
Também disponível em: DYAI2025,ArtemisAI,davila7,7Spade,Azeem-2,7Spade,ComposioHQ,Cam10001110101,AutumnsGrove
測試本地 Web 應用程式需要瀏覽器自動化、截圖和 UI 驗證。這個工具包提供 Playwright 腳本用於前端測試、DOM 檢查和控制台日誌記錄。
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "webapp-testing". 對應用程式進行截圖並列出所有按鈕
Resultado esperado:
- 截圖已儲存到 /tmp/inspect.png
- 找到 5 個按鈕：
- [0] 提交
- [1] 取消
- [2] 設定
- [3] 說明
- [4] [隱藏]
A utilizar "webapp-testing". 除錯表單提交無法運作的原因
Resultado esperado:
- 已擷取控制台日誌：
- [錯誤] 無法讀取未定義的 'submit' 屬性
- [錯誤] 表單驗證失敗：需要電子郵件
- [警告] 已棄用：請使用 .closest() 而非 .parents()
- 截圖已儲存：/mnt/user-data/outputs/form_debug.png
Auditoria de Segurança
SeguroOfficial Anthropic skill with minimal attack surface. Uses subprocess and socket APIs only for local server management. All file operations restricted to /tmp and /mnt/user-data/outputs. No external network calls.
Fatores de risco
⚡ Contém scripts (1)
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (2)
⚙️ Comandos externos (1)
Pontuação de qualidade
O Que Você Pode Construir
驗證 UI 功能
在本地開發環境中測試按鈕、表單和導航是否正常運作。
自動化 UI 回归測試
建立可重複的 Playwright 腳本，以驗證程式碼變更時的前端行為。
擷取控制台錯誤
執行瀏覽器自動化以擷取控制台日誌，並識別本地應用程式中的 JavaScript 錯誤。
Tente Estes Prompts
對 localhost:5173 上運行的應用程式進行截圖，並儲存到 /tmp/inspect.png。
找出 localhost:3000 頁面上的所有按鈕、連結和輸入欄位，並列出它們的文字或標籤。
導航到應用程式，擷取所有控制台訊息，並將它們儲存到日誌檔案以進行除錯。
在連接埠 3000 啟動後端伺服器，在連接埠 5173 啟動前端，然後執行 element_discovery.py 來驗證完整堆疊是否正常運作。
Melhores Práticas
- 使用隨附的 with_server.py 腳本自動管理伺服器生命週期
- 在檢查動態 Web 應用程式之前，請務必等待 networkidle 狀態
- 自動化完成後請正確關閉瀏覽器執行個體
Evitar
- 在動態應用程式上未等待 networkidle 就檢查 DOM
- 指令碼完成後未結束瀏覽器程序
- 對於簡單的自動化任務未使用 sync_playwright
Perguntas Frequentes
支援哪些瀏覽器？
最大測試持續時間是多少？
我可以測試遠端正式環境 URL 嗎？
我的測試資料是否安全儲存？
為什麼我的 DOM 檢查失敗？
這與 Selenium 相比如何？
Detalhes do Desenvolvedor
Estrutura de arquivos