webapp-testing
Playwright로 웹 앱 테스트하기
프론트엔드 변경 사항은 정적 검사만이 아니라 실제 브라우저에서 검증해야 합니다. 이 스킬은 Claude, Codex, Claude Code가 Playwright 기반 테스트, 디버깅, 스크린샷, 콘솔 검사 과정을 진행하도록 안내합니다.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "webapp-testing" from https://skillstore.io/skills/7spade-webapp-testing.md and its manifest at https://skillstore.io/api/skills/7spade-webapp-testing/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"webapp-testing" 사용 중입니다. 내 로컬 앱 URL에서 대시보드가 로드되는지 확인하세요.
예상 결과:
대시보드가 성공적으로 로드되었습니다. 페이지 제목이 예상한 앱 이름과 일치했고, 기본 탐색이 표시되었으며, 콘솔 오류는 나타나지 않았습니다.
"webapp-testing" 사용 중입니다. 제출 버튼이 작동하지 않는 이유를 알아내세요.
예상 결과:
버튼은 표시되었지만 클릭해도 탐색이 발생하지 않았습니다. 브라우저 콘솔에는 유효성 검사 오류가 표시되었고, 스크린샷에는 비어 있는 필수 필드가 보였습니다.
"webapp-testing" 사용 중입니다. 모바일 너비에서 페이지를 검증하세요.
예상 결과:
모바일 뷰포트는 전반적으로 올바르게 렌더링되었습니다. 기본 작업 버튼은 계속 표시되었지만, 푸터가 마지막 양식 필드와 겹쳤습니다.
보안 감사
안전The static findings are false positives caused by markdown code fences, a localhost Playwright navigation example, local screenshot capture guidance, and selector advice. I found no prompt injection, data exfiltration intent, or unsafe automated behavior in SKILL.md.
위험 요인
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/7spade-webapp-testing/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/7spade-webapp-testing?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/7spade-webapp-testing?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/7spade-webapp-testing/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/7spade-webapp-testing.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>학술 인용 (APA · BibTeX · CFF)
APA 인용
7Spade. (2026). webapp-testing security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-webapp-testing/audits/8BibTeX 인용
@techreport{7spade-7spade-webapp-testing-2026,
author = {7Spade},
title = {webapp-testing security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/7spade-webapp-testing/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "webapp-testing security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "7Spade"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/7spade-webapp-testing/audits/8"
identifiers:
- type: other
value: "skillstore:7spade-webapp-testing:audit:8"
description: "Skillstore immutable audit report identifier"
변형 비교
설치 가능한 변형 11개각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.
이 변형이 1위인 이유
autumnsgrove-webapp-testing
2026-09-09
cam10001110101-webapp-testing
2026-09-09
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음만들 수 있는 것
프론트엔드 변경 사항 검증
UI 동작을 변경한 후 브라우저 워크플로를 실행하고 예상한 페이지 상태가 나타나는지 확인합니다.
실패한 사용자 여정 디버깅
양식 또는 탐색 흐름이 실패하는 이유를 파악하기 위해 스크린샷, 콘솔 메시지, 브라우저 상태를 캡처합니다.
반응형 동작 확인
동일한 페이지를 여러 뷰포트 크기에서 실행하고 중요한 컨트롤이 계속 표시되고 사용 가능한지 확인합니다.
이 프롬프트를 사용해 보세요
webapp-testing 스킬을 사용해 내 로컬 앱을 열고, 홈 페이지가 로드되는지 확인한 뒤 페이지 제목과 콘솔 오류가 있으면 보고하세요.
webapp-testing 스킬을 사용해 테스트 자격 증명으로 로그인 양식을 입력하고 제출한 뒤, 예상한 대상 페이지가 나타나는지 확인하세요.
webapp-testing 스킬을 사용해 실패하는 버튼 클릭을 재현하고, 스크린샷을 캡처하고, 콘솔 로그를 검사한 뒤, 가능한 원인을 설명하세요.
webapp-testing 스킬을 사용해 데스크톱 및 모바일 너비에서 결제 흐름을 테스트하고, 핵심 요소를 검증한 뒤, 차이점을 요약하세요.
모범 사례
- 복잡한 흐름을 테스트하기 전에 간단한 페이지 로드 확인부터 시작하세요.
- roles 또는 data-testid 속성과 같은 안정적인 선택자를 사용하세요.
- 브라우저 테스트가 실패하면 스크린샷과 콘솔 로그를 캡처하세요.
피하기
- 승인 없이 프로덕션 계정이나 실제 고객 데이터를 테스트하지 마세요.
- 더 나은 선택자가 있을 때 취약한 CSS class 선택자에만 의존하지 마세요.
- 탐색 또는 비동기 UI 업데이트 후 대기를 건너뛰지 마세요.