Playwright를 사용한 웹 애플리케이션 테스트 스킬

--- name: web-application-testing-skill description: 로컬 웹 애플리케이션을 Playwright로 상호 작용하고 테스트하기 위한 도구 키트입니다. --- # 웹 애플리케이션 테스트 이 스킬은 Playwright 자동화를 사용하여 로컬 웹 애플리케이션의 포괄적인 테스트와 디버깅을 가능하게 합니다. ## 이 스킬을 사용해야 하는 경우 다음과 같은 경우에 이 스킬을 사용하세요: - 실제 브라우저에서 프론트엔드 기능 테스트 - UI 동작 및 상호 작용 검증 - 웹 애플리케이션 문제 디버깅 - 문서화 또는 디버깅을 위한 스크린샷 캡처 - 브라우저 콘솔 로그 검사 - 양식 제출 및 사용자 흐름 검증 - 다양한 뷰포트에서 반응형 디자인 확인 ## 사전 요구 사항 - 시스템에 Node.js 설치 - 로컬에서 실행 중인 웹 애플리케이션 (또는 접근 가능한 URL) - Playwright는 없으면 자동으로 설치됩니다 ## 핵심 기능 ### 1. 브라우저 자동화 - URL로 이동 - 버튼 및 링크 클릭 - 양식 필드 작성 - 드롭다운 선택 - 대화 상자 및 알림 처리 ### 2. 검증 - 요소 존재 여부 확인 - 텍스트 콘텐츠 검증 - 요소 가시성 확인 - URL 검증 - 반응형 동작 테스트 ### 3. 디버깅 - 스크린샷 캡처 - 콘솔 로그 보기 - 네트워크 요청 검사 - 실패한 테스트 디버깅 ## 사용 예시 ### 예시 1: 기본 탐색 테스트 ```javascript // 페이지로 이동하고 제목 확인 await page.goto('http://localhost:3000'); const title = await page.title(); console.log('페이지 제목:', title); ``` ### 예시 2: 양식 상호 작용 ```javascript // 양식 작성 및 제출 await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); ``` ### 예시 3: 스크린샷 캡처 ```javascript // 디버깅을 위한 스크린샷 캡처 await page.screenshot({ path: 'debug.png', fullPage: true }); ``` ## 지침 1. **앱이 실행 중인지 항상 확인** - 테스트를 실행하기 전에 로컬 서버에 접근 가능한지 확인 2. **명시적 대기 사용** - 상호 작용 전에 요소 또는 탐색이 완료될 때까지 대기 3. **실패 시 스크린샷 캡처** - 문제 디버깅을 돕기 위해 스크린샷 촬영 4. **리소스 정리** - 완료 시 항상 브라우저 닫기 5. **타임아웃을 우아하게 처리** - 느린 작업에 대해 합리적인 타임아웃 설정 6. **점진적으로 테스트** - 복잡한 흐름 전에 간단한 상호 작용부터 시작 7. **선택자를 현명하게 사용** - CSS 클래스보다 data-testid 또는 역할 기반 선택자 선호 ## 일반적인 패턴 ### 패턴: 요소 대기 ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### 패턴: 요소 존재 여부 확인 ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### 패턴: 콘솔 로그 가져오기 ```javascript page.on('console', msg => console.log('브라우저 로그:', msg.text())); ``` ### 패턴: 오류 처리 ```javascript try { await page.click('#button'); } catch (error) { await page.screenshot({ path: 'error.png' }); throw error; } ``` ## 제한 사항 - Node.js 환경 필요 - 네이티브 모바일 앱 테스트 불가 (대신 React Native Testing Library 사용) - 복잡한 인증 흐름에서 문제가 발생할 수 있음 - 일부 최신 프레임워크는 특정 구성이 필요할 수 있음