技能 webapp-testing
📦

webapp-testing

低風險 ⚙️ 外部命令📁 檔案系統存取

使用 Playwright 自動化測試網頁應用程式

也可從以下取得: 7Spade,DYAI2025,davila7,ArtemisAI,7Spade,Azeem-2,anthropics,ComposioHQ,Cam10001110101,AutumnsGrove

本地網頁應用程式測試需要可靠的瀏覽器自動化功能，無需手動設定。此工具包提供 Playwright 腳本和伺服器管理公用程式，以簡化前端測試工作流程。

支援: Claude Codex Code(CC)
🥉 73 青銅
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「webapp-testing」。 Discover all interactive elements on localhost:5173

預期結果:

  • 找到 12 個按鈕：[0] 提交，[1] 取消，[2] 登入...
  • 找到 8 個連結：- 儀表板 -> /dashboard，- 個人資料 -> /profile...
  • 找到 5 個輸入欄位：- email (email)，- password (password)...
  • 螢幕截圖已儲存至 /tmp/page_discovery.png

正在使用「webapp-testing」。 Capture console logs during user flow

預期結果:

  • 主控台：[log] 應用程式已初始化
  • 主控台：[warning] 使用已棄用的 API
  • 主控台：[error] 無法載入資源：net::ERR_CONNECTION_REFUSED
  • 擷取了 15 條主控台訊息。日誌已儲存至 outputs/console.log

安全審計

低風險
v1 • 2/24/2026

Static analysis flagged 38 patterns, but manual review confirms all HIGH-severity findings are false positives. The 'weak cryptographic algorithm' detections are scanner errors on argparse code. Shell backtick findings are Markdown documentation formatting. Subprocess usage in with_server.py is intentional server management functionality requiring explicit CLI invocation. Hardcoded localhost URLs and temp file writes are expected for local testing toolkit.

5
已掃描檔案
310
分析行數
3
發現項
1
審計總數
低風險問題 (1)
scripts/with_server.py:69-74
Subprocess with shell=True
with_server.py uses subprocess.Popen with shell=True to start development servers. This is intentional functionality for a server management helper script. Commands are passed via CLI arguments, requiring explicit user invocation. Risk is mitigated by design - users explicitly provide the server commands.

風險因素

⚙️ 外部命令 (2)
scripts/with_server.py:69-74 scripts/with_server.py:88-89
📁 檔案系統存取 (2)
examples/console_logging.py:31-32 examples/element_discovery.py:37-38
審計者: claude

品質評分

45
架構
100
可維護性
87
內容
50
社群
88
安全
83
規範符合性

你能建構什麼

前端回歸測試

在程式碼變更後自動驗證 UI 元件，以在部署前發現破壞性變更。

開發伺服器驗證

自動啟動後端和前端伺服器，執行整合測試，然後清理資源。

主控台日誌除錯

擷取並分析瀏覽器主控台輸出，以在使用者流程中識別 JavaScript 錯誤和警告。

試試這些提示

基本頁面導航 
Navigate to my local React app at localhost:3000, wait for the page to fully load, and take a screenshot of the homepage.
元素探索 
Visit my web application and list all buttons, links, and form inputs on the current page with their text content and attributes.
主控台日誌擷取 
Run my automation script while capturing all browser console messages. Save the logs to a file and report any errors or warnings found.
完整整合測試 
Start my backend server on port 8000 and frontend on port 5173, then run my Playwright test script that logs in, navigates to the dashboard, and verifies key elements are present. Clean up servers after tests complete.

最佳實務

  • 在與動態頁面互動之前務必等待 networkidle 狀態，以確保 JavaScript 已完全執行
  • 使用 with_server.py 輔助腳本管理伺服器生命週期，而非手動啟動和停止伺服器
  • 先使用 --help 旗標執行腳本以了解可用選項，再自訂自動化邏輯

避免

  • 請勿在動態應用程式上等待 networkidle 之前檢查 DOM 或拍攝螢幕截圖
  • 避免將腳本原始碼讀入 context window - 請使用 --help 文件並作為黑盒工具呼叫
  • 請勿使用固定逾時如 wait_for_timeout，當可以使用 wait_for_selector 等待特定選取器時

常見問題

如何測試需要驗證的應用程式？
在導航至受保護頁面之前，請在 Playwright 腳本中包含登入步驟。您可以將憑證儲存在環境變數中，或使用 Playwright 的儲存狀態功能來重複使用已驗證的工作階段。
我可以同時測試多個伺服器嗎？
是的，with_server.py 支援多個 --server 和 --port 配對。每個伺服器依序啟動，等待就緒，然後在所有伺服器就緒後執行您的測試命令。
為什麼我的測試在頁面有動態內容時失敗？
確保在導航後呼叫 page.wait_for_load_state('networkidle')。對於特定元素，請使用 page.wait_for_selector() 等待元素出現後再互動。
如何擷取瀏覽器螢幕截圖進行視覺除錯？
使用 page.screenshot(path='filename.png', full_page=True) 擷取整個頁面。螢幕截圖會儲存至指定路徑，可在測試執行後檢視。
測試支援哪些瀏覽器？
Playwright 支援 Chromium、Firefox 和 WebKit。此技能預設使用無頭模式下的 Chromium 以確保穩定性。您可以修改腳本以視需要使用其他瀏覽器。
如何安裝所需的相依套件？
使用 pip install playwright 安裝 Playwright，然後執行 playwright install 下載瀏覽器二進位檔。確保環境中已安裝 Python 3.7 或更高版本。

開發者詳情

作者

ZhanlinCui

授權

Complete terms in LICENSE.txt

儲存庫

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/webapp-testing

引用

main

檔案結構

📁 examples/

📄 console_logging.py

📄 element_discovery.py

📄 static_html_automation.py

📁 scripts/

📄 with_server.py

📄 SKILL.md