bounded-playwright-ui-verification은(는) 무엇을 하나요?
AI 코딩 에이전트를 위한 범위 제한 Playwright UI 검증 스킬
개요
이 스킬은 AI 코딩 에이전트가 Playwright를 사용하여 웹 UI의 특정 부분을 검증할 수 있도록 설계되었습니다. 엄격한 범위 제한(bounded) 방식을 채택하여 불필요한 브라우저 동작을 최소화하고, 정확하고 빠른 테스트 결과를 제공합니다.
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 Playwright를 지원하는 AI 에이전트
설치 및 설정
- Playwright 설치:
npm install playwright
npx playwright install
- 설정 파일 (
playwright.config.ts) 예시:
import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
use: {
baseURL: 'http://localhost:3000',
},
});
사용 방법
기본 사용법
import { test, expect } from '@playwright/test';
test('범위 제한 UI 검증', async ({ page }) => {
await page.goto('/');
// 특정 요소가 보일 때까지 기다리기
await page.waitForSelector('[data-testid="submit-button"]', { state: 'visible' });
// 버튼 클릭
await page.click('[data-testid="submit-button"]');
// 결과 확인
await expect(page.locator('.success-message')).toBeVisible();
});
고급 사용법: 범위 제한 설정
특정 컨테이너 내에서만 동작하도록 범위를 제한할 수 있습니다:
const container = page.locator('.app-container');
await container.locator('button.primary').click();
await expect(container.locator('.status')).toHaveText('완료');
환경 변수
| 변수명 | 설명 | 기본값 |
|---|---|---|
PLAYWRIGHT_BASE_URL | 테스트할 애플리케이션의 기본 URL | http://localhost:3000 |
PLAYWRIGHT_TIMEOUT | 각 테스트의 타임아웃 (ms) | 30000 |
PLAYWRIGHT_HEADLESS | 헤드리스 모드 실행 여부 | true |
주의사항
- 범위 제한: 항상 테스트 대상을 특정 선택자나 컨테이너로 제한하세요. 전체 페이지를 대상으로 하면 예기치 않은 동작이 발생할 수 있습니다.
- 대기 전략:
waitForSelector나waitForLoadState를 사용하여 요소가 준비될 때까지 기다리세요. 고정된timeout(3000)같은 임의 대기는 피하십시오. - 환경 격리: 테스트 간 상태 공유를 방지하려면 각 테스트 전에
page.goto('/')등을 통해 초기 상태로 재설정하세요.
문제 해결
- 요소를 찾을 수 없는 경우: 선택자가 올바른지 확인하고, 요소가 실제로 DOM에 존재하는지 검사하세요.
page.pause()를 사용하여 브라우저를 일시 중지하고 직접 확인할 수 있습니다. - 테스트가 너무 느린 경우:
PLAYWRIGHT_HEADLESS를true로 설정하고, 화면 캡처와 같은 불필요한 작업을 줄이세요.
라이선스
이 프로젝트는 MIT 라이선스를 따릅니다.