e2e-testing-patterns
신뢰할 수 있는 E2E 테스트 스위트 구축
E2E 테스트는 사용자보다 먼저 중요한 버그를 잡아내지만, 불안정한 테스트는 배포 속도를 늦추고 신뢰도를 떨어뜨립니다. 이 스킬은 코드 품질을 향상시키면서도 팀의 속도를 저하시키지 않는 빠르고 신뢰할 수 있는 Playwright 및 Cypress E2E 테스트 스위트를 구축하기 위한 검증된 패턴을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"e2e-testing-patterns" 사용 중입니다. 사용자 로그인을 위한 커스텀 Cypress command를 생성하세요
예상 결과:
이메일과 비밀번호 매개변수를 받아들이고, 로그인 페이지로 이동하며, data-testid 선택자를 사용하여 자격 증명을 입력하고, 제출 버튼을 클릭한 후 대시보드로의 성공적인 리디렉션을 검증하는 커스텀 Cypress command를 생성했습니다. IDE 자동완성 지원을 위한 TypeScript 타입 정의가 포함되어 있습니다.
"e2e-testing-patterns" 사용 중입니다. 이 테스트를 덜 불안정하게 만들려면 어떻게 해야 하나요?
예상 결과:
세 가지 불안정성 원인을 식별했습니다: 고정된 timeout 대기는 조건부 대기로 대체되어야 하고, CSS 클래스 선택자는 data-testid 속성을 사용해야 하며, 병렬 테스트가 전역 변수를 통해 상태를 공유하고 있습니다. 적절한 waitForLoadState, 역할 기반 선택자, 격리된 테스트 fixture를 포함한 구체적인 코드 변경 사항을 제공했습니다.
"e2e-testing-patterns" 사용 중입니다. Playwright로 시각적 회귀 테스팅을 설정하세요
예상 결과:
전체 페이지 스크린샷을 캡처하고, 다양한 뷰포트 크기를 처리하며, 타임스탬프와 같은 동적 콘텐츠를 제외하고, 픽셀 차이 임계값을 사용하여 오탐을 줄이는 시각적 회귀 테스트 패턴을 생성했습니다. 베이스라인 생성 워크플로우와 CI 통합 단계가 포함되어 있습니다.
보안 감사
안전This skill provides educational content for end-to-end testing patterns with Playwright and Cypress. All static findings are false positives: weak crypto detections are from filename patterns, backtick executions are code examples in documentation, environment variable access is legitimate test configuration, and hardcoded URLs are localhost test endpoints. No security risks identified.
품질 점수
만들 수 있는 것
테스트 자동화를 구축하는 QA 엔지니어
품질 보증 엔지니어가 새 프로젝트를 위한 E2E 테스팅 표준을 확립해야 합니다. 이 스킬을 사용하여 Page Object Model을 생성하고, CI/CD 통합을 설정하며, 테스트 불안정성을 줄이는 신뢰할 수 있는 대기 전략을 구현합니다.
사용자 플로우를 테스트하는 프론트엔드 개발자
프론트엔드 개발자가 인증 및 결제와 같은 중요한 사용자 워크플로우에 대한 E2E 테스트를 추가하려고 합니다. 이 스킬을 사용하여 네트워크 모킹 패턴, 커스텀 fixture, 그리고 조기에 회귀를 잡아내는 접근성 테스트를 생성합니다.
테스팅 표준을 확립하는 기술 리드
기술 리드가 여러 팀에 걸쳐 E2E 테스팅 모범 사례를 확립해야 합니다. 이 스킬을 사용하여 선택자 전략, 병렬 테스팅 패턴, 그리고 테스트 스위트 유지보수성을 향상시키는 디버깅 접근법을 문서화합니다.
이 프롬프트를 사용해 보세요
Playwright를 사용하여 이메일, 비밀번호 필드 및 오류 처리가 있는 로그인 페이지를 위한 Page Object Model을 생성하세요
이 테스트를 검토하고 타이밍 이슈와 경쟁 조건으로 인한 불안정한 동작에 대한 수정 사항을 제안하세요
사용자 프로필 페이지에 대한 API 실패 및 엣지 케이스를 모킹하기 위한 네트워크 인터셉션 패턴을 생성하세요
200개의 E2E 테스트를 4개의 CI 워커에 최적으로 분배하여 실행하는 샤딩 전략을 설계하세요
모범 사례
- UI 리팩토링에도 견디는 안정적인 테스트를 만들기 위해 CSS 클래스 대신 getByRole 및 getByLabel과 같은 의미론적 선택자를 사용하세요
- 불안정한 테스트를 제거하기 위해 고정된 timeout 대신 조건부 대기 및 assertion을 사용하는 적절한 대기 전략을 구현하세요
- 병렬 실행과 신뢰할 수 있는 테스트 실행을 가능하게 하기 위해 격리된 fixture 및 정리를 통해 테스트를 독립적으로 유지하세요
피하기
- 특정 조건을 기다리는 대신 waitForTimeout과 같은 고정된 timeout을 사용하면 간헐적으로 실패하는 신뢰할 수 없는 테스트가 발생합니다
- 사용자에게 보이는 동작 대신 구현 세부사항이나 내부 상태를 테스트하면 리팩토링 시 깨지는 취약한 테스트가 생성됩니다
- 테스트 간에 상태를 공유하거나 테스트 실행 순서에 의존하면 병렬 실행이 불가능해지고 연쇄 실패가 발생합니다