DOM 경로 탐색기를 사용하면 페이지의 모든 요소 위에 마우스를 올려 고유한 CSS 선택자, 축약 선택자, XPath 및 바로 사용할 수 있는 querySelector 스니펫을 확인할 수 있습니다. 요소를 클릭하여 고정(lock)한 뒤 부모/자식/형제 버튼으로 DOM 트리를 탐색해 보세요. Selenium, Puppeteer, Playwright, Cypress 사용자에게 필수적인 도구입니다.
자동화 테스트, 웹 스크래퍼 또는 북마클릿을 작성할 때 선택자(Selector) 지정은 필수적이지만, 특정 요소에 대해 안정적이고 고유한 선택자를 찾는 일은 매우 지루합니다. 보통 개발자 도구를 열고, 분석하고, 마우스 오른쪽 버튼을 눌러 선택자를 복사하지만 그 결과가 항상 고유하거나 안정적이지는 않습니다. DOM 경로 탐색기는 이 과정을 클릭 한 번으로 해결합니다. 도구를 활성화하고 페이지의 요소 위로 마우스를 가져가면 보라색으로 하이라이트됩니다. 클릭하여 요소를 고정하면 패널에 고유 경로 기반 CSS 선택자, 축약 선택자(태그 + 클래스 또는 ID), 절대 XPath, 그리고 스크립트에 바로 붙여넣을 수 있는 document.querySelector('...') 스니펫 등 4가지 형식이 표시됩니다. 요소를 고정한 후에도 부모 / 첫 번째 자식 / 이전 형제 / 다음 형제 버튼을 사용하여 포커스를 잃지 않고 DOM 트리를 자유롭게 이동할 수 있습니다. Playwright나 Cypress에서 중요하게 사용되는 data-testid 속성도 감지하여 최우선으로 보여줍니다. 또한 태그, ID, 클래스, 크기(Bounding size), 디스플레이/위치 속성 등 유용한 컨텍스트 정보도 함께 제공합니다.
마우스를 페이지 위로 움직이면 요소가 보라색으로 하이라이트됩니다. 개발자 도구의 검사기(Inspector)를 열지 않고도 요소를 바로 고정할 수 있습니다.
고유 CSS 경로, 축약 선택자, 절대 XPath, querySelector 스니펫을 지원합니다. 사용 중인 환경에 맞는 형식을 선택하세요.
요소를 선택한 후에도 부모 / 자식 / 형제 버튼을 사용하여 선택 요소를 다시 고를 필요 없이 DOM 트리를 이동할 수 있습니다.
각 선택자마다 개별 복사 버튼이 있습니다. 스크립트에 필요한 형식을 가져와 테스트 코드나 스크래퍼에 바로 붙여넣으세요.
태그, ID, 클래스, 크기, 디스플레이 방식, 위치 정보를 표시하여 다시 검사할 필요 없이 빠른 개요를 제공합니다.
요소에 ID가 있으면 고유 CSS에 #id를 사용합니다. data-testid 속성이 있으면 Playwright/Cypress에서 활용할 수 있게 우선적으로 표시합니다.
테스트할 요소를 선택하고 선택자를 복사하여 테스트 코드에 붙여넣으세요. 더 이상 고유 경로를 찾기 위해 고군분투할 필요가 없습니다.
스크래핑 대상의 리스트 항목에 대한 구조적 선택자를 찾으세요. 안정성 요구 조건에 따라 축약 선택자나 경로 기반 선택자 중 선택할 수 있습니다.
요소를 고정하고 해당 경로를 복사하여 CSS가 적용되지 않는 이유를 조사하세요. 고유한 선택자가 해당 요소의 전체 트리 위치를 보여줍니다.
document.querySelector(...) 스니펫을 개발자 도구 콘솔에 바로 붙여넣어 인터랙티브한 디버깅을 시도해 보세요.
접근성 감사 시, XPath를 요구하는 axe-core나 기타 접근성 도구에 요소를 전달하기 위해 XPath를 추출해 보세요.
DevSuite Pro 독에서 경로 탐색기(Path Finder) 아이콘을 클릭합니다. 즉시 요소 선택 모드가 활성화됩니다.
페이지 위로 마우스를 움직이세요. 마우스가 지나가는 요소마다 보라색으로 하이라이트됩니다. 스크롤하여 대상 요소를 찾으세요.
원하는 요소를 클릭하세요. 선택 모드가 종료되고 패널에 선택자 형식, 컨텍스트 정보, 복사 버튼이 표시됩니다.
부모/자식/형제 버튼을 사용하여 선택 범위를 세밀하게 조정하거나, '요소 선택'을 다시 클릭하여 새로운 요소를 고를 수 있습니다.
필요한 형식(CSS, XPath, querySelector) 옆의 복사 버튼을 클릭하세요. 테스트, 스크래퍼 또는 콘솔에 바로 붙여넣으시면 됩니다.
