browser-automation은(는) 무엇을 하나요?
브라우저 자동화는 웹 테스트, 스크래핑, AI 에이전트 상호작용을 지원합니다. 불안정한 스크립트와 안정적인 시스템의 차이는 셀렉터, 대기 전략, 탐지 회피 패턴을 이해하는 데 달려 있습니다.
개요
이 스킬은 브라우저 자동화를 위한 모범 사례를 제공합니다. 주요 브라우저 자동화 도구(Playwright, Puppeteer, Selenium)와 함께 사용할 수 있으며, AI 코딩 어시스턴트(Claude Code, Cursor, Codex)와의 통합을 고려하여 설계되었습니다.
주요 개념
셀렉터 (Selectors)
- CSS 선택자:
.class,#id,[data-testid="value"]등. 빠르고 간결하지만, 동적 클래스에는 취약할 수 있습니다. - XPath:
//div[@class='item']등. 강력하지만 복잡하고 느릴 수 있습니다. - 텍스트 기반: 버튼 텍스트나 레이블을 사용하여 요소를 찾습니다. UI 변경에 더 강건할 수 있습니다.
- 권장 사항: 고유한
data-testid속성을 사용하여 테스트에 최적화된 셀렉터를 만듭니다.
대기 전략 (Waiting Strategies)
- 암시적 대기 (Implicit Wait): 요소를 찾기 전에 일정 시간 동안 대기합니다. 간단하지만 모든 요소에 적용되어 성능이 저하될 수 있습니다.
- 명시적 대기 (Explicit Wait): 특정 조건이 충족될 때까지 대기합니다 (예: 요소가 표시될 때까지). 더 안정적이고 효율적입니다.
- 사용자 지정 조건: 페이지 로드, 네트워크 요청 완료, 특정 텍스트 표시 등을 기다리는 데 유용합니다.
탐지 회피 패턴 (Anti-Detection Patterns)
- 사용자 에이전트 변경: 실제 브라우저처럼 보이도록 User-Agent 헤더를 설정합니다.
- 뷰포트 및 헤더 설정: 브라우저의 해상도, 언어, 시간대 등을 실제 사용자와 유사하게 설정합니다.
- 지연 시간 시뮬레이션: 사람처럼 클릭 간 지연을 추가하여 봇 탐지를 피합니다.
- WebDriver 속성 제거: 일부 도구는
navigator.webdriver속성을 제거하여 탐지를 회피합니다.
예제 (Playwright)
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext({
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
viewport: { width: 1280, height: 720 },
locale: 'en-US'
});
const page = await context.newPage();
await page.goto('https://example.com');
// 명시적 대기: 요소가 표시될 때까지 기다립니다.
await page.waitForSelector('button.submit', { state: 'visible' });
// 텍스트 기반 셀렉터
await page.click('text=Submit');
await browser.close();
})();
일반적인 함정
- 고정된 대기 시간 사용:
time.sleep(5)는 비효율적이며 불안정합니다. 대신 명시적 대기를 사용하세요. - 탐지 무시: 많은 사이트가 봇을 차단합니다. 적절한 사용자 에이전트와 헤더 설정으로 회피하세요.
- 셀렉터 과의존: 하나의 셀렉터에 의존하지 말고, 여러 전략을 조합하여 안정성을 높이세요.
추가 리소스
라이선스
이 스킬은 MIT 라이선스 하에 제공됩니다.