"Selenium xpath"의 두 판 사이의 차이
DB CAFE
(→형제/자식/조상 요소 찾기) |
(→형제/자식/조상 요소 찾기) |
||
101번째 줄: | 101번째 줄: | ||
## 먼저 XPath가 //section [@ id =’content’] 인 요소를 찾습니다. | ## 먼저 XPath가 //section [@ id =’content’] 인 요소를 찾습니다. | ||
## 그 다음 위의 XPath가 속한 노드에서 모든 div 요소를 찾기 시작합니다. | ## 그 다음 위의 XPath가 속한 노드에서 모든 div 요소를 찾기 시작합니다. | ||
− | + | #: <source lang=java> | |
//section[@id=’content’]//ancestor::div | //section[@id=’content’]//ancestor::div | ||
</source> | </source> |
2021년 5월 27일 (목) 17:38 판
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
목차
1 Xpath 개요[편집]
Selenium WebDriver를 사용하여 웹 애플리케이션을 자동화 할 때 가장 어려운 작업 중 하나는 웹 요소를 찾는 것입니다.
notifications_active* Selenium WebDriver 에서 요소(Element)를 찾는 로케이터(Locator)
- Id
- CSS
- XPATH
- Class Name
- Name
- Tag Name
- Links Text
- Partial Links Text
1.1 XPath 란?[편집]
notifications_active*
- XML 경로 언어 인 XPath는 XML 문서에서 노드를 선택하기위한 쿼리 언어.
- XPath 언어는 XML 문서의 트리 표현 (계층 적)을 기반으로하며 다양한 기준에 따라 노드를 선택하여 트리를 탐색 할 수있는 기능을 제공.
- XPath로 요소를 찾는 것은 많은 유연성으로 매우 잘 작동합니다.
- 느린 성능으로 인해 가장 선호되지 않는 로케이터 전략.
- XPath와 CSS의 중요한 차이점 중 하나는 XPath를 사용하여 DOM 계층 구조에서 요소를 앞뒤로 검색 할 수 있지만 CSS는 순방향으로 만 작동한다는 것입니다. XPath를 사용하여 자식 요소를 사용하여 부모 요소를 찾을 수 있음을 의미합니다.
- XPath는 대소 문자를 구분하는 언어입니다.
- HTML 페이지는 DOM에서 XHTML 문서로 표시되고 요소를 찾기 위해 Selenium WebDriver에서 사용되므로 모든 주요 브라우저는 XPath를 지원.
- XPath를 찾을때 Firefox 브라우저 Firebug 및 XPath Checker 추가 기능 및 Chrome XPath Helper 및 Toggle XPather 플러그인 사용 추천
1.2 XPath 표현식[편집]
1.2.1 절대경로 (Absolute Path)[편집]
- 절대 경로는 계층 문서 내에서 노드를 선택하기 위해 모든 단일 노드를 지정하는 것을 의미합니다.
- 항상 루트 노드에서 시작합니다.
- 예시
/html/body/div[2]/div/div[4]/div/ul/li[3]/a/span
1.2.2 상대경로 (Relative Path)[편집]
- 상XPath 표현식은 매우 길 수 있습니다.
- 중첩 된 각 관계에 대해 100% 존재해야 함. 그렇지 않으면 로케이터가 작동하지 않습니다.
- 이러한 이유로 Relative XPath 표현식을 사용하는 것이 좋습니다.
- 상대 XPath 표현식에서는 선택한 노드에서 시작할 수 있습니다.
- 위의 절대 경로를 다음 상대 경로에도 쓸 수 있습니다.
//div[@id='navigation']/ul/li[3]/a/span
1.2.3 슬래쉬 “/” 와 "//" 의미[편집]
- XPath의 어느 곳에서나 하나의 슬래시 '/'는 상위 요소 내에서 바로 요소를 찾는 것을 의미합니다.
- 이중 슬래시‘//’는 상위 요소 내에서 하위 또는 손자 (하위) 요소를 찾는 것을 나타냅니다.
- 두가지 예시 참조
- 예시 1)
.//div[@id='products']/a/img
- 'a' 태그의 하위 인 html 문서에서 이미지 태그를 찾으려고합니다.
- 그리고 a 태그는 div 태그의 자식입니다.
- 동일한 img 태그는 다음에서 찾을 수 있습니다.
.//div[@id='products']//img
1.2.4 점 “.” 와 “..” 의미[편집]
- "." 은 XPath에서 현재 노드를 지정하는 데 사용됩니다.
- ".." 은 문서 트리에서 한 단계 위로 이동하는 데 사용됩니다.
- 즉, 현재 노드의 부모를 찾습니다.
- 예시)
.//div[@id='products']/..
- 위 표현식은 현재 노드의 부모 노드를 찾습니다.
1.2.5 "@”의 의미[편집]
- "@"는 문서 트리에서 속성을 선택하는 데 사용됩니다.
- 위의 예시에서 "@"로 속성 ID를 지정하고‘’안에 값 'products' 지정 함.
1.2.6 " * " 의 의미[편집]
- XPath는 "*"와 같은 와일드 카드를 지원합니다.
- 때로는 상대 경로를 찾는 데 많이 유용합니다.
- 예시 )
.//*[text()='Home']
.//a[@*='Home']
- 이 경우 값이 'home'인 속성을 가진 요소를 찾으려고합니다.
- 이 경우 속성 이름은 신경 쓰지 않습니다.
1.2.7 형제/자식/조상 요소 찾기[편집]
1.2.7.1 조상 (Ancestor)[편집]
- ancestor 요소를 찾아 최상위 노드로 설정 한 다음 해당 노드에서 요소를 찾기 시작합니다.
- 먼저 XPath가 //section [@ id =’content’] 인 요소를 찾습니다.
- 그 다음 위의 XPath가 속한 노드에서 모든 div 요소를 찾기 시작합니다.
//section[@id=’content’]//ancestor::div
- //section[@id=’content’]//ancestor::div[1] – Returns 53 nodes
- //section[@id=’content’]//ancestor::div[2]- Returns 33 nodes
- //section[@id=’content’]//ancestor::div[3] – Returns 24 nodes
- //section[@id=’content’]//ancestor::div[4]- Returns 19 nodes
1.2.8 XPath 유용한 팁[편집]
- 대부분의 경우 로케이터의 속성이 동적으로 생성 될 때 문제가 발생합니다.
- 그리고 지금은 거의 모든 웹 애플리케이션이이 전략을 따르고 있습니다.
1.2.8.1 “contains” 키워드[편집]
- "contains ()"는 속성이름과 속성 값 , 두 개의 인수를받는 함수입니다.
.//div[contains(@id, 'search')]
- 'search' 값이 포함 된 'id'라는 속성이 포함 된 div 태그를 찾습니다.
- 정확히 'search'일 필요는 없지만 패턴이 일치해야합니다.
- 함수‘contains ()’는 패턴을 일치시켜 속성 이름을 값과 일치시킵니다.
- 다음은‘contains ()’함수의 또 다른 사용법
.//span[contains(text(), 'Hot')]
- 이 표현식은 텍스트로 'Hot'이 포함 된 span 태그를 찾습니다.
- 키워드 "text ()"를 사용한 표현식 :
- 앞에서 본 예에서는‘text ()’함수를 사용했습니다.
- 'text ()’함수의 특정 텍스트가있는 특정 태그를 찾습니다.
.//span[text()= 'Home']
1.2.8.2 “starts-with()”키워드[편집]
- starts-with ()’ 속성 이름과 속성값 이라는 두 개의 인수를 사용합니다
.//div[starts-with(@class, 'width')]
- 여기서는 'width'로 시작하는 'class'속성이있는 div 태그를 찾음.
- 다른 예시:
.//span[starts-with(text(), 'Gift')]
- 'contains ()’함수처럼 'text ()'함수를 사용하여 태그 안의 텍스트를 찾았습니다. 'starts-with ()'함수를 사용하여 수행 할 수도 있습니다.