스킬 webapp-testing
🧪

webapp-testing

낮은 위험 ⚡ 스크립트 포함⚙️ 외부 명령어📁 파일 시스템 액세스

使用 Playwright 測試網頁應用程式

또한 다음에서 사용할 수 있습니다: DYAI2025,ArtemisAI,davila7,7Spade,Azeem-2,7Spade,ComposioHQ,anthropics,AutumnsGrove

測試本地網頁應用程式需要啟動瀏覽器、管理伺服器並自動化互動操作。此技能提供 Python Playwright 腳本來驗證前端功能、除錯 UI 問題、擷取螢幕截圖以及收集瀏覽器控制台日誌。

지원: Claude Codex Code(CC)
📊 70 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"webapp-testing" 사용 중입니다. Test my local HTML file at /tmp/test.html. Click the submit button and show me the result.

예상 결과:

  • Browser launched in headless mode
  • Navigated to file:///tmp/test.html
  • Found 3 buttons, 2 input fields, 1 form
  • Clicked 'Submit' button
  • Screenshot saved to /mnt/user-data/outputs/after_submit.png
  • Test completed successfully

"webapp-testing" 사용 중입니다. Start the dev server on port 5173 and check if the dashboard loads without errors.

예상 결과:

  • Server started on port 5173
  • Waiting for server readiness...
  • Server is ready
  • Browser launched in headless mode
  • Page loaded successfully
  • No console errors detected
  • Dashboard title found: 'Dashboard'

"webapp-testing" 사용 중입니다. Find all clickable buttons on the homepage and list their labels.

예상 결과:

  • Found 7 buttons on the page:
  • - 'Submit Form' (visible)
  • - 'Cancel' (visible)
  • - 'Delete' (visible)
  • - 'Edit Profile' (visible)
  • - 'Settings' (visible)
  • - 'Help' (visible)
  • - 'Submit' (hidden)

보안 감사

낮은 위험
v5 • 1/16/2026

Legitimate web testing toolkit using Playwright. All subprocess usage is for managing local dev servers. Filesystem access is limited to standard output directories (/tmp, /mnt/user-data/outputs). Localhost URLs are for local testing only. No data exfiltration or malicious patterns detected. Static scanner findings are false positives from markdown formatting and JSON self-detection.

6
스캔된 파일
642
분석된 줄 수
3
발견 사항
5
총 감사 수

위험 요인

⚡ 스크립트 포함 (1)
scripts/with_server.py:1-106
⚙️ 외부 명령어 (2)
scripts/with_server.py:69-74 scripts/with_server.py:88
📁 파일 시스템 액세스 (3)
examples/element_discovery.py:37 examples/console_logging.py:31-32 examples/static_html_automation.py:17
감사자: claude 감사 이력 보기 →

품질 점수

45
아키텍처
100
유지보수성
87
콘텐츠
30
커뮤니티
90
보안
83
사양 준수

만들 수 있는 것

驗證 UI 元件

測試按鈕、表單和導覽在不同瀏覽器狀態下是否正常運作。

捕捉視覺回歸問題

擷取頁面螢幕截圖以在部署網頁應用程式前識別視覺錯誤。

除錯前端問題

收集控制台日誌並檢查 DOM 以診斷本地應用程式中的 JavaScript 錯誤。

이 프롬프트를 사용해 보세요

基本頁面測試 
Test my local HTML file at path/to/page.html. Use the static_html_automation.py example to click the submit button and take a screenshot.
元素探索 
Explore the page at http://localhost:5173. Discover all buttons, links, and input fields. Take a screenshot and save console logs.
多伺服器測試 
Start a backend server on port 3000 with 'cd backend && python server.py' and a frontend server on port 5173. Then run element_discovery.py to verify the UI loads correctly.
控制台除錯 
Navigate to http://localhost:3000 and capture all console messages. Save them to /mnt/user-data/outputs/debug.log for analysis.

모범 사례

  • 在檢查 DOM 元素之前,務必在動態網頁應用程式上等待 networkidle
  • 使用描述性選擇器如 text=、role= 或 CSS 選擇器以實現可靠的元素定位
  • 完成後關閉瀏覽器以釋放系統資源

피하기

  • 不要在動態單頁應用程式上跳過 wait_for_load_state('networkidle')
  • 不要在 CI 環境或自動化測試中使用有頭模式
  • 不要在自動化腳本中硬編碼憑證

자주 묻는 질문

此技能支援哪些瀏覽器?
此技能是為透過 Playwright 使用 Chromium 而設計的。其他瀏覽器如 Firefox 或 WebKit 未經測試。
無頭瀏覽器測試的資源限制是什麼?
瀏覽器實例會消耗記憶體。對於大型測試套件,一次執行一個瀏覽器並關閉它。
如何將此技能整合到我現有的測試框架中?
將範例腳本作為模板匯入。從您的測試執行器呼叫 with_server.py 來管理開發伺服器。
擷取螢幕截圖時我的資料安全嗎?
螢幕截圖僅儲存到 /tmp/ 和 /mnt/user-data/outputs/ 目錄。不會將任何資料傳送到外部服務。
為什麼我的 DOM 檢查在動態應用程式上失敗?
最常見的問題:在 JavaScript 完成執行之前呼叫 DOM 方法。請使用 wait_for_load_state('networkidle')。
這與 Selenium 或 Puppeteer 相比如何?
與 Selenium 相比,Playwright 提供更可靠的等待機制、更好的無頭模式支援以及現代化的非同步 API。

개발자 세부 정보

작성자

Cam10001110101

라이선스

MIT

리포지토리

https://github.com/Cam10001110101/claude-skills-base/tree/main/mnt/skills/examples/webapp-testing

참조

main

파일 구조

📁 examples/

📄 console_logging.py

📄 element_discovery.py

📄 static_html_automation.py

📁 scripts/

📄 with_server.py

📄 SKILL.md