Xpather는 페이지의 모든 요소에 대해 여러 XPath 변형을 생성하고 표현식을 실시간으로 테스트할 수 있습니다 — 작업하는 동안 열려 있는 사이드 패널에서.
사용 사례
- 웹 스크레이퍼를 작성하고 신뢰할 수 있는 셀렉터가 필요할 때
- 페이지 구조와 DOM 계층 구조 디버깅
- XPath 로케이터로 테스트 자동화 구축 (Selenium, Playwright, Puppeteer)
- 실제 페이지에서 XPath 구문 학습
- 모든 요소에 대한 최단 고유 경로를 빠르게 찾고 복사
작동 방식
- 도구 모음 아이콘에서 Xpather를 열거나 Ctrl+Shift+X (Mac에서는 Cmd+Shift+X)를 누릅니다.
- "요소 선택"을 클릭하거나 Alt 키를 누른 채 페이지 위를 호버 — 커서 아래의 요소가 실시간으로 하이라이트됩니다.
- Alt+클릭으로 선택. Xpather가 해당 요소에 대해 최대 7개의 XPath 변형을 즉시 생성합니다.
- 필요한 것을 원클릭으로 복사하거나 수동으로 편집하여 테스트.
XPath 전략
- ID — 요소의 id 속성을 사용한 직접적이고 고유한 셀렉터
- data-* — data 속성 대상 (data-testid, data-qa 등)
- 속성 — 구별되는 모든 속성에서 셀렉터 구축
- 텍스트 — 표시되는 텍스트 내용으로 요소 매칭
- 클래스 — CSS 클래스 이름으로 요소 찾기
- 최단 경로 — 루트에서의 가장 간결한 고유 XPath
- 절대 경로 — html에서 대상 요소까지의 전체 경로
각 변형은 고유 매치를 생성할 때 "최고" 배지를 표시합니다.
기능
- 요소 선택기: Alt+호버로 하이라이트, Alt+클릭으로 선택, Esc로 취소
- 라이브 평가: XPath를 입력하거나 붙여넣고 페이지에서 하이라이트된 매치 확인
- 매치 카운터: 표현식에 매치하는 노드 수 표시
- DOM 미리보기: 매치된 노드의 태그, 속성, 텍스트 검사
- 원클릭 클립보드 복사
- 사이드 패널 모드: 핸즈프리 워크플로를 위해 Xpather를 브라우저 사이드 패널에 고정
- 키보드 단축키: Ctrl+Shift+X로 선택기 토글
- 다크 및 라이트 테마
- 영어 및 러시아어 현지화
개인정보
- 네트워크 요청 제로 — 완전 오프라인 작동
- 텔레메트리, 분석, 추적 없음
- 계정 불필요, 로그인 불필요
- 모든 데이터는 브라우저에 보관
- 오픈 소스: https://github.com/investblog/xpather
권한
- activeTab — 선택기 활성화 시 현재 탭의 DOM에 접근
- scripting — 페이지에 요소 선택기 스크립트 주입
- webNavigation — 선택기 상태 재설정을 위한 페이지 내비게이션 감지
- sidePanel — 브라우저 사이드 패널에 XPath 결과 표시