ID Selector · Chrome Extension · Free

AI와 함께 만드는 E2E 테스트,
ID Selector로 10배 빠르게

ID Selector(구 E2E Prompt Builder)는 페이지 위에서 원하는 요소의 id/셀렉터를 키보드로 탐색하고, 클릭만으로 단계형 시나리오 프롬프트를 자동으로 쌓아줍니다. 완성된 프롬프트를 ChatGPT/Claude 같은 AI에 그대로 붙여넣으면 Playwright/Cypress 테스트 코드 초안을 바로 얻을 수 있어요.

GitHub에서 무료로 설치하기 사용법 보기

AI‑Ready

AI가 이해하기 좋은 포맷

ID/셀렉터 자동 수집

신뢰도 높은 선택자

키보드 중심

흐름 끊김 최소화

데모는 이 서버에서 직접 호스팅됩니다. 첫 로딩은 약간 걸릴 수 있어요.

핵심 기능

ID/셀렉터 자동 추출

현재 요소의 id와 안정적인 CSS 셀렉터를 우선순위 규칙으로 자동 생성합니다. “어떤 선택자를 써야 하지?” 고민이 줄어들어요.

Zustand/Redux 글로벌 상태 스냅샷

앱이 Zustand 혹은 Redux를 사용하고 있다면, 현재 global state를 자동으로 캡처해 시나리오 스냅샷으로 남깁니다. Cmd+Click / Ctrl+Click으로 요소를 선택하면 이 상태 스냅샷이 프롬프트에 함께 포함되어 AI가 더 정확한 테스트 코드를 생성할 수 있어요.

키보드로 DOM 탐색

화살표 키로 부모/자식 요소를 이동하며 하이라이트할 수 있어요. 마우스 이동 없이 시나리오 캡처 흐름을 유지합니다.

클릭만으로 단계 추가

요소를 클릭하면 모달을 닫지 않고도 “{셀렉터} 클릭하고” 같은 동작 단계가 자동으로 추가됩니다.

의도까지 한 번에 기록

Ctrl+Click / Cmd+Click 또는 Space로 모달을 열어 단계 설명을 바로 적을 수 있어요. AI가 맥락을 이해하기 좋아집니다.

더블 스페이스 = ID 복사

Space를 빠르게 두 번 누르면 모달 없이 현재 요소의 id가 바로 복사됩니다.

자동 스냅샷 저장

입력 중 프롬프트가 3초마다 자동 저장됩니다. 새로고침 후에도 최근 단계와 커서 위치를 쉽게 복원할 수 있어요.

AI와의 협업에 최적화된 워크플로우

ID Selector가 만든 시나리오 프롬프트는 사람이 읽기 쉽고, AI가 테스트 코드로 바꾸기 좋은 구조입니다. Zustand/Redux 기반 앱에서는 글로벌 상태 스냅샷까지 함께 담겨 더 정확한 테스트 생성에 도움이 됩니다.

동작 캡처

클릭/이동/입력 흐름을 기록하며 안정적인 셀렉터를 수집합니다.

의도 한 줄 추가

각 단계에 “왜 이 동작을 하는지” 짧게 적어 AI의 이해도를 높입니다.

프롬프트 복사

생성된 시나리오를 그대로 복사해 AI 도구에 바로 넣을 수 있습니다.

AI로 코드 생성

ChatGPT/Claude 등에 붙여넣으면 Playwright/Cypress 코드 초안을 즉시 얻습니다.

사용 흐름 (4단계)

ID Selector 켜기
크롬 확장 아이콘을 눌러 하이라이트 모드를 켠 뒤 페이지에서 요소를 가리킵니다.
키보드로 이동 & 선택
위/아래 화살표로 DOM을 이동해 원하는 요소를 하이라이트하고, 클릭하면 단계가 쌓입니다.
설명 작성 & 복사
모달에서 단계 설명을 적고 Enter로 저장합니다. Copy로 전체 프롬프트를 복사하세요.
AI로 테스트 코드 생성
복사한 프롬프트를 AI에 붙여넣어 Playwright/Cypress 테스트 코드 초안을 바로 얻습니다.

주요 단축키

상황	단축키	기능
하이라이트 모드	↑	우선순위에 맞는 부모 요소로 이동
하이라이트 모드	↓	다음 일치하는 하위 요소로 이동
하이라이트 모드	클릭	모달 없이 “{셀렉터} 클릭하고” 단계 추가
하이라이트 모드	Ctrl+Click / Cmd+Click	모달 열고 단계 추가 (Zustand/Redux 사용 시 global state 스냅샷 포함)
하이라이트 모드	Space	모달 열고 현재 셀렉터 추가
하이라이트 모드	Space 두 번	모달 없이 현재 요소의 id 복사
프롬프트 모달	Enter	새 단계 번호 추가 후 모달 닫기
프롬프트 모달	Cmd+Enter / Ctrl+Enter	새 단계 번호 추가 후 모달 유지
모든 상황	Escape	모달 닫기/열기 토글

설치 방법

GitHub 저장소를 내려받습니다.
저장소 루트에서 npm install을 실행합니다.
npm run build로 dist/를 생성합니다.
chrome://extensions/에서 개발자 모드를 켜고 dist/ 폴더를 불러옵니다.

최신 릴리스 받기 피드백/버그 제보

FAQ

정말 무료인가요?

네. 개인/팀/상업적 용도 모두 무료이며 소스가 공개되어 있습니다.

내 데이터가 서버로 전송되나요?

아니요. 프롬프트와 스냅샷은 브라우저의 localStorage에만 저장됩니다.

어떤 테스트 도구와 같이 쓰면 좋나요?

Playwright, Cypress, Selenium 등 어떤 E2E 프레임워크든 가능합니다. 생성된 프롬프트를 AI 도구에 넣어 코드로 변환해 보세요.

개선 제안이나 기능 요청은 어디에 하나요?

GitHub Issues로 남겨주세요: issues 페이지

AI와 함께 만드는 E2E 테스트,ID Selector로 10배 빠르게