구문 및 예제가 포함 된 궁극적 인 XPath 작성 치트 시트 자습서

ultimate xpath writing cheat sheet tutorial with syntax

모든 유형의 웹 요소에 대한 Ultimate XPATH를 작성하는 상위 20 가지 방법 (XPATH는 유효하지 않음) :

웹 애플리케이션은 클릭 할 버튼의 웹 요소, 텍스트 입력을위한 웹 요소 입력, 드롭 다운, 라디오 버튼 등과 같은 다양한 유형의 웹 요소로 구성됩니다.

이러한 웹 요소를 태그 또는 노드라고도합니다.

웹 애플리케이션 자동화에 관해서는 웹 요소를 찾고, 버튼 클릭, 입력 상자에 텍스트 입력, 체크 박스 선택, 라디오 버튼 선택과 같은 작업을 수행하는 자동화 스크립트를 작성하는 것으로 시작합니다. 위 또는 아래로 스크롤하고 마지막으로 동작의 순서대로 예상되는 동작을 확인합니다.

학습 내용 :

• XPath 란 무엇이며 어떻게 생겼습니까?
• 모든 웹 요소에 대한 XPath를 작성하는 20 가지 주요 방법
  • # 1) 역방향 조회
  • # 2) 변수 및 사용자 지정 값 사용
  • # 3) 'XML'태그, 'AND'등 사용
  • # 4) 속성 및 테이블 XPATH 사용
  • # 5) 속성, 테이블 및 텍스트 사용
  • # 6) 중첩 된 속성을 사용하여 XPATH 생성
  • # 7) 속성, Div 및 버튼을 결합하여 XPath 생성
  • # 8) CONTAINS, REVERSE LOOKUP 등을 사용하여 XPATH 생성
  • # 9) Relative, CONTAINS, REVERSE, FOLLOWING SIBLING 등을 사용한 XPath 생성
  • # 10) Attributes, Contains, Reverse, Preceding-Sibling, Divs 및 Span을 사용한 XPath 생성
  • # 11) 속성, XML 태그 등 사용
  • # 12) 전체 페이지를 보지 않고 대신 모든 링크를보고 포함하여 XPath 생성
  • # 13) 포함 및 속성 사용
  • # 14) 속성 사용, 형제 및 후손 따르기
  • # 15) 속성 사용, 형제, 후손 및 텍스트 따르기
  • # 16) 헤더와 텍스트 사용
  • # 17) 헤더 텍스트 사용, 형제, 경로 등
  • # 18) 속성 사용, 포함 및 선행 형제
  • # 19) ID 속성, 일부 특정 텍스트 및 역방향 조회를 사용하여 드롭 다운 찾기
  • # 20) 'id'속성을 결합하고 특정 텍스트가있는 링크 찾기
  • 결론
  • 추천 도서

XPath 란 무엇이며 어떻게 생겼습니까?

요소를 찾는 것은지도에서 누군가의 집을 찾는 것과 같습니다. 외부 도움없이 친구의 집을 찾을 수있는 유일한 방법은지도를 가지고 무엇을 찾을 지 (집) 알아야하는 것입니다.

이 비유를 우리의 경우에 적용하기 위해지도는 우리가 찾고자하는 특정 웹 요소와 함께 모든 웹 요소가 존재하는 DOM (HTML 태그, 자바 스크립트 등)으로 사용됩니다.

요소의 고유 주소 또는 경로가 발견되면 자동화 스크립트는 테스트 시나리오에 따라 이에 대해 몇 가지 작업을 수행합니다. 예를 들어, 버튼을 클릭하면 열리는 페이지의 URL을 확인하고 싶습니다.

그러나 유사한 태그, 동일한 속성 값, 동일한 경로가있을 수 있으므로 웹 요소의 고유 한 주소 / 경로를 찾는 것은 간단하지 않습니다. 이는“XPATH”라는 웹 요소에 대해 정확한 고유 주소를 생성하기 어렵게 만듭니다.

여기에서는 모든 유형의 웹 요소에 대해 유효하고 고유 한 XPATH를 생성하는 훌륭하고 효과적인 기술에 대해 자세히 알아 봅니다.

추천 읽기 => Selenium에서 XPath를 사용하여 웹 요소 식별

때로는 브라우저 확장을 사용하여 XPath를 쉽게 만들 수 있지만 자동화 테스트 경력을 쌓기 위해 기존 브라우저 확장이 작동하지 않는 수많은 상황에 직면했으며 자신의 창의력을 사용하여 자신 만의 맞춤형 XPath를 만들어야합니다. 나는 당신이 비슷한 상황에 직면했거나 직면 할 것이라고 확신합니다.

이 자습서에서는 코드가 변경 되어도 XPath가 항상 유효하게 유지되는 방식 (개발자가 전체를 다시 작성하지 않는 한)과 같이 웹 요소에 대한 궁극적 인 XPath를 만드는 방법에 대한 20 가지 최고의 방법을 살펴 봅니다. 기능 / 모듈).

이러한 모든 기술을 알고 있으면 자신의 XPath를 작성하는 마스터가되고 무효화 될 가능성이 거의없이 킬러 XPath를 작성할 수 있습니다.

먼저 XPath 구문을 이해하고 각 부분을 정의 해 보겠습니다.

아래 이미지는 각 부분에 대한 설명과 함께 XPath의 모양을 보여줍니다.

• // : 입력, div 등과 같은 현재 노드를 선택합니다.
• 태그 이름 : 웹 요소 / 노드의 태그 이름
• @ : 속성 선택
• 속성: 노드 / 특정 웹 요소의 속성 이름
• 값: 속성 값

내 자동화 테스트 스크립트의 80 %가 XPath로 인해 실패했다는 몇 가지 팁을 여기에서 공유하고 싶습니다. 이는 제공된 XPath에 대한 여러 웹 요소가 있거나 XPath가 유효하지 않거나 페이지가 아직로드되지 않았기 때문에 발생합니다.

따라서 테스트 케이스가 실패 할 때마다 :

1. XPath를 복사하십시오.
2. DOM의 브라우저 (F12 또는 개발자 도구 창)에서 검색하여 유효한지 확인합니다 (아래 이미지 참조).

프로 유형 1 : 고유하고 DOM에서 두 번 검색 할 때 다른 웹 요소가 나타나지 않는지 확인하십시오.

프로 유형 2 : 때로는 타이밍 문제가 있습니다. 즉, 스크립트가 검색하는 동안 웹 요소 / 페이지가 아직로드되지 않았으므로 대기 시간을 추가하고 다시 테스트합니다.

프로 유형 3 : 웹 요소를 검색하기 전에 전체 DOM을 인쇄 해보십시오. 이렇게하면 웹 요소가 DOM에 있는지 여부를 콘솔을 통해 알 수 있습니다.

XPath 조회에 대해 자세히 알아보기 전에 공유하고 싶은 한 가지 중요한 점은 개발 팀에 직접 액세스 할 수 있거나 팀이 현재 위치에있는 경우 개발 팀에 고유 ID를 제공하도록 요청하는 것입니다. 자동화에 사용하려는 각 웹 요소 또는 적어도 하나를 사용하면 많은 시간을 절약 할 수 있습니다.

이것이 가능하지 않다면 창의력을 발휘하고 자신 만의 맞춤형 XPath를 만들어야 할 수도 있습니다. 이것이 우리가 지금 배울 것입니다.

모든 웹 요소에 대한 XPath를 작성하는 20 가지 주요 방법

킬러 XPath를 만드는 20 가지 방법에 대해 자세히 알아 보겠습니다.

# 1) 역방향 조회

버튼을 클릭하고 싶은데 비슷한 버튼이 있다고 가정 해 보겠습니다. 두 버튼 모두 id 속성이 있지만 동적이며 두 버튼 요소에서 고유 한 속성이 없습니다.

아래 시나리오에서 'Test Interactive'의 'Setting'버튼을 클릭합니다.

암호

'설정'버튼을 보면 두 코드가 비슷합니다. 예를 들어 ID, 이름, 값, 포함 등과 같은 전통적인 방법을 사용하면 어느 것도 작동하지 않습니다.

// * (contains (text (),‘Setting’)), 이렇게하면 두 개의 웹 요소가 생성됩니다. 따라서 그것은 고유하지 않습니다.

여기에 최종 전략이 있습니다.

>> 먼저 고유하고 가장 가까운 태그를 찾으십시오.

>> 둘째,이 경우에는 (text (),‘TEST Interactive’)가 포함 된 의도 한 웹 요소와 가장 가까운 웹 요소를 찾습니다. 이제 'Setting'버튼이있는 위치와 동일하지만 클릭하려면 먼저 아래와 같이 이중 점을 사용하여 메인으로 이동해야합니다.

>> 보시다시피 두 번째 웹 요소가 '설정'버튼 인 수준에 있습니다. 여기에는 두 개의 버튼이 있으며 두 번째 버튼 인 '설정'버튼으로 이동하겠습니다. 끝에‘/ button (2)’를 추가하면 아래와 같이‘설정’버튼에 대한 고유 한 XPATH를 얻을 수 있습니다.

최종 XPATH :

웹 요소 유형을 '버튼'에서 다른 것으로 변경할 수 있다고 생각되는 경우 생성하는 또 다른 방법이 있습니다.

또는 'following-sibling'사용

# 2) 변수 및 사용자 지정 값 사용

파일을 업로드 / 다운로드하는 FTP ( 'File Transfer Protocol') 기능이있는 웹 애플리케이션이 있고 다운로드 링크를 클릭하여 특정 파일을 다운로드 할 수있는 테스트 사례가 있다고 가정 해 보겠습니다.

먼저 찾고있는 파일 이름을 변수로 정의 할 수 있습니다.

String expectedfileName =“Test1”;

이제 XPATH를 사용하여 실제 파일 이름을 찾을 수 있습니다.

위의 XPath에서…‘/ tr / td (1) .getAttribute (“title”)’은 특정 행과 첫 번째 열로 이동하여 제목 속성의 값을 가져옵니다. 실제 파일 이름을 다른 변수에 저장할 수 있습니다.

예상 파일 이름과 실제 파일 이름이 모두 있으면 둘을 비교할 수 있으며 둘 다 일치하면 다운로드 링크를 클릭하면됩니다.

또한 각 행을 통해 루프를 만들고 찾을 때까지 파일 이름을 계속 확인할 수 있습니다.

# 3) 'XML'태그, 'AND'등 사용

사용자 정의 태그를 사용하고 다른 조건을 추가하여 고유 한 XPATH를 생성 할 수 있습니다.

예를 들어, 의도 한 웹 요소가 기본 태그에 있고 주소 태그가 여러 개 있지만 특정 태그 만 찾고 싶다고 가정 해 보겠습니다. 모든 주소 태그에는 클래스 속성이 있으므로 시작할 수 있습니다.

의도 한 웹 요소가 'Testing'이라는 텍스트가 포함 된 태그에 있음을 확인했습니다.

결과적으로 여러 웹 요소가 발견되었습니다. 따라서 더 고유하게 만들기 위해 'id'와 같은 다른 조건을 추가하여 마침내 찾고있는 웹 요소를 가리킬 수 있습니다.

# 4) 속성 및 테이블 XPATH 사용

테이블 내부에 배치 된 웹 요소에 입력하고 테이블이 양식 요소 내부에 배치되었다고 가정 해 보겠습니다.

DOM 내에서 이름이 'myForm'인 모든 양식을 찾을 수 있습니다.

이제 모든 양식에서 ID가‘tbl_testdm’인 테이블을 찾습니다.

테이블 내에서 특정 행과 열로 이동합니다.

셀 내에 여러 입력이있는 경우 값이 'Open RFS'인 입력을 찾으면 필드의 최종 XPath가 제공됩니다.

# 5) 속성, 테이블 및 텍스트 사용

의도 한 웹 요소가 패널 테이블에 있고 몇 가지 공통 텍스트가 있다고 가정합니다.

먼저이 경우 'TITLE'인 고유 속성이있는 패널로 시작하십시오.

이제 모든 테이블 태그를 탐색하십시오.

모든 표에서 '저자'라는 텍스트가있는 열을 찾습니다.

최종 XPath는 다음과 같습니다.

# 6) 중첩 된 속성을 사용하여 XPATH 생성

중첩 된 속성을 사용하여 대상 웹 요소의 XPath를 생성 할 수도 있습니다. 예를 들어, 이 경우 DOM에서 특정 속성을 찾은 다음 그 안에서 다른 속성을 찾습니다.

# 7) 속성, Div 및 버튼을 결합하여 XPath 생성

예를 들어, 아래 XPath에서 id (상대 XPath), 일부 div 태그 및 버튼을 사용하여 대상 웹 요소를 찾을 수있었습니다.

# 8) CONTAINS, REVERSE LOOKUP 등을 사용하여 XPATH 생성

한때 직접 식별이없는 드롭 다운이있었습니다. CONTAINS, REVERSE, DIV, 속성을 사용하여 아래와 같이 최종 XPATH를 만들어야했습니다.

# 9) Relative, CONTAINS, REVERSE, FOLLOWING SIBLING 등을 사용한 XPath 생성

응용 프로그램이 그래프를 표시하고 각 그래프 값을 확인해야하는 상황이있었습니다. 하지만 안타깝게도 각 값에는 고유 한 식별이 없었기 때문에 상대, 포함, 역, 후속 형제 및 div 태그를 결합한 하나의 그래프 값에 대해 아래와 같이 최종 XPATH를 생각해 냈습니다.

# 10) Attributes, Contains, Reverse, Preceding-Sibling, Divs 및 Span을 사용한 XPath 생성

다른 알람 데이터의 유효성을 검사해야하고 각 알람 값이 특정 계산 또는 타이밍에 따라 표시되었습니다. 각 값을 캡처하기 위해 속성, 포함, 반전, 선행 형제, div 및 범위 태그를 사용하는 아래 XPATH를 찾아야했습니다.

# 11) 속성, XML 태그 등 사용

아래 XPATH, 속성 및 XML 태그에서 시퀀스는 웹 요소의 최종 고유 주소를 찾는 데 사용됩니다.

다음 중 가장 인기있는 테스트 프레임 워크 중 하나는 무엇입니까?

# 12) 전체 페이지를 보지 않고 대신 모든 링크를보고 포함하여 XPath 생성

아래 XPath는 'Parameter Data Manual Entry'라는 텍스트를 포함하는 전체 페이지의 링크 만 찾습니다.

# 13) 포함 및 속성 사용

# 14) 속성 사용, 형제 및 후손 따르기

# 15) 속성 사용, 형제, 후손 및 텍스트 따르기

# 16) 헤더와 텍스트 사용

웹 요소가 특정 텍스트가있는 헤더 인 경우 XPath는 다음과 같을 수 있습니다.

# 17) 헤더 텍스트 사용, 형제, 경로 등

# 18) 속성 사용, 포함 및 선행 형제

고유 한 속성이없는 범위가 있으면 절대, 포함, 선행 형제 및 다른 절대 경로를 결합하여 XPATH를 만들었습니다.

# 19) ID 속성, 일부 특정 텍스트 및 역방향 조회를 사용하여 드롭 다운 찾기

# 20) 'id'속성을 결합하고 특정 텍스트가있는 링크 찾기

결론

킬러 XPATH를 작성할 때 코드를 얼마나 잘 이해하고 분석 하느냐에 달려 있습니다. 코드를 더 많이 이해할수록 효과적인 XPATH 작성에서 찾을 수있는 방법이 많아집니다.

XPath를 작성하는 첫 번째 단계는 대상 웹 요소에 가장 가까운 고유 한 웹 요소를 찾고 속성, DIV, 팔로 잉, 포함 등과 같이 위에서 설명한 다양한 기술을 사용하여 계속 더 가까워지는 것입니다.

결국 관심있는 모든 웹 요소에 고유 한 ID를 추가하도록 개발 팀에 요청하면 삶이 정말 쉬워 질 것이라고 다시 한 번 말씀 드리고 싶습니다.

스프린트주기 또는 새로운 요구 사항에 대한 작업이 시작되고 팀이 새 모형과 공유 될 때마다 항상 모든 모형을 검토하고 내 마음 속에 잠재적 인 자동화 테스트 사례를 생각하고 사용할 모든 잠재적 인 웹 요소 목록을 준비합니다. 자동화 테스트에서 내 자신의 ID를 준비하십시오.

제안 된 ID와 함께 모든 웹 요소의 목록이 완성되면 개발자에게 미리 공유하여 개발 코드에 사용합니다. 이런 식으로 XPATH 작성 전투를 쉽게 만들어 항상 고유 ID를 얻습니다.

다음은 XPATH를 작성하는 다양한 방법의 조합 목록입니다.

1. “// * (@ id =’rcTEST’) // * (contains (text (),‘TEST Interactive’)) /../ button (2)”
2. “// * (@ id = 'rcTEST') // * (contains (text (),‘TEST Interactive’)) /..//* (contains (text (),‘Setting’))”
3. “// * (@ id =’rcTEST’) // * (contains (text (),‘TEST Interactive’)) / following-sibling :: button”
4. 'String actualFileName = WebDriverAccess.getDriver (). findElement (By.xpath ('// * '+ fileName +'/ tr / td (1) ')). getAttribute ('title ');'
5. WebDriverAccess.getDriver (). findElement (By.xpath ( '// *'+ fileName + '/ tr / td (4)')). click ();
6. '// address (@ class = 'ng-scope ng-isolate-scope') // div (contains (., Testing ') and @ id ='msgTitle ')'
7. “// * (@ name =’myForm’) // table (@ id =’tbl_ testdm’) / tbody / tr / td (6) /
8. 입력 (@ value =’Open RFS’)”
9. “// * (@ title =’Songs List Applet’) // table // td (contains (text (),’Author’))”
10. “// * (@ id =’parameters’) // * (@ id =’testUpdateTime’)”)”
11. “// * (@ id = 'MODEL / PLAN') / div (1) / div (2) / div (1) / div (1) / widget / section / div (1) / div / div (1) / div / div / button (1)”
12. “// * (contains (text (),’시계 다이얼)) /../ div / select (@ data-ng-model =’context.questions (subqts.subHandleSubId)’)”),”
13. “// * (@ id = '연구 / 계획') // * (contains (@id, 'A4')) /../../ following-sibling :: div (1) / div (1) / 스팬 (1) / 스팬 (1)”
14. “// * (@ id = 'ALARMDATA') // * (contains (@id, 'AFC2')) /../../ preceding-sibling :: div (1) / div (1) / span ( 1) / 스팬 (1)”
15. “// * (@ id = '연구 / 검토') // widget / section / div (1) / div / div (2) / div (1) / div (3) / div (1) // span ( @ class = 'details')”
16. “//a(contains(.,’Parameter Data Manual Entry’))”
17. “// * (contains (@ style,’display : block; top :’)) // input (@ name =’daterangepicker_end’)”
18. “// * (@ id =’dropdown-filter-serviceTools’) / following-sibling :: ul / descendant :: a (text () =’Notepad’)”
19. “// * (@ id =’dropdown-filter-serviceTools’) / following-sibling :: ul / descendant :: a (text () =’Trigger Dashboard’)”
20. “// h3 (text () =’Internal Debrief’)”
21. “// h3 (contains (text (), '헬륨 수준')) / following-sibling :: div / label / input”
22. “// div (div (p (contains (text (), 'Status')))) / preceding-sibling :: div / div / span (3) / span”
23. “// * (@ id =’COUPLING’) // * (contains (text (),’COUPLE Trend’)) /../ div / select”
24. “// * (@ id =’ffaHeaderDropdown’) // a (contains (text (),’Start Workflow’))”

이 유익한 기사가 XPath 작성에 대한 지식을 풍부하게 해주기를 바랍니다.

작성자 약력 :이 기사는 9 년 이상의 경력에서 다양한 경험과 기술을 보유한 IT 전문가 Adnan Arif가 작성했습니다.

추천 도서

• 초보자를위한 심층 이클립스 튜토리얼
• 예제가 포함 된 Python DateTime 자습서
• Unix Cat 명령 구문, 예제 옵션
• 구문, 옵션 및 예제가 포함 된 Unix 정렬 명령
• 예제가 포함 된 Unix 쉘 스크립팅 자습서
• 예제와 함께 텍스트 자습서로 셀레늄 찾기 요소
• 실습 예제가 포함 된 Python 주요 함수 자습서
• JMeter의 Xpath 추출기 포스트 프로세서