webapp-testing
Playwright 자동화로 웹 앱 테스트
Également disponible depuis: ZhanlinCui,AutumnsGrove,Azeem-2,DYAI2025,Cam10001110101,7Spade,7Spade,sickn33,ComposioHQ,davila7,anthropics
수동 웹 애플리케이션 테스트는 느리고 오류가 발생하기 쉽습니다. 이 툴킷은 로컬 웹 앱 테스트, 스크린샷 캡처, 프론트엔드 동작 디버깅을 위한 Playwright 기반 자동화를 제공합니다.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "webapp-testing". 포트 5173에서 내 React 앱을 테스트하세요. 모든 버튼을 찾고 스크린샷을 촬영하세요.
Résultat attendu:
- http://localhost:5173으로 이동하여 네트워크 유휴 상태를 기다렸습니다
- 4개의 버튼 발견: Submit, Cancel, Save Changes, Delete Account
- /tmp/page_discovery.png에 전체 페이지 스크린샷을 저장했습니다
Utilisation de "webapp-testing". 내 로컬 앱의 로그인 폼을 디버깅하세요. 콘솔 오류를 캡처하세요.
Résultat attendu:
- 포트 3000에서 서버를 시작했습니다
- 3개의 콘솔 오류 캡처: Uncaught ReferenceError, TypeError in auth.js
- /tmp/login-debug.log에 로그를 저장했습니다
- 오류 상태의 스크린샷을 /tmp/login-error.png에 저장했습니다
Audit de sécurité
Risque faibleLegitimate web testing toolkit using Playwright. Static findings are false positives: LICENSE.txt cryptographic warnings are standard legal text, subprocess usage is user-controlled for local dev servers, markdown backticks in SKILL.md are documentation formatting. No data exfiltration, credential theft, or persistence mechanisms detected.
Problèmes à risque moyen (1)
Facteurs de risque
⚡ Contient des scripts (1)
🌐 Accès réseau (1)
📁 Accès au système de fichiers (1)
⚙️ Commandes externes (1)
Score de qualité
Ce que vous pouvez construire
React, Vue, Svelte 앱 테스트
개발 중 싱글 페이지 애플리케이션의 상호작용 테스트를 자동화합니다.
엔드투엔드 테스트 스위트 생성
폼 제출 및 사용자 플로우를 검증하는 자동화된 UI 테스트를 구축합니다.
프론트엔드 이슈 원격 디버깅
스크린샷과 콘솔 로그를 캡처하여 JavaScript 오류를 진단합니다.
Essayez ces prompts
webapp-testing 스킬을 사용하여 npm run dev로 포트 5173에서 개발 서버를 시작한 다음, Playwright 스크립트를 실행하여 홈페이지가 올바르게 로드되는지 확인하세요.
webapp-testing을 사용하여 http://localhost:3000으로 이동하고, 네트워크 유휴 상태를 기다린 다음, 페이지의 모든 버튼, 링크, 입력 필드를 나열하세요.
포트 5173에서 개발 서버를 시작하고, 대시보드로 이동한 다음, 페이지가 로드될 때 전체 페이지 스크린샷을 촬영하세요. 스크린샷을 /tmp/dashboard.png에 저장하세요.
webapp-testing을 사용하여 http://localhost:5173을 방문하고, 모든 콘솔 메시지를 캡처한 다음, 디버깅을 위해 /tmp/console.log에 저장하세요.
Bonnes pratiques
- 동적 웹 애플리케이션을 검사하기 전에 항상 networkidle 상태를 기다리세요
- with_server.py 헬퍼 스크립트를 사용하여 서버 라이프사이클을 자동으로 관리하세요
- 사용 가능한 옵션을 이해하기 위해 먼저 --help 플래그와 함께 스크립트를 실행하세요
Éviter
- 페이지 로드가 완료되기 전에 DOM 요소를 검사하지 마세요
- 자동화가 완료된 후 브라우저를 닫는 것을 잊지 마세요
- 동적으로 먼저 발견하지 않고 하드코딩된 선택자를 사용하지 마세요
Foire aux questions
어떤 브라우저가 지원되나요?
프로덕션 웹사이트를 테스트할 수 있나요?
여러 서버를 동시에 실행하려면 어떻게 하나요?
이 스킬을 사용할 때 내 데이터가 안전한가요?
내 스크린샷이 전체 페이지를 캡처하지 않는 이유는 무엇인가요?
Selenium이나 Puppeteer와 어떻게 다른가요?
Détails du développeur
Structure de fichiers