"Selenium xpath"의 두 판 사이의 차이
DB CAFE
(→" * " 의 의미) |
(→Descendant XPath) |
||
(같은 사용자의 중간 판 22개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
== Xpath 개요 == | == Xpath 개요 == | ||
− | |||
Selenium WebDriver를 사용하여 웹 애플리케이션을 자동화 할 때 가장 어려운 작업 중 하나는 웹 요소를 찾는 것입니다. | Selenium WebDriver를 사용하여 웹 애플리케이션을 자동화 할 때 가장 어려운 작업 중 하나는 웹 요소를 찾는 것입니다. | ||
− | |||
{{틀:고지 상자 | {{틀:고지 상자 | ||
|내용= Selenium WebDriver 에서 요소(Element)를 찾는 로케이터(Locator) | |내용= Selenium WebDriver 에서 요소(Element)를 찾는 로케이터(Locator) | ||
15번째 줄: | 13번째 줄: | ||
|아이콘=filter_3 | |아이콘=filter_3 | ||
}} | }} | ||
− | |||
− | |||
− | |||
− | |||
=== XPath 란? === | === XPath 란? === | ||
{{틀:고지 상자 | {{틀:고지 상자 | ||
39번째 줄: | 33번째 줄: | ||
# 항상 루트 노드에서 시작합니다. | # 항상 루트 노드에서 시작합니다. | ||
}} | }} | ||
− | |||
− | |||
# 예시 | # 예시 | ||
<source lang=c> | <source lang=c> | ||
55번째 줄: | 47번째 줄: | ||
# 위의 절대 경로를 다음 상대 경로에도 쓸 수 있습니다. | # 위의 절대 경로를 다음 상대 경로에도 쓸 수 있습니다. | ||
}} | }} | ||
− | <source lang= | + | <source lang=html> |
//div[@id='navigation']/ul/li[3]/a/span | //div[@id='navigation']/ul/li[3]/a/span | ||
</source> | </source> | ||
67번째 줄: | 59번째 줄: | ||
# 두가지 예시 참조 | # 두가지 예시 참조 | ||
# 예시 1) | # 예시 1) | ||
− | <source lang= | + | <source lang=html> |
.//div[@id='products']/a/img | .//div[@id='products']/a/img | ||
</source> | </source> | ||
74번째 줄: | 66번째 줄: | ||
## 동일한 img 태그는 다음에서 찾을 수 있습니다. | ## 동일한 img 태그는 다음에서 찾을 수 있습니다. | ||
# 예시 2) | # 예시 2) | ||
− | <source lang= | + | <source lang=html> |
.//div[@id='products']//img | .//div[@id='products']//img | ||
</source> | </source> | ||
87번째 줄: | 79번째 줄: | ||
}} | }} | ||
# 예시) | # 예시) | ||
− | <source lang= | + | <source lang=html> |
.//div[@id='products']/.. | .//div[@id='products']/.. | ||
</source> | </source> | ||
94번째 줄: | 86번째 줄: | ||
==== "@”의 의미 ==== | ==== "@”의 의미 ==== | ||
{{틀:고지 상자 | {{틀:고지 상자 | ||
− | |내용= ''' | + | |내용= '''“@”''' |
# "@"는 문서 트리에서 속성을 선택하는 데 사용됩니다. | # "@"는 문서 트리에서 속성을 선택하는 데 사용됩니다. | ||
# 위의 예시에서 "@"로 속성 ID를 지정하고‘’안에 값 'products' 지정 함. | # 위의 예시에서 "@"로 속성 ID를 지정하고‘’안에 값 'products' 지정 함. | ||
101번째 줄: | 93번째 줄: | ||
==== " * " 의 의미 ==== | ==== " * " 의 의미 ==== | ||
{{틀:고지 상자 | {{틀:고지 상자 | ||
− | |내용= ''' | + | |내용= '''“ * ”''' |
# XPath는 "*"와 같은 와일드 카드를 지원합니다. | # XPath는 "*"와 같은 와일드 카드를 지원합니다. | ||
#: 때로는 상대 경로를 찾는 데 많이 유용합니다. | #: 때로는 상대 경로를 찾는 데 많이 유용합니다. | ||
107번째 줄: | 99번째 줄: | ||
# 예시 ) | # 예시 ) | ||
− | <source lang= | + | <source lang=html> |
.//*[text()='Home'] | .//*[text()='Home'] | ||
</source> | </source> | ||
− | + | <source lang=html> | |
− | <source lang= | ||
.//a[@*='Home'] | .//a[@*='Home'] | ||
</source> | </source> | ||
* 이 경우 값이 'home'인 속성을 가진 요소를 찾으려고합니다. | * 이 경우 값이 'home'인 속성을 가진 요소를 찾으려고합니다. | ||
* 이 경우 속성 이름은 신경 쓰지 않습니다. | * 이 경우 속성 이름은 신경 쓰지 않습니다. | ||
+ | |||
+ | ---- | ||
==== 형제/자식/조상 요소 찾기 ==== | ==== 형제/자식/조상 요소 찾기 ==== | ||
===== 현재노드의 태그가 닫힐때까지의 모든 노드 "Following" ===== | ===== 현재노드의 태그가 닫힐때까지의 모든 노드 "Following" ===== | ||
+ | {{틀:고지 상자 | ||
+ | |내용= ''' Following ''' | ||
# 주어진 부모 노드 뒤의 요소 찾기를 시작합니다. | # 주어진 부모 노드 뒤의 요소 찾기를 시작합니다. | ||
# 다음 문 앞의 요소를 찾아 최상위 노드로 설정 한 다음 해당 노드 이후의 모든 요소를 찾기 시작합니다. | # 다음 문 앞의 요소를 찾아 최상위 노드로 설정 한 다음 해당 노드 이후의 모든 요소를 찾기 시작합니다. | ||
125번째 줄: | 120번째 줄: | ||
## 그런 다음 해당 노드 이후의 모든 섹션 요소를 찾기 시작합니다. | ## 그런 다음 해당 노드 이후의 모든 섹션 요소를 찾기 시작합니다. | ||
#::<source lang=java>driver.findElement(By.xpath("//div[@class='fusion-sliding-bar-wrapper']//following::section"));</source> | #::<source lang=java>driver.findElement(By.xpath("//div[@class='fusion-sliding-bar-wrapper']//following::section"));</source> | ||
+ | }} | ||
https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2018/05/Pasted-into-XPath-in-Selenium-The-Most-Complete-Guide-2021-Update-10-1024x393.png | https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2018/05/Pasted-into-XPath-in-Selenium-The-Most-Complete-Guide-2021-Update-10-1024x393.png | ||
---- | ---- | ||
===== 현재 노드의 형제 노드 "Following-sibling" ===== | ===== 현재 노드의 형제 노드 "Following-sibling" ===== | ||
+ | {{틀:고지 상자 | ||
+ | |내용= '''Following-sibling''' | ||
# 컨텍스트 노드의 다음 형제를 선택. | # 컨텍스트 노드의 다음 형제를 선택. | ||
− | + | <source lang=xml>driver.findElement(By.xpath("//*[@class=’col-md-6 text-left’]/child::div[2]//*[@class=’panel-body’]//following-sibling::li"));</source> | |
+ | }} | ||
===== Child ===== | ===== Child ===== | ||
+ | {{틀:고지 상자 | ||
+ | |내용= '''Child ''' | ||
# 현재 노드의 모든 자식 요소를 선택합니다. | # 현재 노드의 모든 자식 요소를 선택합니다. | ||
− | + | <source lang=html>driver.findElement(By.xpath("//nav[@class=’fusion-main-menu’]//ul[@id=’menu-main’]/child::li"));</source> | |
+ | |||
+ | }} | ||
https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2018/05/Pasted-into-XPath-in-Selenium-The-Most-Complete-Guide-2021-Update-11-1024x335.png | https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2018/05/Pasted-into-XPath-in-Selenium-The-Most-Complete-Guide-2021-Update-11-1024x335.png | ||
142번째 줄: | 145번째 줄: | ||
===== Preceding ===== | ===== Preceding ===== | ||
+ | {{틀:고지 상자 | ||
+ | |내용= '''Preceding''' | ||
# 현재 노드 앞에 오는 모든 노드를 선택합니다. | # 현재 노드 앞에 오는 모든 노드를 선택합니다. | ||
# 먼저 맨 아래 요소를 찾은 다음 앞에 "li"를 사용하여 아래와 같이 모든 "li"요소를 찾습니다. | # 먼저 맨 아래 요소를 찾은 다음 앞에 "li"를 사용하여 아래와 같이 모든 "li"요소를 찾습니다. | ||
− | + | <source lang=html> | |
− | + | //div[@id='wrapper']/div[@class='fusion-sliding-bar-wrapper']//preceding::li | |
</source> | </source> | ||
+ | }} | ||
+ | |||
https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2018/05/Pasted-into-XPath-in-Selenium-The-Most-Complete-Guide-2021-Update-13.png | https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2018/05/Pasted-into-XPath-in-Selenium-The-Most-Complete-Guide-2021-Update-13.png | ||
===== Ancestor ===== | ===== Ancestor ===== | ||
+ | {{틀:고지 상자 | ||
+ | |내용= ''' Ancestor ''' | ||
# ancestor 요소를 찾아 최상위 노드로 설정 한 다음 해당 노드에서 요소를 찾기 시작합니다. | # ancestor 요소를 찾아 최상위 노드로 설정 한 다음 해당 노드에서 요소를 찾기 시작합니다. | ||
## 먼저 XPath가 //section [@ id =’content’] 인 요소를 찾습니다. | ## 먼저 XPath가 //section [@ id =’content’] 인 요소를 찾습니다. | ||
## 그 다음 위의 XPath가 속한 노드에서 모든 div 요소를 찾기 시작합니다. | ## 그 다음 위의 XPath가 속한 노드에서 모든 div 요소를 찾기 시작합니다. | ||
− | + | <source lang=html> | |
//section[@id=’content’]//ancestor::div | //section[@id=’content’]//ancestor::div | ||
</source> | </source> | ||
+ | |||
+ | }} | ||
https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2018/05/Pasted-into-XPath-in-Selenium-The-Most-Complete-Guide-2021-Update-9.png | https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2018/05/Pasted-into-XPath-in-Selenium-The-Most-Complete-Guide-2021-Update-9.png | ||
164번째 줄: | 175번째 줄: | ||
# //section[@id=’content’]//ancestor::div[4]- Returns 19 nodes | # //section[@id=’content’]//ancestor::div[4]- Returns 19 nodes | ||
− | ===== Descendant | + | ===== Descendant ===== |
− | + | {{틀:고지 상자 | |
+ | |내용= ''' Descendant ''' | ||
+ | # 현재 요소의 노드 아래로 이동하는 현재 요소의 모든 하위 요소를 식별하고 반환합니다. 아래에서 XPath는 "menu-main"아래의 모든 "li"요소를 반환합니다. | ||
+ | # 예시) | ||
+ | <source lang=xml> | ||
+ | //nav[@class=’fusion-main-menu’]//*[@id=’menu-main’]//descendant::li | ||
+ | </source> | ||
+ | }} | ||
+ | |||
− | |||
https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2017/09/descendant.png | https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2017/09/descendant.png | ||
===== Parent ===== | ===== Parent ===== | ||
− | + | {{틀:고지 상자 | |
+ | |내용= '''Parent ''' | ||
+ | 아래 예제와 같이 현재 노드의 부모를 반환합니다. | ||
+ | <source lang=html> | ||
+ | .//*[@id=’get-input’]/button//parent::form | ||
+ | </source> | ||
+ | }} | ||
+ | |||
− | |||
https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2017/09/parent-selector-tactic-in-selenium.png | https://548225-1759080-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2017/09/parent-selector-tactic-in-selenium.png | ||
184번째 줄: | 208번째 줄: | ||
===== “contains” 키워드 ===== | ===== “contains” 키워드 ===== | ||
# "contains ()"는 속성이름과 속성 값 , 두 개의 인수를받는 함수입니다. | # "contains ()"는 속성이름과 속성 값 , 두 개의 인수를받는 함수입니다. | ||
− | <source lang= | + | <source lang=html> |
.//div[contains(@id, 'search')] | .//div[contains(@id, 'search')] | ||
</source> | </source> | ||
191번째 줄: | 215번째 줄: | ||
* 함수‘contains ()’는 패턴을 일치시켜 속성 이름을 값과 일치시킵니다. | * 함수‘contains ()’는 패턴을 일치시켜 속성 이름을 값과 일치시킵니다. | ||
# 다음은‘contains ()’함수의 또 다른 사용법 | # 다음은‘contains ()’함수의 또 다른 사용법 | ||
− | <source lang= | + | <source lang=html> |
.//span[contains(text(), 'Hot')] | .//span[contains(text(), 'Hot')] | ||
</source> | </source> | ||
198번째 줄: | 222번째 줄: | ||
* 앞에서 본 예에서는‘text ()’함수를 사용했습니다. | * 앞에서 본 예에서는‘text ()’함수를 사용했습니다. | ||
# 'text ()’함수의 특정 텍스트가있는 특정 태그를 찾습니다. | # 'text ()’함수의 특정 텍스트가있는 특정 태그를 찾습니다. | ||
− | <source lang= | + | <source lang=html> |
.//span[text()= 'Home'] | .//span[text()= 'Home'] | ||
</source> | </source> |
2021년 6월 9일 (수) 10:25 기준 최신판
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
목차
1 Xpath 개요[편집]
Selenium WebDriver를 사용하여 웹 애플리케이션을 자동화 할 때 가장 어려운 작업 중 하나는 웹 요소를 찾는 것입니다.
android Selenium WebDriver 에서 요소(Element)를 찾는 로케이터(Locator)
- Id
- CSS
- XPATH
- Class Name
- Name
- Tag Name
- Links Text
- Partial Links Text
1.1 XPath 란?[편집]
android XPATH
- 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)[편집]
android 절대경로
- 절대 경로는 계층 문서 내에서 노드를 선택하기 위해 모든 단일 노드를 지정하는 것을 의미합니다.
- 항상 루트 노드에서 시작합니다.
- 예시
/html/body/div[2]/div/div[4]/div/ul/li[3]/a/span
1.2.2 상대경로 (Relative Path)[편집]
android 상대경로
- 상대경로 XPath 표현식은 매우 길 수 있습니다.
- 중첩 된 각 관계에 대해 100% 존재해야 함. 그렇지 않으면 로케이터가 작동하지 않습니다.
- 이러한 이유로 Relative XPath 표현식을 사용하는 것이 좋습니다.
- 상대 XPath 표현식에서는 선택한 노드에서 시작할 수 있습니다.
- 위의 절대 경로를 다음 상대 경로에도 쓸 수 있습니다.
//div[@id='navigation']/ul/li[3]/a/span
1.2.3 슬래쉬 “/” 와 "//" 의미[편집]
android “/” 와 "//"
- XPath의 어느 곳에서나 하나의 슬래시 '/'는 상위 요소 내에서 바로 요소를 찾는 것을 의미합니다.
- 이중 슬래시‘//’는 상위 요소 내에서 하위 또는 손자 (하위) 요소를 찾는 것을 나타냅니다.
- 두가지 예시 참조
- 예시 1)
.//div[@id='products']/a/img
- 'a' 태그의 하위 인 html 문서에서 이미지 태그를 찾으려고합니다.
- 그리고 a 태그는 div 태그의 자식입니다.
- 동일한 img 태그는 다음에서 찾을 수 있습니다.
- 예시 2)
.//div[@id='products']//img
1.2.4 점 “.” 와 “..” 의미[편집]
android “.” 와 “..”
- "." 은 XPath에서 현재 노드를 지정하는 데 사용됩니다.
- ".." 은 문서 트리에서 한 단계 위로 이동하는 데 사용됩니다.
- 즉, 현재 노드의 부모를 찾습니다.
- 예시)
.//div[@id='products']/..
- 위 표현식은 현재 노드의 부모 노드를 찾습니다.
1.2.5 "@”의 의미[편집]
android “@”
- "@"는 문서 트리에서 속성을 선택하는 데 사용됩니다.
- 위의 예시에서 "@"로 속성 ID를 지정하고‘’안에 값 'products' 지정 함.
1.2.6 " * " 의 의미[편집]
android “ * ”
- XPath는 "*"와 같은 와일드 카드를 지원합니다.
- 때로는 상대 경로를 찾는 데 많이 유용합니다.
- 예시 )
.//*[text()='Home']
.//a[@*='Home']
- 이 경우 값이 'home'인 속성을 가진 요소를 찾으려고합니다.
- 이 경우 속성 이름은 신경 쓰지 않습니다.
1.2.7 형제/자식/조상 요소 찾기[편집]
1.2.7.1 현재노드의 태그가 닫힐때까지의 모든 노드 "Following"[편집]
android Following
- 주어진 부모 노드 뒤의 요소 찾기를 시작합니다.
- 다음 문 앞의 요소를 찾아 최상위 노드로 설정 한 다음 해당 노드 이후의 모든 요소를 찾기 시작합니다.
- 먼저 클래스 속성이있는이 XPath를 찾습니다.
driver.findElement(By.xpath("//div[@class='fusion-sliding-bar-wrapper']"));
- 그런 다음 해당 노드 이후의 모든 섹션 요소를 찾기 시작합니다.
driver.findElement(By.xpath("//div[@class='fusion-sliding-bar-wrapper']//following::section"));
1.2.7.2 현재 노드의 형제 노드 "Following-sibling"[편집]
android Following-sibling
- 컨텍스트 노드의 다음 형제를 선택.
driver.findElement(By.xpath("//*[@class=’col-md-6 text-left’]/child::div[2]//*[@class=’panel-body’]//following-sibling::li"));
1.2.7.3 Child[편집]
android Child
- 현재 노드의 모든 자식 요소를 선택합니다.
driver.findElement(By.xpath("//nav[@class=’fusion-main-menu’]//ul[@id=’menu-main’]/child::li"));
또한 아래와 같이 section [1], section [2], section [3] 등의 구문을 사용하여 필요한 "section"요소를 선택할 수 있습니다.
1.2.7.4 Preceding[편집]
android Preceding
- 현재 노드 앞에 오는 모든 노드를 선택합니다.
- 먼저 맨 아래 요소를 찾은 다음 앞에 "li"를 사용하여 아래와 같이 모든 "li"요소를 찾습니다.
//div[@id='wrapper']/div[@class='fusion-sliding-bar-wrapper']//preceding::li
1.2.7.5 Ancestor[편집]
android 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.7.6 Descendant[편집]
android Descendant
- 현재 요소의 노드 아래로 이동하는 현재 요소의 모든 하위 요소를 식별하고 반환합니다. 아래에서 XPath는 "menu-main"아래의 모든 "li"요소를 반환합니다.
- 예시)
//nav[@class=’fusion-main-menu’]//*[@id=’menu-main’]//descendant::li
1.2.7.7 Parent[편집]
android Parent 아래 예제와 같이 현재 노드의 부모를 반환합니다.
.//*[@id=’get-input’]/button//parent::form
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 ()'함수를 사용하여 수행 할 수도 있습니다.