webapp-testing
Playwright 자동화로 웹 애플리케이션 테스트
Également disponible depuis: ZhanlinCui,AutumnsGrove,Azeem-2,DYAI2025,Cam10001110101,7Spade,7Spade,ComposioHQ,davila7,anthropics,ArtemisAI
로컬 웹 애플리케이션 테스트는 서버 관리와 브라우저 상호작용 자동화가 필요합니다. 이 스킬은 프론트엔드 테스트 워크플로우를 간소화하기 위한 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". 로그인 페이지의 모든 인터랙티브 요소 탐색
Résultat attendu:
- 3 개의 입력 필드 발견: email (type=email), password (type=password), remember (type=checkbox)
- 2 개의 버튼 발견: 'Sign In' (submit), 'Forgot Password?' (link)
- 폼 레이아웃을 보여주는 스크린샷이 /tmp/login_page.png 로 저장됨
Utilisation de "webapp-testing". 서버 실행 중 폼 제출 테스트
Résultat attendu:
- 포트 3000 에서 서버 시작됨
- http://localhost:3000/login 으로 이동함
- 이메일 필드에 'test@example.com' 입력함
- Sign In 버튼 클릭함
- /dashboard 로 이동 확인됨
- 서버가 깔끔하게 중지됨
Audit de sécurité
SûrStatic analysis detected 42 patterns but all are false positives. LICENSE.txt URLs are standard Apache 2.0 license references. 'Weak cryptographic algorithm' findings incorrectly flagged license text and argparse code. subprocess usage in with_server.py is legitimate for server management. SKILL.md code blocks are documentation examples, not executable code. Skill is safe for publication.
Problèmes à risque faible (1)
Facteurs de risque
⚡ Contient des scripts
⚙️ Commandes externes (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
프론트엔드 개발자의 UI 컴포넌트 테스트
개발 서버를 시작하고 Playwright 스크립트로 UI 동작을 검증하여 React 또는 Vue 컴포넌트 테스트를 자동화합니다.
풀스택 통합 테스트
백엔드 API 서버와 프론트엔드 개발 서버를 동시에 실행한 후 통합된 애플리케이션에 대해 엔드투엔드 테스트를 실행합니다.
시각적 회귀 탐지
웹 애플리케이션 상태의 스크린샷을 캡처하고 시각적으로 비교하여 개발 중 의도하지 않은 UI 변경을 탐지합니다.
Essayez ces prompts
webapp-testing 스킬을 사용하여 로컬 HTML 파일을 검사하고 모든 버튼 요소를 찾습니다. 파일로 이동하고 페이지 로드를 기다린 다음 텍스트 콘텐츠와 함께 모든 버튼을 나열합니다.
with_server.py 를 사용하여 포트 3000 에서 React 개발 서버를 시작한 다음, 앱으로 이동하여 로그인 버튼을 클릭하고 대시보드가 나타나는지 확인하는 Playwright 스크립트를 작성합니다.
with_server.py 를 사용하여 포트 5000 에서 Python Flask 백엔드와 포트 5173 에서 Vite 프론트엔드를 시작합니다. 프론트엔드에서 폼을 제출하고 데이터가 백엔드 응답에 나타나는지 확인하는 테스트를 작성합니다.
로컬 웹앱으로 이동하고 networkidle 상태를 기다린 후 전체 페이지 스크린샷을 /tmp/debug.png 로 캡처하고 페이지 콘텐츠 HTML 을 추출합니다. 모든 입력 필드와 관련 레이블을 식별합니다.
Bonnes pratiques
- 동적 웹 애플리케이션을 검사하기 전에 항상 networkidle 상태를 기다립니다
- with_server.py 헬퍼는 블랙박스로 사용합니다 - 먼저 --help 를 실행하여 사용법을 이해합니다
- 시각적 디버깅 컨텍스트를 위해 DOM 검사 전에 스크린샷을 캡처합니다
Éviter
- JavaScript 가 많은 애플리케이션에서 networkidle 대기를 하기 전에 DOM 검사
- --help 가 충분한 사용 정보를 제공하는데 스크립트 소스 코드를 컨텍스트에 읽어들임
- 실행 중인 서버가 필요한 동적 애플리케이션에 file:// URL 사용