CSS 선택기 / XPath를 얻는 방법

Autify에서 시나리오에 로케이터를 추가할 때 CSS 선택기/XPath를 지정하는 방법을 잘 모르는 경우 Google Chrome 개발자 도구(이하 개발자 도구)에서 대상 요소의 CSS 선택기/XPath를 확인할 수 있습니다.

이 페이지에서는 개발자 도구를 사용하여 요소의 CSS 선택기/XPath를 가져오는 방법을 설명합니다.
보다 안정적으로 엘리먼트를 지정하는 방법과 획득 후 발생하는 오류에 대한 자세한 내용은 관련 문서를 참고하시기 바랍니다.

개발자 도구를 실행하는 방법

Chrome 개발자도구를 실행하는 방법은 세 가지가 있습니다.

1. Chrome 오른쪽 상단 모서리에 있는 [︙] 아이콘을 클릭합니다.

   1. Chrome 오른쪽 상단 모서리에 있는 [︙] 아이콘을 클릭합니다.
   2. 메뉴에서 [추가 도구] > [개발자 도구]를 클릭합니다.
      

2. 마우스로 오른쪽 클릭 메뉴를 엽니다.

   1. 대상 요소를 마우스 오른쪽 버튼으로 클릭하여 메뉴를 표시합니다.
   2. 검사]를 클릭하여 개발자 도구를 실행할 수 있습니다.
      

3. 단축키 사용
   다음 단축키를 사용하여 Chrome 개발자 도구를 실행할 수 있습니다:

   Windows: Ctrl + Shift + I
   Mac: Cmd + Opt + I
   

대상 요소에 대한 CSS 선택기/XPath를 가져오는 방법

Autify 홈페이지](https://autify.com/) "더 빠른 릴리스 주기 AI 기반 소프트웨어 테스트 자동화"의 제목을 예로 들어보겠습니다.

1. 개발자 도구에서 선택 모드로 전환하기

   1. 개발자 도구에서 요소 탭이 열려 있는지 확인합니다.
   2. 개발자 도구의 왼쪽 상단 모서리에 있는 아이콘을 클릭하여 선택 모드로 전환합니다.
      

2. 대상 요소 선택

   1. 개발 도구를 선택 모드로 설정한 상태에서 마우스로 페이지에서 대상 요소를 선택합니다.
   2. 해당 요소에 해당하는 소스 코드가 선택됩니다.
      

3. 대상 요소의 CSS 선택기/XPath 가져오기

   1. 개발자 도구에서 선택한 소스 코드에 마우스 커서를 이동하고 마우스 오른쪽 버튼을 클릭합니다.
   2. 아래 각 작업을 수행하면 대상 요소의 값이 클립보드에 복사됩니다.
      CSS 선택기: 메뉴에서 [복사] > [선택기 복사]를 클릭합니다.
      XPath: 메뉴에서 [복사] > [선택기 복사]를 클릭합니다.
   3. 3. 복사한 값을 텍스트 편집기에 붙여넣습니다.

이 예제에서는 다음과 같은 값을 얻었습니다.

• CSS 선택기

body > main > div:nth-child(3) > div > div > div > div.web-steps-heading.text-center > h3

• XPath

/html/body/main/div[3]/div/div/div/div[1]/h3

CSS 선택기 / XPath 유효성 검사 방법

지정 방식을 변경했을 때 가져온 CSS 선택기 / XPath가 의도한 요소인지 확인하려면 개발자 도구의 "요소" 패널에서 다음 명령어를 사용하여 검색 창을 호출하고 요소를 검색할 수 있습니다.

Windows：Ctrl + F
macOS：command + F

CSS 선택기를 예로 들어 보겠습니다(XPath도 같은 방법으로 확인할 수 있습니다.).
CSS 선택기를 다음과 같이 변경하고 의도한 요소가 지정되었는지 확인합니다.

변경 전：body > main > div:nth-child(3) > div > div > div > div.web-steps-heading.text-center > h3
변경 후：.web-steps-heading.text-center > h3

오른쪽 하단의 검색 창에 CSS 선택기를 입력하면 요소를 지정할 수 있는 경우 해당 요소가 강조 표시됩니다.

관련 문서

• 요소 지정을 위한 로케이터 추가하기
• CSS 선택기를 효과적으로 사용하기
• 요소를 찾을 수 없음