시나리오

브라우저 QA 키트

자동화된 상호작용, 시각적 검증, 로컬 웹 앱 디버깅 전반에서 브라우저 기반 QA를 수행하기 위한 컴팩트한 플러그인입니다.

3 스킬 1 설치 수

browsertestingautomationscreenshotsplaywright

4일 전에 업데이트됨

설치

이 팩의 모든 스킬을 설치하려면 다음 명령을 실행하세요:

npx skillstore add @browser-qa-kit

CLI는 Codex와 Claude Code 폴더를 자동으로 감지하고, 가능하면 둘 다에 설치합니다.

개요

사용 가이드

AI로 개선됨

상세 가이드

## 개요
Browser QA Kit는 엔드투엔드 UI 검사를 위한 세 가지 브라우저 중심 QA 스킬을 묶어 제공합니다: 자동화된 Playwright 상호작용, 시각적 스크린샷 검증, 브라우저 로그를 활용한 로컬 웹 앱 디버깅. 코드만 검사하는 대신 실제 UI 동작을 테스트해야 할 때 사용하세요.

## 빠른 시작
1. 웹 앱 또는 로컬 프론트엔드에 브라우저 기반 QA가 필요할 때 OpenClaw 워크스페이스에 플러그인을 설치하세요.
2. `playwright-browser-automation` (`adammanuel-dev-playwright-browser-automation`)을 사용하여 개발 서버를 자동 감지하고, 페이지를 실행하며, 양식을 작성하고, 로그인 흐름을 검증하고, 링크를 확인하고, 스크린샷을 캡처하며, `/tmp` 아래에 임시 Playwright 스크립트를 작성하세요.
3. 시각적 검증이 필요할 때는 `browser-testing-with-screenshots` (`agentworkforce-browser-testing-with-screenshots`)을 사용하세요: Chrome 상호작용을 구동하고, 요소를 선택하고, 스크린샷을 캡처하며, 핵심 UI 상태가 올바르게 보이는지 확인합니다.
4. Playwright, 브라우저 스크린샷, 브라우저 로그, 집중적인 프론트엔드 동작 검사를 활용한 로컬 웹 앱 디버깅에는 `webapp-testing` (`artemisai-webapp-testing`)을 사용하세요.

## 주요 명령
- `playwright-browser-automation` — 브라우저 상호작용, 반응형 검사, 로그인 흐름, 링크 검사, 스크린샷, 광범위한 Playwright 기반 웹사이트 검증을 자동화합니다.
- `browser-testing-with-screenshots` — Chrome 자동화, 요소 선택, 스크린샷 캡처를 통해 시각적 브라우저 테스트를 실행하여 UI 기능을 확인합니다.
- `webapp-testing` — Playwright로 로컬 웹 애플리케이션을 테스트하고, 브라우저 로그를 검사하며, UI 동작을 디버그하고, 스크린샷을 캡처합니다.

## 팁
- 전체 흐름 커버리지는 `playwright-browser-automation`으로 시작한 다음, `browser-testing-with-screenshots`를 사용해 회귀에 대한 시각적 증거를 수집하세요.
- 로컬에서만 재현되는 프론트엔드 버그의 경우, 수정 사항에 시각적 증거와 런타임 증거가 모두 있도록 `webapp-testing` 스크린샷을 브라우저 로그와 함께 사용하세요.
- 스크린샷은 애플리케이션 저장소에 커밋하지 말고 외부 QA 증거로 보관하세요.